@@ -155,7 +199,6 @@ export default function UserInfo() {
{showItem === "avatar" &&
}
diff --git a/web/src/pages/app/setting/UserSetting/index.tsx b/web/src/pages/app/setting/UserSetting/index.tsx
index 356a608772..70064b3c41 100644
--- a/web/src/pages/app/setting/UserSetting/index.tsx
+++ b/web/src/pages/app/setting/UserSetting/index.tsx
@@ -1,4 +1,3 @@
-import { useTranslation } from "react-i18next";
import { ChevronRightIcon } from "@chakra-ui/icons";
import {
Avatar,
@@ -11,36 +10,24 @@ import {
VStack,
} from "@chakra-ui/react";
import clsx from "clsx";
+import { t } from "i18next";
import {
BillingIcon,
- CardIcon,
- ChargeIcon,
ContactIcon,
- CostIcon,
DiscordIcon,
ExitIcon,
GroupIcon,
- InviteIcon,
- PATIcon,
- StandardIcon,
UserIcon,
WechatIcon,
} from "@/components/CommonIcon";
+import useTabMatch from "./useTabMatch";
+
import UserBalance from "@/layouts/Header/UserBalance";
import SettingModal, { TabKeys } from "@/pages/app/setting";
-import BillingDetails from "@/pages/app/setting/BillingDetails";
-import CardRedemption from "@/pages/app/setting/CardRedemption";
-import PATList from "@/pages/app/setting/PATList";
-import PricingStandards from "@/pages/app/setting/PricingStandards";
-import RechargeHistory from "@/pages/app/setting/RechargeHistory";
-import Usage from "@/pages/app/setting/Usage";
-import UserInfo from "@/pages/app/setting/UserInfo";
-import UserInvite from "@/pages/app/setting/UserInvite";
export default function UserSetting(props: { name: string; avatar?: string; width: string }) {
- const { t } = useTranslation();
const darkMode = useColorMode().colorMode === "dark";
return (
@@ -97,26 +84,7 @@ export default function UserSetting(props: { name: string; avatar?: string; widt
>
,
- icon:
,
- },
- {
- key: TabKeys.UserInvite,
- name: String(t("SettingPanel.UserInvite")),
- component:
,
- icon:
,
- },
- {
- key: TabKeys.PAT,
- name: t("Personal Access Token"),
- component:
,
- icon:
,
- },
- ]}
+ tabMatch={useTabMatch("user")}
headerTitle={t("SettingPanel.UserCenter")}
currentTab={TabKeys.UserInfo}
>
@@ -136,38 +104,7 @@ export default function UserSetting(props: { name: string; avatar?: string; widt
,
- icon:
,
- },
- {
- key: TabKeys.CardRedemption,
- name: String(t("SettingPanel.CardRedemption")),
- component:
,
- icon:
,
- },
- {
- key: TabKeys.BillingDetails,
- name: String(t("SettingPanel.BillingDetails")),
- component:
,
- icon:
,
- },
- {
- key: TabKeys.RechargeHistory,
- name: String(t("SettingPanel.RechargeHistory")),
- component:
,
- icon:
,
- },
- {
- key: TabKeys.PricingStandards,
- name: String(t("SettingPanel.PricingStandards")),
- component:
,
- icon:
,
- },
- ]}
+ tabMatch={useTabMatch("usage")}
headerTitle={t("SettingPanel.Usage")}
currentTab={TabKeys.CostOverview}
>
diff --git a/web/src/pages/app/setting/UserSetting/useTabMatch.tsx b/web/src/pages/app/setting/UserSetting/useTabMatch.tsx
new file mode 100644
index 0000000000..a80777b214
--- /dev/null
+++ b/web/src/pages/app/setting/UserSetting/useTabMatch.tsx
@@ -0,0 +1,86 @@
+import { useTranslation } from "react-i18next";
+
+import {
+ BillingIcon,
+ CardIcon,
+ ChargeIcon,
+ CostIcon,
+ InviteIcon,
+ PATIcon,
+ StandardIcon,
+ UserIcon,
+} from "@/components/CommonIcon";
+
+import { TabKeys } from "@/pages/app/setting";
+import BillingDetails from "@/pages/app/setting/BillingDetails";
+import CardRedemption from "@/pages/app/setting/CardRedemption";
+import PATList from "@/pages/app/setting/PATList";
+import PricingStandards from "@/pages/app/setting/PricingStandards";
+import RechargeHistory from "@/pages/app/setting/RechargeHistory";
+import Usage from "@/pages/app/setting/Usage";
+import UserInfo from "@/pages/app/setting/UserInfo";
+import UserInvite from "@/pages/app/setting/UserInvite";
+
+export default function useTabMatch(type: string) {
+ const { t } = useTranslation();
+
+ const User_TabMatch = [
+ {
+ key: TabKeys.UserInfo,
+ name: t("SettingPanel.UserInfo"),
+ component:
,
+ icon:
,
+ },
+ {
+ key: TabKeys.UserInvite,
+ name: t("SettingPanel.UserInvite"),
+ component:
,
+ icon:
,
+ },
+ {
+ key: TabKeys.PAT,
+ name: t("Personal Access Token"),
+ component:
,
+ icon:
,
+ },
+ ];
+
+ const Usage_TabMatch = [
+ {
+ key: TabKeys.CostOverview,
+ name: String(t("SettingPanel.CostOverview")),
+ component:
,
+ icon:
,
+ },
+ {
+ key: TabKeys.CardRedemption,
+ name: String(t("SettingPanel.CardRedemption")),
+ component:
,
+ icon:
,
+ },
+ {
+ key: TabKeys.BillingDetails,
+ name: String(t("SettingPanel.BillingDetails")),
+ component:
,
+ icon:
,
+ },
+ {
+ key: TabKeys.RechargeHistory,
+ name: String(t("SettingPanel.RechargeHistory")),
+ component:
,
+ icon:
,
+ },
+ {
+ key: TabKeys.PricingStandards,
+ name: String(t("SettingPanel.PricingStandards")),
+ component:
,
+ icon:
,
+ },
+ ];
+
+ if (type === "user") {
+ return User_TabMatch;
+ } else if (type === "usage") {
+ return Usage_TabMatch;
+ }
+}
diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
index 50d355913a..fc13ba1b57 100644
--- a/web/src/pages/app/setting/index.tsx
+++ b/web/src/pages/app/setting/index.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
import React from "react";
import {
Box,
@@ -38,28 +38,40 @@ export const TabKeys = {
const SettingModal = (props: {
headerTitle: string;
- children: React.ReactElement;
+ children?: React.ReactElement;
setApp?: TApplicationDetail;
tabMatch?: TTabItem[];
currentTab: string;
+ openModal?: boolean;
+ setOpenModal?: (open: boolean) => void;
}) => {
- const { headerTitle, children, setApp, tabMatch = [] } = props;
+ const { headerTitle, children, setApp, tabMatch = [], openModal, setOpenModal } = props;
const { isOpen, onOpen, onClose } = useDisclosure();
const currentIndex = tabMatch.findIndex((tab) => tab.key === props.currentTab);
const [item, setItem] = useState
(tabMatch[currentIndex]);
const { setCurrentApp } = useGlobalStore((state) => state);
const borderColor = useColorModeValue("lafWhite.600", "lafDark.600");
const darkMode = useColorMode().colorMode === "dark";
+
+ useEffect(() => {
+ if (!children && openModal && setOpenModal) {
+ onOpen();
+ setOpenModal(false);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [openModal]);
+
return (
<>
- {React.cloneElement(children, {
- onClick: () => {
- if (setApp) {
- setCurrentApp(setApp);
- }
- onOpen();
- },
- })}
+ {children &&
+ React.cloneElement(children, {
+ onClick: () => {
+ if (setApp) {
+ setCurrentApp(setApp);
+ }
+ onOpen();
+ },
+ })}
diff --git a/web/src/pages/home/mods/CreateAppModal/index.tsx b/web/src/pages/home/mods/CreateAppModal/index.tsx
index 18b7fb5dbe..4e4bb0c43e 100644
--- a/web/src/pages/home/mods/CreateAppModal/index.tsx
+++ b/web/src/pages/home/mods/CreateAppModal/index.tsx
@@ -52,7 +52,7 @@ const CreateAppModal = (props: {
const { application, type, isCurrentApp } = props;
- const title = type === "edit" ? t("Edit") : type === "change" ? t("Change") : t("Create");
+ const title = type === "edit" ? t("Edit") : type === "change" ? t("Change") : t("CreateApp");
const { runtimes = [], regions = [] } = useGlobalStore();
diff --git a/web/src/pages/home/mods/Empty/index.tsx b/web/src/pages/home/mods/Empty/index.tsx
index e6634726cf..428d68738f 100644
--- a/web/src/pages/home/mods/Empty/index.tsx
+++ b/web/src/pages/home/mods/Empty/index.tsx
@@ -31,12 +31,12 @@ function Empty() {
return (
-
- {t("HomePanel.Hello")} 👋 ，{" "}
- {hidePhoneNumber(userInfo?.profile?.name || userInfo?.username || "")} ，
- {t("HomePanel.Welcome")}
+
+ {t("HomePanel.Hello")} 👋 ， {hidePhoneNumber(userInfo?.username || "")} ，
+ {t("HomePanel.WelcomeTo")}
+ {t("HomePanel.LAF")}
-
{t("HomePanel.Introduction")}
+
{t("HomePanel.Introduction")}
{messageList.map((item, index) => {
return (
@@ -44,6 +44,7 @@ function Empty() {
key={index}
className={clsx("flex items-center pl-9 text-xl font-medium", styles.emptyItem, {
"bg-lafDark-300": darkMode,
+ "bg-lafWhite-100": !darkMode,
})}
>
{item}
@@ -51,7 +52,7 @@ function Empty() {
);
})}
-
{t("HomePanel.Use")}
+
{t("HomePanel.Use")}
}
>
- {t("Create")}
+ {t("CreateApp")}
diff --git a/web/src/pages/home/mods/List/index.tsx b/web/src/pages/home/mods/List/index.tsx
index 8be71c3532..922f5c2bbf 100644
--- a/web/src/pages/home/mods/List/index.tsx
+++ b/web/src/pages/home/mods/List/index.tsx
@@ -18,6 +18,7 @@ import {
} from "@chakra-ui/react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
+import ConfirmButton from "@/components/ConfirmButton";
import CopyText from "@/components/CopyText";
import FileTypeIcon from "@/components/FileTypeIcon";
import IconWrap from "@/components/IconWrap";
@@ -77,7 +78,7 @@ function List(props: { appList: TApplicationItem[] }) {
}>
- {t("Create")}
+ {t("CreateApp")}
@@ -169,51 +170,79 @@ function List(props: { appList: TApplicationItem[] }) {
-
-
- {item.phase === APP_PHASE_STATUS.Started && (
+ {item.phase === APP_STATUS.Stopped ? (
+ ) : (
+ {
+ event?.preventDefault();
+ const res = await updateAppStateMutation.mutateAsync({
+ appid: item.appid,
+ state: APP_STATUS.Restarting,
+ });
+ if (!res.error) {
+ queryClient.setQueryData(APP_LIST_QUERY_KEY, (old: any) => {
+ return {
+ ...old,
+ data: old.data.map((app: any) => {
+ if (app.appid === item.appid) {
+ return {
+ ...app,
+ phase: APP_STATUS.Restarting,
+ };
+ }
+ return app;
+ }),
+ };
+ });
+ }
+ }}
+ >
+
+
+ )}
+
+ {item.phase === APP_PHASE_STATUS.Started && (
+ {
event?.preventDefault();
const res = await updateAppStateMutation.mutateAsync({
appid: item.appid,
@@ -237,10 +266,10 @@ function List(props: { appList: TApplicationItem[] }) {
}
}}
>
-
+
-
+
+
)}