Skip to content

Commit

Permalink
feat(web): add user billing page (#1195)
Browse files Browse the repository at this point in the history
LeezQ authored May 31, 2023
1 parent ac49ded commit 2fed138
Showing 19 changed files with 364 additions and 218 deletions.
16 changes: 12 additions & 4 deletions web/public/locales/en/translation.json
Original file line number Diff line number Diff line change
@@ -175,11 +175,15 @@
"Tel": "Mobile",
"TelTip": "Please enter a valid Mobile phone number",
"ToAuth": "Authenticate Now",
"UserInfo": "User Information",
"UserInfo": "UserInfo",
"noAuth": "Not Authenticated",
"showAuth": "Go to Auth",
"ShutDown": "ShutDown",
"Subscription": "Subscription Info"
"Subscription": "Subscription Info",
"Usage": "Usage",
"Avatar": "Avatar",
"UserName": "UserName",
"Email": "Email"
},
"StoragePanel": {
"All": "Total Capacity",
@@ -431,5 +435,9 @@
"ServerStatus": "STATUS",
"Fee": "Fee",
"PleaseCloseApplicationFirst": "Please close your application first.",
"custom": "Custom"
}
"custom": "Custom",
"CostTime": "CostTime",
"Duration": "Duration",
"State": "State",
"TotalAmount": "Total"
}
13 changes: 10 additions & 3 deletions web/public/locales/zh-CN/translation.json
Original file line number Diff line number Diff line change
@@ -179,7 +179,11 @@
"TelTip": "请输入有效的手机号码",
"Registered": "注册时间",
"ShutDown": "关闭应用",
"Subscription": "订阅信息"
"Subscription": "订阅信息",
"Usage": "费用中心",
"Avatar": "头像",
"UserName": "用户名",
"Email": "邮箱"
},
"StoragePanel": {
"All": "总容量",
@@ -431,5 +435,8 @@
"ServerStatus": "服务状态",
"Fee": "费用",
"PleaseCloseApplicationFirst": "请先关闭应用",
"custom": "自定义"
}
"custom": "自定义",
"CostTime": "扣费时间",
"Duration": "计费周期",
"TotalAmount": "总费用"
}
14 changes: 11 additions & 3 deletions web/public/locales/zh/translation.json
Original file line number Diff line number Diff line change
@@ -179,7 +179,11 @@
"TelTip": "请输入有效的手机号码",
"Registered": "注册时间",
"ShutDown": "关闭应用",
"Subscription": "订阅信息"
"Subscription": "订阅信息",
"Usage": "费用中心",
"Avatar": "头像",
"UserName": "用户名",
"Email": "邮箱"
},
"StoragePanel": {
"All": "总容量",
@@ -431,5 +435,9 @@
"ServerStatus": "服务状态",
"Fee": "费用",
"PleaseCloseApplicationFirst": "请先关闭应用",
"custom": "自定义"
}
"custom": "自定义",
"CostTime": "扣费时间",
"Duration": "计费周期",
"State": "状态",
"TotalAmount": "总费用"
}
15 changes: 2 additions & 13 deletions web/src/apis/v1/api-auto.d.ts
Original file line number Diff line number Diff line change
@@ -24,7 +24,6 @@ declare namespace Definitions {
memory?: number;
databaseCapacity?: number;
storageCapacity?: number;
isTrialTier?: boolean;
name?: string;
state?: string;
regionId?: string;
@@ -77,7 +76,6 @@ declare namespace Definitions {
memory?: number;
databaseCapacity?: number;
storageCapacity?: number;
isTrialTier?: boolean;
};

export type ApplicationBundle = {
@@ -300,12 +298,11 @@ declare namespace Definitions {
};

export type CalculatePriceDto = {
regionId?: string;
cpu?: number;
memory?: number;
databaseCapacity?: number;
storageCapacity?: number;
isTrialTier?: boolean;
regionId?: string;
};

export type CalculatePriceResultDto = {
@@ -984,15 +981,7 @@ declare namespace Paths {
export type Responses = any;
}

namespace BillingControllerFindAllByAppId {
export type QueryParameters = any;

export type BodyParameters = any;

export type Responses = any;
}

namespace BillingControllerFindOne {
namespace BillingControllerFindAll {
export type QueryParameters = any;

export type BodyParameters = any;
40 changes: 0 additions & 40 deletions web/src/apis/v1/apps.ts
Original file line number Diff line number Diff line change
@@ -841,43 +841,3 @@ export async function DependencyControllerRemove(params: Definitions.DeleteDepen
data: params,
});
}

/**
* Get billings of an application
*/
export async function BillingControllerFindAllByAppId(
params: Paths.BillingControllerFindAllByAppId.BodyParameters,
): Promise<{
error: string;
data: Paths.BillingControllerFindAllByAppId.Responses;
}> {
// /v1/apps/{appid}/billings
let _params: { [key: string]: any } = {
appid: useGlobalStore.getState().currentApp?.appid || "",
...params,
};
return request(`/v1/apps/${_params.appid}/billings`, {
method: "GET",
params: params,
});
}

/**
* Get billing by id
*/
export async function BillingControllerFindOne(
params: Paths.BillingControllerFindOne.BodyParameters,
): Promise<{
error: string;
data: Definitions.ApplicationBilling;
}> {
// /v1/apps/{appid}/billings/{id}
let _params: { [key: string]: any } = {
appid: useGlobalStore.getState().currentApp?.appid || "",
...params,
};
return request(`/v1/apps/${_params.appid}/billings/${_params.id}`, {
method: "GET",
params: params,
});
}
31 changes: 31 additions & 0 deletions web/src/apis/v1/billings.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
// @ts-ignore
/* eslint-disable */
///////////////////////////////////////////////////////////////////////
// //
// this file is autogenerated by service-generate //
// do not edit this file manually //
// //
///////////////////////////////////////////////////////////////////////
/// <reference path = "api-auto.d.ts" />
import request from "@/utils/request";
import useGlobalStore from "@/pages/globalStore";

/**
* Get billings of an application
*/
export async function BillingControllerFindAll(
params: Paths.BillingControllerFindAll.BodyParameters,
): Promise<{
error: string;
data: Paths.BillingControllerFindAll.Responses;
}> {
// /v1/billings
let _params: { [key: string]: any } = {
appid: useGlobalStore.getState().currentApp?.appid || "",
...params,
};
return request(`/v1/billings`, {
method: "GET",
params: params,
});
}
56 changes: 25 additions & 31 deletions web/src/components/EditableTable/NormalTr/index.tsx
Original file line number Diff line number Diff line change
@@ -26,40 +26,34 @@ const NormalTr = function (props: {
</Td>
);
})}
<Td maxWidth="150px" className="flex">
<>
{configuration?.operationButtonsRender
? configuration.operationButtonsRender(data)
: null}
{!configuration?.hiddenEditButton ? (
<IconWrap
className="mr-2"
tooltip={
configuration?.editButtonText ? configuration.editButtonText : t("Edit").toString()
}
size={20}
>
<EditIcon fontSize={15} onClick={() => onEdit(data[configuration.key])} />
</IconWrap>
) : null}
<ConfirmButton
onSuccessAction={() => onDelete(data[configuration.key])}
headerText={
<Td className="mr-2 flex items-end justify-end">
{configuration?.operationButtonsRender ? configuration.operationButtonsRender(data) : null}
{!configuration?.hiddenEditButton ? (
<IconWrap
className="mr-2"
tooltip={
configuration?.editButtonText ? configuration.editButtonText : t("Edit").toString()
}
size={20}
>
<EditIcon fontSize={15} onClick={() => onEdit(data[configuration.key])} />
</IconWrap>
) : null}
<ConfirmButton
onSuccessAction={() => onDelete(data[configuration.key])}
headerText={
configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
}
bodyText={t("DeleteConfirm")}
>
<IconWrap
tooltip={
configuration?.deleteButtonText ? configuration.deleteButtonText : String(t("Delete"))
}
bodyText={t("DeleteConfirm")}
>
<IconWrap
tooltip={
configuration?.deleteButtonText
? configuration.deleteButtonText
: String(t("Delete"))
}
>
<DeleteIcon fontSize={15} />
</IconWrap>
</ConfirmButton>
</>
<DeleteIcon fontSize={15} />
</IconWrap>
</ConfirmButton>
</Td>
</>
);
4 changes: 3 additions & 1 deletion web/src/components/EditableTable/index.tsx
Original file line number Diff line number Diff line change
@@ -98,7 +98,9 @@ const EditableTable = function (props: {
{columnList.map((item: TColumnItem) => {
return <Th key={item.key}>{item.name}</Th>;
})}
<Th key="operation">{t("Operation")}</Th>
<Th key="operation" isNumeric>
{t("Operation")}
</Th>
</Tr>
</Thead>
<Tbody className="font-mono">
153 changes: 81 additions & 72 deletions web/src/components/Pagination/index.tsx
Original file line number Diff line number Diff line change
@@ -6,6 +6,7 @@ import IconWrap from "../IconWrap";

export type PageValues = {
page?: number;
pageSize?: number;
limit?: number;
total?: number;
};
@@ -16,8 +17,8 @@ export default function Pagination(props: {
onChange: (values: PageValues) => void;
}) {
const { values, onChange, options } = props;
const { page, total, limit } = values;
const maxPage = total && limit ? Math.ceil(total / limit) : -1;
const { page, total, pageSize } = values;
const maxPage = total && pageSize ? Math.ceil(total / pageSize) : -1;

if (maxPage > 0 && page && page > maxPage) {
onChange({
@@ -32,81 +33,89 @@ export default function Pagination(props: {
}

return (
<HStack alignItems="center" spacing={"1"} display="flex" whiteSpace={"nowrap"}>
<Text as="div" className="mr-2">
{t("Total")}: {total}
</Text>
<IconWrap showBg tooltip="First Page" size={18}>
<Button
variant="link"
onClick={() => {
onChange({
...values,
page: 1,
});
}}
isDisabled={page === 1 || maxPage === -1}
>
<ArrowLeftIcon fontSize={"8px"} />
</Button>
</IconWrap>
<IconWrap showBg tooltip="Previous Page" size={18}>
<Button
variant="link"
onClick={() =>
onChange({
...values,
page: page! - 1,
})
}
isDisabled={page === 1 || maxPage === -1}
>
<ChevronLeftIcon fontSize={"16px"} />
</Button>
</IconWrap>
<Text fontWeight="bold" as="p" minWidth={"36px"} px="8px" textAlign={"center"}>
{page}
</Text>
<Text>/</Text>
<Text fontWeight="bold" as="p" minWidth={"36px"} px="8px" textAlign={"center"}>
{maxPage < 0 ? "-" : maxPage}
</Text>
<IconWrap showBg tooltip="Next Page" size={18}>
<Button
variant="link"
isDisabled={maxPage === page || maxPage === -1}
onClick={() => {
onChange({
...values,
page: page! + 1,
});
}}
>
<ChevronRightIcon fontSize={"16px"} />
</Button>
</IconWrap>
<IconWrap showBg tooltip="Last Page" size={18}>
<Button
variant="link"
onClick={() => {
onChange({
...values,
page: maxPage,
});
}}
isDisabled={maxPage === page || maxPage === -1}
>
<ArrowRightIcon fontSize={"8px"} />
</Button>
</IconWrap>
<HStack
alignItems="center"
spacing={"1"}
display="flex"
whiteSpace={"nowrap"}
justifyContent={"space-between"}
>
<HStack spacing={"1"}>
<Text as="div" className="mr-2">
{t("Total")}: {total}
</Text>
<IconWrap showBg tooltip="First Page" size={18}>
<Button
variant="link"
onClick={() => {
onChange({
...values,
page: 1,
});
}}
isDisabled={page === 1 || maxPage === -1}
>
<ArrowLeftIcon fontSize={"8px"} />
</Button>
</IconWrap>
<IconWrap showBg tooltip="Previous Page" size={18}>
<Button
variant="link"
onClick={() =>
onChange({
...values,
page: page! - 1,
})
}
isDisabled={page === 1 || maxPage === -1}
>
<ChevronLeftIcon fontSize={"16px"} />
</Button>
</IconWrap>
<Text fontWeight="bold" as="p" minWidth={"36px"} px="8px" textAlign={"center"}>
{page}
</Text>
<Text>/</Text>
<Text fontWeight="bold" as="p" minWidth={"36px"} px="8px" textAlign={"center"}>
{maxPage < 0 ? "-" : maxPage}
</Text>
<IconWrap showBg tooltip="Next Page" size={18}>
<Button
variant="link"
isDisabled={maxPage === page || maxPage === -1}
onClick={() => {
onChange({
...values,
page: page! + 1,
});
}}
>
<ChevronRightIcon fontSize={"16px"} />
</Button>
</IconWrap>
<IconWrap showBg tooltip="Last Page" size={18}>
<Button
variant="link"
onClick={() => {
onChange({
...values,
page: maxPage,
});
}}
isDisabled={maxPage === page || maxPage === -1}
>
<ArrowRightIcon fontSize={"8px"} />
</Button>
</IconWrap>
</HStack>
<Select
size="sm"
style={{ borderWidth: 0 }}
value={limit}
w="120px"
value={pageSize}
onChange={(e: any) => {
onChange({
...values,
limit: parseInt(e.target.value),
pageSize: parseInt(e.target.value),
page: 1,
});
}}
34 changes: 32 additions & 2 deletions web/src/layouts/Header/UserSetting/index.tsx
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import i18n from "@/utils/i18n";

import SettingModal, { TabKeys } from "@/pages/app/setting";
import PATList from "@/pages/app/setting/PATList";
import Usage from "@/pages/app/setting/Usage";
import UserInfo from "@/pages/app/setting/UserInfo";
export default function UserSetting(props: { name: string; avatar?: string; width: string }) {
const { t } = useTranslation();
@@ -26,12 +27,17 @@ export default function UserSetting(props: { name: string; avatar?: string; widt
<SettingModal
tabMatch={[
{
key: "user-info",
key: TabKeys.UserInfo,
name: String(t("SettingPanel.UserInfo")),
component: <UserInfo />,
},
{
key: "pat",
key: TabKeys.Usage,
name: String(t("SettingPanel.Usage")),
component: <Usage />,
},
{
key: TabKeys.PAT,
name: t("Personal Access Token"),
component: <PATList />,
},
@@ -42,6 +48,30 @@ export default function UserSetting(props: { name: string; avatar?: string; widt
<MenuItem minH="40px">{t("SettingPanel.UserSetting")}</MenuItem>
</SettingModal>

<SettingModal
tabMatch={[
{
key: TabKeys.UserInfo,
name: String(t("SettingPanel.UserInfo")),
component: <UserInfo />,
},
{
key: TabKeys.Usage,
name: String(t("SettingPanel.Usage")),
component: <Usage />,
},
{
key: TabKeys.PAT,
name: t("Personal Access Token"),
component: <PATList />,
},
]}
headerTitle={t("SettingPanel.UserSetting")}
currentTab={TabKeys.Usage}
>
<MenuItem minH="40px">{t("SettingPanel.Usage")}</MenuItem>
</SettingModal>

<MenuItem
minH="40px"
onClick={() => {
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@ export default function DataPanel() {
type QueryData = {
_id: string;
page: number;
limit?: number;
pageSize?: number;
total?: number;
};

@@ -74,9 +74,9 @@ export default function DataPanel() {

useEffect(() => {
if (entryDataQuery.isFetched && isAdd.status) {
const { total, page, limit } = getPageInfo(entryDataQuery.data);
const { total, page, pageSize } = getPageInfo(entryDataQuery.data);
const newTotal = (total || 0) + isAdd.count;
const maxPage = limit ? Math.ceil(newTotal / limit) : -1;
const maxPage = pageSize ? Math.ceil(newTotal / pageSize) : -1;
// Calculate and jump to the maxPage after adding
if (maxPage > 0 && page !== maxPage) {
setQueryData((pre: any) => {
9 changes: 5 additions & 4 deletions web/src/pages/app/database/service.ts
Original file line number Diff line number Diff line change
@@ -45,22 +45,23 @@ export const useEntryDataQuery = (params: any, onSuccess: (data: any) => void) =
[queryKeys.useEntryDataQuery(currentDB?.name || ""), params],
async () => {
if (!currentDB) return;
const { limit = 10, page = 1, _id } = params;
const { pageSize = 10, page = 1, _id } = params;
debugger;

const query = _id ? { _id } : {};

// 执行数据查询
const res = await db
.collection(currentDB?.name)
.where(query)
.limit(limit)
.skip((page - 1) * limit)
.limit(pageSize)
.skip((page - 1) * pageSize)
.get();

// 获取数据总数
const { total } = await db.collection(currentDB?.name).where(query).count();
onSuccess && onSuccess(res);
return { list: res.data, total, page, limit };
return { list: res.data, total, page, pageSize: pageSize };
},
{
enabled: !!currentDB,
4 changes: 2 additions & 2 deletions web/src/pages/app/logs/index.tsx
Original file line number Diff line number Diff line change
@@ -42,14 +42,14 @@ const LIMIT_OPTIONS = [100, 150, 200];

const DEFAULT_PAGE_INFO = {
page: 1,
limit: 100,
pageSize: 100,
};

export default function LogsPage() {
type FormData = {
requestId: string;
functionName: string;
limit: number;
pageSize: number;
page: number;
};

90 changes: 90 additions & 0 deletions web/src/pages/app/setting/Usage/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { HStack, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
import { useQuery } from "@tanstack/react-query";

import ChargeButton from "@/components/ChargeButton";
import Pagination from "@/components/Pagination";
import { formatDate } from "@/utils/format";
import getPageInfo from "@/utils/getPageInfo";

import { BillingControllerFindAll } from "@/apis/v1/billings";
import { useAccountQuery } from "@/pages/home/service";

const LIMIT_OPTIONS = [20, 100, 200];
const DEFAULT_PAGE_INFO = {
page: 1,
pageSize: 20,
};

export default function Usage() {
const { data: accountRes } = useAccountQuery();

const [queryData, setQueryData] = useState(DEFAULT_PAGE_INFO);

const { data: billingRes } = useQuery(["billing", queryData], async () => {
return BillingControllerFindAll({
...queryData,
});
});

const { t } = useTranslation();
return (
<div className="min-h-[500px]">
<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}</span>
<ChargeButton>
<span className="cursor-pointer text-blue-800">{t("ChargeNow")}</span>
</ChargeButton>
</HStack>

<div className="mt-4 rounded border">
<TableContainer>
<Table variant="striped" colorScheme="gray" size={"sm"}>
<Thead>
<Tr>
<Th>AppId</Th>
<Th>{t("SpecItem.cpu")}</Th>
<Th>{t("SpecItem.memory")}</Th>
<Th>{t("Spec.Database")}</Th>
<Th>{t("Spec.Storage")}</Th>
<Th>{t("TotalAmount")}</Th>
<Th>{t("State")}</Th>
<Th>{t("Duration")}</Th>
</Tr>
</Thead>
<Tbody>
{(billingRes?.data?.list || []).map((item: Definitions.ApplicationBilling) => (
<Tr key={item._id}>
<Td>{item.appid}</Td>
<Td>{item.detail?.cpu?.amount}</Td>
<Td>{item.detail?.memory?.amount}</Td>
<Td>{item.detail?.databaseCapacity?.amount}</Td>
<Td>{item.detail?.storageCapacity?.amount}</Td>
<Td>{item.amount}</Td>
<Td>{item.state}</Td>
<Td>
{formatDate(item.startAt)} - {formatDate(item.endAt)}
</Td>
</Tr>
))}
</Tbody>
</Table>
<div className="p-4">
<Pagination
options={LIMIT_OPTIONS}
values={getPageInfo(billingRes?.data)}
onChange={(values: any) => {
setQueryData({
...values,
});
}}
/>
</div>
</TableContainer>
</div>
</div>
);
}
76 changes: 46 additions & 30 deletions web/src/pages/app/setting/UserInfo/index.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import { useState } from "react";
import { Avatar, Box, HStack, useColorMode } from "@chakra-ui/react";
import clsx from "clsx";
import { Avatar, Box, HStack } from "@chakra-ui/react";
import { t } from "i18next";

import { COLOR_MODE } from "@/constants";
import ChargeButton from "@/components/ChargeButton";
import { formatDate, hidePhoneNumber } from "@/utils/format";

import AuthDetail from "./AuthDetail";

import useGlobalStore from "@/pages/globalStore";
import { useAccountQuery } from "@/pages/home/service";
export default function UserInfo() {
const [showAuth, setShowAuth] = useState(false);

const { userInfo } = useGlobalStore((state) => state);
const { colorMode } = useColorMode();
const darkMode = colorMode === COLOR_MODE.dark;
const { data: accountRes } = useAccountQuery();

return (
<div className="flex h-full flex-col items-center justify-center">
<div className="flex min-h-[400px] flex-col">
{showAuth ? (
<AuthDetail
onBack={() => {
@@ -26,23 +25,9 @@ export default function UserInfo() {
/>
) : (
<>
<Box className="relative text-center">
<Avatar
size="lg"
name={userInfo?.username}
src={userInfo?.profile?.avatar}
bgColor="primary.500"
color="white"
boxShadow="base"
/>
<p
className={clsx("mb-2 text-center text-3xl font-medium", {
"text-grayModern-900": !darkMode,
})}
>
{userInfo?.username}
</p>
{/* <span className="inline-block px-2 h-[24px] rounded-full border border-grayModern-400 text-grayModern-400 pt-[1px]">
<h1 className="mb-4 text-2xl font-bold">{t("SettingPanel.UserInfo")}</h1>
{/* <div className="relative flex items-center">
<span className="inline-block px-2 h-[24px] rounded-full border border-grayModern-400 text-grayModern-400 pt-[1px]">
{t("SettingPanel.noAuth")}
</span>
<span
@@ -52,15 +37,46 @@ export default function UserInfo() {
}}
>
{t("SettingPanel.showAuth")}
</span> */}
</Box>
<Box className="mb-20 mt-8 text-lg">
<HStack spacing={8}>
<span className="w-[80px] text-grayModern-500">{t("SettingPanel.Tel")}:</span>
</span>
</div> */}
<Box className="text-lg">
<HStack>
<span className=" text-grayModern-500">{t("SettingPanel.Avatar")}:</span>
<Avatar
size={"xs"}
name={userInfo?.username}
src={userInfo?.profile?.avatar}
bgColor="primary.500"
color="white"
boxShadow="base"
/>
</HStack>

<HStack className="mt-4">
<span className=" text-grayModern-500">{t("Balance")}:</span>
<span>{accountRes?.data?.balance}</span>
<ChargeButton>
<span className="cursor-pointer text-blue-800">{t("ChargeNow")}</span>
</ChargeButton>
</HStack>

<HStack className="mt-4">
<span className=" text-grayModern-500">{t("SettingPanel.UserName")}:</span>
<span>{userInfo?.username}</span>
</HStack>

<HStack className="mt-4">
<span className=" text-grayModern-500">{t("SettingPanel.Email")}:</span>
<span>{userInfo?.email ? userInfo?.email : "-"}</span>
</HStack>

<HStack className="mt-4">
<span className=" text-grayModern-500">{t("SettingPanel.Tel")}:</span>
<span>{userInfo?.phone ? hidePhoneNumber(userInfo.phone) : t("NoInfo")}</span>
</HStack>
<HStack spacing={8} className="mt-2">
<span className="w-[80px] text-grayModern-500">{t("SettingPanel.Registered")}:</span>

<HStack className="mt-4">
<span className=" text-grayModern-500">{t("SettingPanel.Registered")}:</span>
<span>{formatDate(userInfo?.createdAt)}</span>
</HStack>
</Box>
11 changes: 6 additions & 5 deletions web/src/pages/app/setting/index.tsx
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ export type TTabItem = {
};

export const TabKeys = {
Usage: "usage",
UserInfo: "user-info",
PAT: "pat",
};
@@ -52,14 +53,14 @@ const SettingModal = (props: {
},
})}

<Modal isOpen={isOpen} onClose={onClose} size="4xl" closeOnOverlayClick={false}>
<Modal isOpen={isOpen} onClose={onClose} closeOnOverlayClick={false}>
<ModalOverlay />
<ModalContent>
<ModalContent maxW={"80%"} width={"auto"} minW={"1000px"}>
<ModalHeader>{headerTitle || t("SettingPanel.Setting")}</ModalHeader>
<ModalCloseButton />
<ModalBody px={6} py={2} h="60vh" maxH="70vh" flex="none">
<ModalBody py={2} flex="none">
<Box className="flex h-full" borderColor={borderColor}>
<SectionList className="mr-4 w-[250px] border-r pr-4">
<SectionList className="mr-4 min-w-[200px] border-r pr-4">
{tabMatch.map((tab) => {
return (
<SectionList.Item
@@ -75,7 +76,7 @@ const SettingModal = (props: {
);
})}
</SectionList>
<div className="w-full">
<div className="w-full p-2">
{React.cloneElement(item?.component || <></>, {
onClose,
})}
2 changes: 1 addition & 1 deletion web/src/pages/home/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";

import { APP_PHASE_STATUS } from "../../constants";
import { APP_PHASE_STATUS } from "@/constants";

import Empty from "./mods/Empty";
import List from "./mods/List";
3 changes: 1 addition & 2 deletions web/src/pages/home/mods/List/index.tsx
Original file line number Diff line number Diff line change
@@ -21,8 +21,7 @@ import { useMutation } from "@tanstack/react-query";
import CopyText from "@/components/CopyText";
import FileTypeIcon from "@/components/FileTypeIcon";
import IconWrap from "@/components/IconWrap";
import { APP_STATUS, Pages } from "@/constants";
import { APP_PHASE_STATUS } from "@/constants/index";
import { APP_PHASE_STATUS, APP_STATUS, Pages } from "@/constants";
import { formatDate } from "@/utils/format";
import getRegionById from "@/utils/getRegionById";

5 changes: 3 additions & 2 deletions web/src/utils/getPageInfo.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { PageValues } from "@/components/Pagination";

export default function getPageInfo(data?: {
limit: number;
pageSize: number;
page: number;
total: number;
[key: string]: any;
}): PageValues {
return {
limit: data?.limit,
pageSize: data?.pageSize,
limit: data?.pageSize,
page: data?.page,
total: data?.total,
};

0 comments on commit 2fed138

Please sign in to comment.