fix(web): app env & price show (#1207)

labring · Jun 1, 2023 · dc97818 · dc97818
1 parent 6a4b210
commit dc97818
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 19 deletions.
diff --git a/web/src/pages/app/database/service.ts b/web/src/pages/app/database/service.ts
@@ -46,7 +46,6 @@ export const useEntryDataQuery = (params: any, onSuccess: (data: any) => void) =
     async () => {
       if (!currentDB) return;
       const { pageSize = 10, page = 1, _id } = params;
-      debugger;
 
       const query = _id ? { _id } : {};
 

diff --git a/web/src/pages/app/setting/AppEnvList/index.tsx b/web/src/pages/app/setting/AppEnvList/index.tsx
@@ -27,21 +27,15 @@ const AppEnvList = (props: { onClose?: () => {} }) => {
   const envValue = useRef(convertToEnv(environmentQuery?.data?.data));
   return (
     <>
-      <div className="flex h-full flex-grow flex-col pb-4">
+      <div className="absolute bottom-0 left-[240px] right-6 top-0 flex h-full flex-grow flex-col pb-4">
         <div
-          className={clsx("relative h-full flex-1 rounded border", {
+          className={clsx("relative min-h-[200px] flex-1 rounded border", {
             "border-frostyNightfall-200": !(colorMode === COLOR_MODE.dark),
           })}
         >
           <ENVEditor
             value={convertToEnv(environmentQuery?.data?.data)}
-            height="95%"
-            style={{
-              position: "absolute",
-              top: 0,
-              width: "calc(100% - 15px)",
-              bottom: 0,
-            }}
+            height="98%"
             colorMode={colorMode}
             onChange={(value) => {
               envValue.current = value;

diff --git a/web/src/pages/app/setting/AppInfoList/index.tsx b/web/src/pages/app/setting/AppInfoList/index.tsx
@@ -29,7 +29,7 @@ const AppEnvList = () => {
   return (
     <>
       <div className="flex h-full flex-col">
-        <div className="flex h-[50px] flex-none justify-between">
+        <div className="flex flex-none justify-between">
           <HStack spacing={2}>
             <Box
               className={clsx("text-xl font-medium", {

diff --git a/web/src/pages/app/setting/Usage/index.tsx b/web/src/pages/app/setting/Usage/index.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import ChargeButton from "@/components/ChargeButton";
 import Pagination from "@/components/Pagination";
-import { formatDate } from "@/utils/format";
+import { formatDate, formatPrice } from "@/utils/format";
 import getPageInfo from "@/utils/getPageInfo";
 
 import { BillingControllerFindAll } from "@/apis/v1/billings";
@@ -34,7 +34,7 @@ export default function Usage() {
       <h1 className="mb-4 text-2xl font-bold">Usage</h1>
       <HStack className="mt-4">
         <span className=" text-grayModern-500">{t("Balance")}:</span>
-        <span>{(accountRes?.data?.balance ?? 0) / 100}</span>
+        <span>{formatPrice(accountRes?.data?.balance)}</span>
         <ChargeButton>
           <span className="cursor-pointer text-blue-800">{t("ChargeNow")}</span>
         </ChargeButton>

diff --git a/web/src/pages/app/setting/UserInfo/index.tsx b/web/src/pages/app/setting/UserInfo/index.tsx
@@ -3,7 +3,7 @@ import { Avatar, Box, HStack } from "@chakra-ui/react";
 import { t } from "i18next";
 
 import ChargeButton from "@/components/ChargeButton";
-import { formatDate, hidePhoneNumber } from "@/utils/format";
+import { formatDate, formatPrice, hidePhoneNumber } from "@/utils/format";
 
 import AuthDetail from "./AuthDetail";
 
@@ -54,7 +54,7 @@ export default function UserInfo() {
 
             <HStack className="mt-4">
               <span className=" text-grayModern-500">{t("Balance")}:</span>
-              <span>{accountRes?.data?.balance}</span>
+              <span>{formatPrice(accountRes?.data?.balance)}</span>
               <ChargeButton>
                 <span className="cursor-pointer text-blue-800">{t("ChargeNow")}</span>
               </ChargeButton>

diff --git a/web/src/pages/app/setting/index.tsx b/web/src/pages/app/setting/index.tsx
@@ -58,9 +58,9 @@ const SettingModal = (props: {
         <ModalContent maxW={"80%"} width={"auto"} minW={"1000px"}>
           <ModalHeader>{headerTitle || t("SettingPanel.Setting")}</ModalHeader>
           <ModalCloseButton />
-          <ModalBody py={2} flex="none">
+          <ModalBody py={2} flex="none" minH="60vh" className="relative">
             <Box className="flex h-full" borderColor={borderColor}>
-              <SectionList className="mr-4 min-w-[200px] border-r pr-4">
+              <SectionList className="absolute bottom-0 top-0 mr-4 min-w-[200px] border-r pr-4">
                 {tabMatch.map((tab) => {
                   return (
                     <SectionList.Item
@@ -76,7 +76,7 @@ const SettingModal = (props: {
                   );
                 })}
               </SectionList>
-              <div className="w-full p-2">
+              <div className="ml-[210px] w-full overflow-hidden p-2">
                 {React.cloneElement(item?.component || <></>, {
                   onClose,
                 })}

diff --git a/web/src/utils/format.ts b/web/src/utils/format.ts
@@ -82,7 +82,7 @@ export function formatPort(port: number | undefined) {
 }
 
 export function formatPrice(price?: number) {
-  return price ? "¥" + (price / 100).toFixed(2) : "-";
+  return price ? (price / 100).toFixed(2) : "-";
 }
 
 export function convertMoney(money: number) {