Skip to content

Commit

Permalink
refactor(web): add template category constant & add language and colo…
Browse files Browse the repository at this point in the history
…r to statusbar (#1435)
  • Loading branch information
newfish-cmyk authored Aug 1, 2023
1 parent 5c9bb33 commit 01f45a2
Show file tree
Hide file tree
Showing 18 changed files with 309 additions and 72 deletions.
6 changes: 4 additions & 2 deletions web/public/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,8 @@
"MyAccount": "My Account",
"CostTrend": "Cost Trend",
"Balance": "Balance",
"Pause": "Pause"
"Pause": "Pause",
"AppMonitor": "App Monitoring"
},
"StoragePanel": {
"All": "Total Capacity",
Expand Down Expand Up @@ -584,5 +585,6 @@
"SelectOne": "At least select one",
"Apply": "apply",
"Developing": "Developing",
"Unverified": "Unverified"
"Unverified": "Unverified",
"i18n tip": ""
}
6 changes: 4 additions & 2 deletions web/public/locales/zh-CN/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,8 @@
"MyAccount": "我的账户",
"CostTrend": "成本趋势",
"Balance": "余额",
"Pause": "暂停应用"
"Pause": "暂停应用",
"AppMonitor": "资源监控"
},
"StoragePanel": {
"All": "总容量",
Expand Down Expand Up @@ -584,5 +585,6 @@
"SelectOne": "请至少选择一个",
"Apply": "使用",
"Developing": "开发中",
"Unverified": "未认证"
"Unverified": "未认证",
"i18n tip": "En"
}
6 changes: 4 additions & 2 deletions web/public/locales/zh/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,8 @@
"MyAccount": "我的账户",
"CostTrend": "成本趋势",
"Balance": "余额",
"Pause": "暂停应用"
"Pause": "暂停应用",
"AppMonitor": "资源监控"
},
"StoragePanel": {
"All": "总容量",
Expand Down Expand Up @@ -584,5 +585,6 @@
"SelectOne": "请至少选择一个",
"Apply": "使用",
"Developing": "开发中",
"Unverified": "未认证"
"Unverified": "未认证",
"i18n tip": "En"
}
23 changes: 23 additions & 0 deletions web/src/components/ColorModeSwitch/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div
className={clsx("flex cursor-pointer items-center", className)}
onClick={() => {
toggleColorMode();
window.dispatchEvent(new Event("ColorModeChange"));
}}
>
{darkMode ? <MoonIcon boxSize={boxSize} /> : <SunIcon boxSize={boxSize} />}
</div>
);
}
6 changes: 6 additions & 0 deletions web/src/components/CommonIcon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -334,3 +334,9 @@ export const GoSelectIcon = () => {
</svg>
);
};

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",
});
26 changes: 26 additions & 0 deletions web/src/components/LanguageSwitch/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<Button
className={clsx("!px-0 !font-normal", className)}
onClick={(event) => {
event?.preventDefault();
i18n.changeLanguage(i18n.language === "en" ? "zh" : "en");
}}
variant="none"
>
<LangIcon className={clsx("mr-1", className)} />
<p>{t("i18n tip")}</p>
</Button>
);
};

export default LanguageSwitch;
13 changes: 6 additions & 7 deletions web/src/components/Pagination/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
}
Expand All @@ -50,7 +50,7 @@ export default function Pagination(props: {
variant="link"
onClick={() => {
onChange({
...values,
pageSize: values.pageSize,
page: 1,
});
}}
Expand All @@ -64,7 +64,7 @@ export default function Pagination(props: {
variant="link"
onClick={() =>
onChange({
...values,
pageSize: values.pageSize,
page: page! - 1,
})
}
Expand All @@ -86,7 +86,7 @@ export default function Pagination(props: {
isDisabled={maxPage === page || maxPage === -1}
onClick={() => {
onChange({
...values,
pageSize: values.pageSize,
page: page! + 1,
});
}}
Expand All @@ -99,7 +99,7 @@ export default function Pagination(props: {
variant="link"
onClick={() => {
onChange({
...values,
pageSize: values.pageSize,
page: maxPage,
});
}}
Expand All @@ -116,7 +116,6 @@ export default function Pagination(props: {
value={pageSize}
onChange={(e: any) => {
onChange({
...values,
pageSize: parseInt(e.target.value),
page: 1,
});
Expand Down
8 changes: 8 additions & 0 deletions web/src/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}
17 changes: 4 additions & 13 deletions web/src/layouts/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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<string>("");

const navList_left = [
Expand Down Expand Up @@ -99,16 +98,8 @@ const Header = (props: { width: string }) => {
</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>
<LanguageSwitch className="text-[20px]" />
<ColorModeSwitch className="ml-6 mr-8" />
{userInfo?._id ? (
<>
<UserSetting
Expand Down
7 changes: 6 additions & 1 deletion web/src/pages/app/mods/StatusBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@ import { useTranslation } from "react-i18next";
import { HStack, useColorMode } from "@chakra-ui/react";
import clsx from "clsx";

import ColorModeSwitch from "@/components/ColorModeSwitch";
import { DeleteIcon } from "@/components/CommonIcon";
import LanguageSwitch from "@/components/LanguageSwitch";
import Panel from "@/components/Panel";
import { COLOR_MODE } from "@/constants";

import Icons from "../SideBar/Icons";

Expand All @@ -17,11 +20,13 @@ import StatusBadge from "@/pages/home/mods/StatusBadge";
function StatusBar() {
const { t } = useTranslation();
const { currentApp } = useGlobalStore((state) => state);
const darkMode = useColorMode().colorMode === "dark";
const darkMode = useColorMode().colorMode === COLOR_MODE.dark;

return (
<Panel className="!flex-row justify-between">
<HStack spacing={2}>
<LanguageSwitch className="!text-[12px]" />
<ColorModeSwitch boxSize={3} className="pr-2" />
<div>
{t("StatusBar.CurrentApplication")}: {currentApp?.name}
</div>
Expand Down
42 changes: 42 additions & 0 deletions web/src/pages/app/setting/AppMonitor/AreaCard/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="h-[180px] w-1/2 rounded-xl border border-grayModern-200 bg-[#F8FAFB] p-4">
<div className="mb-3 font-medium text-grayModern-900">{title}</div>
<ResponsiveContainer width="100%" height="90%">
<AreaChart data={data} margin={{ left: -30 }}>
<CartesianGrid strokeDasharray="3 3" vertical={false} />
<XAxis dataKey="name" axisLine={false} tickLine={false} fontSize="10" />
<YAxis axisLine={false} tickLine={false} fontSize="10" />
<Tooltip
// formatter={}
/>
<Area
type="monotone"
dataKey="uv"
stroke={strokeColor}
fill={fillColor}
strokeWidth={2}
/>
</AreaChart>
</ResponsiveContainer>
</div>
);
}
40 changes: 40 additions & 0 deletions web/src/pages/app/setting/AppMonitor/PieCard/index.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className="h-[180px] w-1/2 rounded-xl border border-grayModern-200 bg-[#F8FAFB] p-4">
<div className="font-medium text-grayModern-900">{title}</div>
<ResponsiveContainer width="100%" height="90%">
<PieChart>
<Tooltip />
<Pie
data={data}
cx="50%"
innerRadius={50}
outerRadius={60}
startAngle={90}
endAngle={-270}
legendType="circle"
dataKey="value"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={colors[index]} />
))}
</Pie>
<text
x="40%"
y="50%"
textAnchor="middle"
dominantBaseline="middle"
style={{ fontSize: "24px", fontWeight: "bold" }}
>
66%
</text>
<Legend align="right" verticalAlign="middle" layout="vertical" />
</PieChart>
</ResponsiveContainer>
</div>
);
}
Loading

0 comments on commit 01f45a2

Please sign in to comment.