From 01f45a20a2b47df05f08f26ea85e333682938db9 Mon Sep 17 00:00:00 2001 From: heheer <71265218+newfish-cmyk@users.noreply.github.com> Date: Tue, 1 Aug 2023 14:21:17 +0800 Subject: [PATCH] refactor(web): add template category constant & add language and color to statusbar (#1435) --- web/public/locales/en/translation.json | 6 +- web/public/locales/zh-CN/translation.json | 6 +- web/public/locales/zh/translation.json | 6 +- web/src/components/ColorModeSwitch/index.tsx | 23 ++++ web/src/components/CommonIcon/index.tsx | 6 + web/src/components/LanguageSwitch/index.tsx | 26 +++++ web/src/components/Pagination/index.tsx | 13 +-- web/src/constants/index.ts | 8 ++ web/src/layouts/Header/index.tsx | 17 +-- web/src/pages/app/mods/StatusBar/index.tsx | 7 +- .../app/setting/AppMonitor/AreaCard/index.tsx | 42 +++++++ .../app/setting/AppMonitor/PieCard/index.tsx | 40 +++++++ .../pages/app/setting/AppMonitor/index.tsx | 106 ++++++++++++++++++ .../pages/app/setting/SysSetting/index.tsx | 7 ++ .../Mods/TemplateCard/TemplateCard.tsx | 5 +- web/src/pages/functionTemplate/index.tsx | 31 ++--- web/src/pages/homepage/language.tsx | 26 ----- web/src/pages/homepage/navbar.tsx | 6 +- 18 files changed, 309 insertions(+), 72 deletions(-) create mode 100644 web/src/components/ColorModeSwitch/index.tsx create mode 100644 web/src/components/LanguageSwitch/index.tsx create mode 100644 web/src/pages/app/setting/AppMonitor/AreaCard/index.tsx create mode 100644 web/src/pages/app/setting/AppMonitor/PieCard/index.tsx create mode 100644 web/src/pages/app/setting/AppMonitor/index.tsx delete mode 100644 web/src/pages/homepage/language.tsx diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json index 1b40c73987..530388acf4 100644 --- a/web/public/locales/en/translation.json +++ b/web/public/locales/en/translation.json @@ -201,7 +201,8 @@ "MyAccount": "My Account", "CostTrend": "Cost Trend", "Balance": "Balance", - "Pause": "Pause" + "Pause": "Pause", + "AppMonitor": "App Monitoring" }, "StoragePanel": { "All": "Total Capacity", @@ -584,5 +585,6 @@ "SelectOne": "At least select one", "Apply": "apply", "Developing": "Developing", - "Unverified": "Unverified" + "Unverified": "Unverified", + "i18n tip": "中" } diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json index f2e1144ace..310b61fb5e 100644 --- a/web/public/locales/zh-CN/translation.json +++ b/web/public/locales/zh-CN/translation.json @@ -201,7 +201,8 @@ "MyAccount": "我的账户", "CostTrend": "成本趋势", "Balance": "余额", - "Pause": "暂停应用" + "Pause": "暂停应用", + "AppMonitor": "资源监控" }, "StoragePanel": { "All": "总容量", @@ -584,5 +585,6 @@ "SelectOne": "请至少选择一个", "Apply": "使用", "Developing": "开发中", - "Unverified": "未认证" + "Unverified": "未认证", + "i18n tip": "En" } diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json index fff3c68a22..8df9942059 100644 --- a/web/public/locales/zh/translation.json +++ b/web/public/locales/zh/translation.json @@ -201,7 +201,8 @@ "MyAccount": "我的账户", "CostTrend": "成本趋势", "Balance": "余额", - "Pause": "暂停应用" + "Pause": "暂停应用", + "AppMonitor": "资源监控" }, "StoragePanel": { "All": "总容量", @@ -584,5 +585,6 @@ "SelectOne": "请至少选择一个", "Apply": "使用", "Developing": "开发中", - "Unverified": "未认证" + "Unverified": "未认证", + "i18n tip": "En" } diff --git a/web/src/components/ColorModeSwitch/index.tsx b/web/src/components/ColorModeSwitch/index.tsx new file mode 100644 index 0000000000..37f30efcb5 --- /dev/null +++ b/web/src/components/ColorModeSwitch/index.tsx @@ -0,0 +1,23 @@ +import { MoonIcon, SunIcon } from "@chakra-ui/icons"; +import { useColorMode } from "@chakra-ui/react"; +import clsx from "clsx"; + +import { COLOR_MODE } from "@/constants"; + +export default function ColorModeSwitch(props: { className?: string; boxSize?: number }) { + const { toggleColorMode } = useColorMode(); + const { className, boxSize = 4 } = props; + const darkMode = useColorMode().colorMode === COLOR_MODE.dark; + + return ( +
{ + toggleColorMode(); + window.dispatchEvent(new Event("ColorModeChange")); + }} + > + {darkMode ? : } +
+ ); +} diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx index f82688971b..0c229b47d4 100644 --- a/web/src/components/CommonIcon/index.tsx +++ b/web/src/components/CommonIcon/index.tsx @@ -334,3 +334,9 @@ export const GoSelectIcon = () => { ); }; + +export const MonitorIcon = createIcon({ + displayName: "MonitorIcon", + viewBox: "0 0 14 12", + d: "M1.00017 4.00008C0.811276 4.00008 0.652832 3.93608 0.524832 3.80808C0.396832 3.68008 0.333054 3.52186 0.333498 3.33342V2.00008C0.333498 1.63342 0.464165 1.31942 0.725498 1.05808C0.986832 0.796749 1.30061 0.666305 1.66683 0.666749H12.3335C12.7002 0.666749 13.0142 0.797416 13.2755 1.05875C13.5368 1.32008 13.6673 1.63386 13.6668 2.00008V3.33342C13.6668 3.5223 13.6028 3.68075 13.4748 3.80875C13.3468 3.93675 13.1886 4.00053 13.0002 4.00008C12.8113 4.00008 12.6528 3.93608 12.5248 3.80808C12.3968 3.68008 12.3331 3.52186 12.3335 3.33342V2.00008H1.66683V3.33342C1.66683 3.5223 1.60283 3.68075 1.47483 3.80875C1.34683 3.93675 1.18861 4.00053 1.00017 4.00008ZM1.66683 11.3334C1.30017 11.3334 0.986165 11.2027 0.724832 10.9414C0.463498 10.6801 0.333054 10.3663 0.333498 10.0001V8.66675C0.333498 8.47786 0.397498 8.31942 0.525498 8.19142C0.653498 8.06342 0.811721 7.99964 1.00017 8.00008C1.18905 8.00008 1.3475 8.06408 1.4755 8.19208C1.6035 8.32008 1.66728 8.4783 1.66683 8.66675V10.0001H12.3335V8.66675C12.3335 8.47786 12.3975 8.31942 12.5255 8.19142C12.6535 8.06342 12.8117 7.99964 13.0002 8.00008C13.1891 8.00008 13.3475 8.06408 13.4755 8.19208C13.6035 8.32008 13.6673 8.4783 13.6668 8.66675V10.0001C13.6668 10.3667 13.5362 10.6807 13.2748 10.9421C13.0135 11.2034 12.6997 11.3339 12.3335 11.3334H1.66683ZM5.66683 9.33342C5.78905 9.33342 5.90572 9.30275 6.01683 9.24142C6.12794 9.18008 6.21128 9.08853 6.26683 8.96675L8.3335 4.83342L9.06683 6.30008C9.12239 6.4223 9.20572 6.51408 9.31683 6.57542C9.42794 6.63675 9.54461 6.66719 9.66683 6.66675H13.0002C13.1891 6.66675 13.3475 6.60275 13.4755 6.47475C13.6035 6.34675 13.6673 6.18853 13.6668 6.00008C13.6668 5.81119 13.6028 5.65275 13.4748 5.52475C13.3468 5.39675 13.1886 5.33297 13.0002 5.33342H10.0835L8.9335 3.03342C8.81128 2.81119 8.61128 2.70008 8.3335 2.70008C8.05572 2.70008 7.85572 2.81119 7.7335 3.03342L5.66683 7.16675L4.9335 5.70008C4.87794 5.57786 4.79461 5.48608 4.6835 5.42475C4.57239 5.36342 4.45572 5.33297 4.3335 5.33342H1.00017C0.811276 5.33342 0.652832 5.39742 0.524832 5.52542C0.396832 5.65342 0.333054 5.81164 0.333498 6.00008C0.333498 6.18897 0.397498 6.34742 0.525498 6.47542C0.653498 6.60342 0.811721 6.66719 1.00017 6.66675H3.91683L5.06683 8.96675C5.12239 9.08897 5.20572 9.18075 5.31683 9.24208C5.42794 9.30342 5.54461 9.33386 5.66683 9.33342Z", +}); diff --git a/web/src/components/LanguageSwitch/index.tsx b/web/src/components/LanguageSwitch/index.tsx new file mode 100644 index 0000000000..8fd25a3246 --- /dev/null +++ b/web/src/components/LanguageSwitch/index.tsx @@ -0,0 +1,26 @@ +import { useTranslation } from "react-i18next"; +import { Button } from "@chakra-ui/react"; +import clsx from "clsx"; + +import { LangIcon } from "@/components/CommonIcon"; + +const LanguageSwitch = (props: { className?: string }) => { + const { i18n, t } = useTranslation(); + const { className } = props; + + return ( + + ); +}; + +export default LanguageSwitch; diff --git a/web/src/components/Pagination/index.tsx b/web/src/components/Pagination/index.tsx index 75ce5b6201..92c0c2ccf2 100644 --- a/web/src/components/Pagination/index.tsx +++ b/web/src/components/Pagination/index.tsx @@ -23,12 +23,12 @@ export default function Pagination(props: { if (maxPage > 0 && page && page > maxPage) { onChange({ - ...values, + pageSize: values.pageSize, page: maxPage, }); } else if (page && page < 1) { onChange({ - ...values, + pageSize: values.pageSize, page: 1, }); } @@ -50,7 +50,7 @@ export default function Pagination(props: { variant="link" onClick={() => { onChange({ - ...values, + pageSize: values.pageSize, page: 1, }); }} @@ -64,7 +64,7 @@ export default function Pagination(props: { variant="link" onClick={() => onChange({ - ...values, + pageSize: values.pageSize, page: page! - 1, }) } @@ -86,7 +86,7 @@ export default function Pagination(props: { isDisabled={maxPage === page || maxPage === -1} onClick={() => { onChange({ - ...values, + pageSize: values.pageSize, page: page! + 1, }); }} @@ -99,7 +99,7 @@ export default function Pagination(props: { variant="link" onClick={() => { onChange({ - ...values, + pageSize: values.pageSize, page: maxPage, }); }} @@ -116,7 +116,6 @@ export default function Pagination(props: { value={pageSize} onChange={(e: any) => { onChange({ - ...values, pageSize: parseInt(e.target.value), page: 1, }); diff --git a/web/src/constants/index.ts b/web/src/constants/index.ts index 7890f3b762..5146223ee0 100644 --- a/web/src/constants/index.ts +++ b/web/src/constants/index.ts @@ -84,3 +84,11 @@ export default async function (ctx: FunctionContext) { return { data: 'hi, laf' } } `; + +export enum TEMPLATE_CATEGORY { + recommended = "recommended", + all = "all", + default = "default", + stared = "stared", + recentUsed = "recentUsed", +} diff --git a/web/src/layouts/Header/index.tsx b/web/src/layouts/Header/index.tsx index 3e774c402b..414c5f46ae 100644 --- a/web/src/layouts/Header/index.tsx +++ b/web/src/layouts/Header/index.tsx @@ -1,17 +1,17 @@ import { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import { MoonIcon, SunIcon } from "@chakra-ui/icons"; import { useColorMode } from "@chakra-ui/react"; import clsx from "clsx"; +import ColorModeSwitch from "@/components/ColorModeSwitch"; import { ChatIcon, TextIcon } from "@/components/CommonIcon"; +import LanguageSwitch from "@/components/LanguageSwitch"; import { COLOR_MODE } from "@/constants"; import { getAvatarUrl } from "@/utils/getAvatarUrl"; import UserSetting from "../../pages/app/setting/UserSetting"; import useGlobalStore from "@/pages/globalStore"; -import Language from "@/pages/homepage/language"; const Header = (props: { width: string }) => { const { width } = props; @@ -20,7 +20,6 @@ const Header = (props: { width: string }) => { const { colorMode } = useColorMode(); const darkMode = colorMode === COLOR_MODE.dark; - const { toggleColorMode } = useColorMode(); const [chosenItem, setChosenItem] = useState(""); const navList_left = [ @@ -99,16 +98,8 @@ const Header = (props: { width: string }) => { ); })} - -
{ - toggleColorMode(); - window.dispatchEvent(new Event("ColorModeChange")); - }} - > - {darkMode ? : } -
+ + {userInfo?._id ? ( <> state); - const darkMode = useColorMode().colorMode === "dark"; + const darkMode = useColorMode().colorMode === COLOR_MODE.dark; return ( + +
{t("StatusBar.CurrentApplication")}: {currentApp?.name}
diff --git a/web/src/pages/app/setting/AppMonitor/AreaCard/index.tsx b/web/src/pages/app/setting/AppMonitor/AreaCard/index.tsx new file mode 100644 index 0000000000..dc08912ffb --- /dev/null +++ b/web/src/pages/app/setting/AppMonitor/AreaCard/index.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { + Area, + AreaChart, + CartesianGrid, + ResponsiveContainer, + Tooltip, + XAxis, + YAxis, +} from "recharts"; + +export default function AreaCard(props: { + data: any[]; + strokeColor: string; + fillColor: string; + title: string; +}) { + const { data, strokeColor, fillColor, title } = props; + + return ( +
+
{title}
+ + + + + + + + + +
+ ); +} diff --git a/web/src/pages/app/setting/AppMonitor/PieCard/index.tsx b/web/src/pages/app/setting/AppMonitor/PieCard/index.tsx new file mode 100644 index 0000000000..f3f62dc70f --- /dev/null +++ b/web/src/pages/app/setting/AppMonitor/PieCard/index.tsx @@ -0,0 +1,40 @@ +import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts"; + +export default function PieCard(props: { data: any[]; title: string; colors: string[] }) { + const { data, title, colors } = props; + + return ( +
+
{title}
+ + + + + {data.map((entry, index) => ( + + ))} + + + 66% + + + + +
+ ); +} diff --git a/web/src/pages/app/setting/AppMonitor/index.tsx b/web/src/pages/app/setting/AppMonitor/index.tsx new file mode 100644 index 0000000000..f38596b1ca --- /dev/null +++ b/web/src/pages/app/setting/AppMonitor/index.tsx @@ -0,0 +1,106 @@ +import MonitorCard from "./AreaCard"; +import PieCard from "./PieCard"; + +const data = [ + [ + { + name: "Page A", + uv: 4000, + pv: 2400, + amt: 2400, + }, + { + name: "Page B", + uv: 3000, + pv: 1398, + amt: 2210, + }, + { + name: "Page C", + uv: 2000, + pv: 9800, + amt: 2290, + }, + { + name: "Page D", + uv: 2780, + pv: 3908, + amt: 2000, + }, + { + name: "Page E", + uv: 1890, + pv: 4800, + amt: 2181, + }, + { + name: "Page F", + uv: 2390, + pv: 3800, + amt: 2500, + }, + ], + [ + { + name: "Page A", + uv: 4000, + pv: 2400, + amt: 2400, + }, + { + name: "Page B", + uv: 3000, + pv: 1398, + amt: 2210, + }, + { + name: "Page C", + uv: 2000, + pv: 9800, + amt: 2290, + }, + { + name: "Page D", + uv: 2780, + pv: 3908, + amt: 2000, + }, + { + name: "Page E", + uv: 1890, + pv: 4800, + amt: 2181, + }, + { + name: "Page F", + uv: 2390, + pv: 3800, + amt: 2500, + }, + ], +]; + +const data2 = [ + { name: "Group A", value: 600 }, + { name: "Group B", value: 300 }, +]; + +const data3 = [ + { name: "Group C", value: 400 }, + { name: "Group D", value: 200 }, +]; + +export default function AppMonitor() { + return ( + <> +
+ + +
+
+ + +
+ + ); +} diff --git a/web/src/pages/app/setting/SysSetting/index.tsx b/web/src/pages/app/setting/SysSetting/index.tsx index 419bd845af..f75149604c 100644 --- a/web/src/pages/app/setting/SysSetting/index.tsx +++ b/web/src/pages/app/setting/SysSetting/index.tsx @@ -5,6 +5,7 @@ import { DomainIcon, ENVIcon, TextIcon } from "@/components/CommonIcon"; import AppEnvList from "../AppEnvList"; import AppInfoList from "../AppInfoList"; +// import AppMonitor from "../AppMonitor"; import CustomDomain from "../CustomDomain"; import { TApplicationDetail } from "@/apis/typing"; @@ -25,6 +26,12 @@ export default function SysSetting(props: { component: , icon: , }, + // { + // key: "monitor", + // name: t("SettingPanel.AppMonitor"), + // component: , + // icon: , + // }, { key: "env", name: t("SettingPanel.AppEnv"), diff --git a/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx b/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx index 4d5eb60ea2..3dae3fff2a 100644 --- a/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx +++ b/web/src/pages/functionTemplate/Mods/TemplateCard/TemplateCard.tsx @@ -6,6 +6,7 @@ import clsx from "clsx"; import { LikeIcon, TimeIcon } from "@/components/CommonIcon"; import IconWrap from "@/components/IconWrap"; +import { TEMPLATE_CATEGORY } from "@/constants"; import { formatDate } from "@/utils/format"; import { useDeleteFunctionTemplateMutation } from "../../service"; @@ -53,13 +54,13 @@ const TemplateCard = (props: IProps) => {
{template.name}
- {templateCategory === "my" && ( + {templateCategory === TEMPLATE_CATEGORY.default && (
{ setTemplateList(data.data); }, @@ -114,7 +115,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) { ...queryData, }, { - enabled: queryData.type === "recommended", + enabled: queryData.type === TEMPLATE_CATEGORY.recommended, onSuccess: (data: any) => { setTemplateList(data.data); }, @@ -151,10 +152,10 @@ export default function FunctionTemplate(props: { isModal?: boolean }) { const handleSideBarClick = (item: any) => { setSearchKey(""); - if (item.value === "stared") { - setQueryData({ ...defaultQueryData, type: "stared" }); - } else if (item.value === "recentUsed") { - setQueryData({ ...defaultQueryData, type: "recentUsed" }); + if (item.value === TEMPLATE_CATEGORY.stared) { + setQueryData({ ...defaultQueryData, type: TEMPLATE_CATEGORY.stared }); + } else if (item.value === TEMPLATE_CATEGORY.recentUsed) { + setQueryData({ ...defaultQueryData, type: TEMPLATE_CATEGORY.recentUsed }); } else { setQueryData(defaultQueryData); } @@ -202,7 +203,7 @@ export default function FunctionTemplate(props: { isModal?: boolean }) {
- {queryData.type === "default" ? ( + {queryData.type === TEMPLATE_CATEGORY.default ? ( ) : null}
- {queryData.type === "all" || queryData.type === "recommended" ? ( + {queryData.type === TEMPLATE_CATEGORY.all || + queryData.type === TEMPLATE_CATEGORY.recommended ? ( } height={"2.5rem"} /> { - const { fontSize } = props; - const { i18n } = useTranslation(); - - return ( - - ); -}; - -export default Language; diff --git a/web/src/pages/homepage/navbar.tsx b/web/src/pages/homepage/navbar.tsx index bcd6163199..ffb5b3c410 100644 --- a/web/src/pages/homepage/navbar.tsx +++ b/web/src/pages/homepage/navbar.tsx @@ -8,7 +8,7 @@ import clsx from "clsx"; import { GithubIcon, MenuIcon } from "@/components/CommonIcon"; import { COLOR_MODE, Routes } from "@/constants"; -import Language from "./language"; +import LanguageSwitch from "../../components/LanguageSwitch"; const Navbar = () => { const [showBanner, setShowBanner] = useState(false); @@ -133,7 +133,7 @@ const Navbar = () => { {stars} ) : null} - +
{ darkMode ? "flex px-4 py-2 hover:bg-gray-900" : "flex px-4 py-2 hover:bg-gray-100" } > - +