fix(web): delete repeated component & fix usersetting & fix billing u…

…nit (#1378) * refactor(web): delete repeated component paginationbar * fix(web): fix sidebar usersetting display * fix(web): fix billing unit * fix(web): sidebar usersetting name * feat(web): add function template usedby avatar * fix(web): add formatOriginalPrice function and fix the wording
labring · Jul 10, 2023 · f6a8f56 · f6a8f56
1 parent b9fb98b
commit f6a8f56
Show file tree

Hide file tree

Showing 19 changed files with 194 additions and 211 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -182,7 +182,6 @@
     "UserInfo": "UserInfo",
     "noAuth": "Not Authenticated",
     "showAuth": "Go to Auth",
-    "ShutDown": "ShutDown",
     "Subscription": "Subscription Info",
     "Usage": "Usage",
     "Avatar": "Avatar",
@@ -201,7 +200,8 @@
     "Domain": "Custom Domain",
     "MyAccount": "My Account",
     "CostTrend": "Cost Trend",
-    "Balance": "Balance"
+    "Balance": "Balance",
+    "Pause": "Pause"
   },
   "StoragePanel": {
     "All": "Total Capacity",
@@ -394,7 +394,8 @@
       "start": "Start Now",
       "stars": "3.9K",
       "funcTemplate": "Function market",
-      "appMarket": "Application Market"
+      "appMarket": "Application Market",
+      "community": "Community"
     },
     "HomePage": {
       "slogan": "Write Code as effortlessly as Blogging",
@@ -552,9 +553,8 @@
   },
   "Reset": "Reset",
   "SettingModal": {
-    "Exchange": "Exange"
+    "Exchange": "Exchange"
   },
-  "MyIncomeandExpenses": "My Income and Expenses",
   "Expenses": "Expenses",
   "OrderNumber": "Order Number",
   "Bonus amount": "Bonus amount",
@@ -567,4 +567,4 @@
   "Core": "Core",
   "No History": "No History",
   "MyIncomeAndExpenses": "My Income And Expenses"
-}
+}
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -182,7 +182,6 @@
     "CodeTip": "请输入四位数字验证码",
     "TelTip": "请输入有效的手机号码",
     "Registered": "注册时间",
-    "ShutDown": "关闭应用",
     "Subscription": "订阅信息",
     "Usage": "费用中心",
     "Avatar": "头像",
@@ -201,7 +200,8 @@
     "Domain": "域名设置",
     "MyAccount": "我的账户",
     "CostTrend": "成本趋势",
-    "Balance": "余额"
+    "Balance": "余额",
+    "Pause": "暂停应用"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -394,7 +394,8 @@
       "start": "立即开发",
       "stars": "3.9K",
       "funcTemplate": "函数市场",
-      "appMarket": "应用市场"
+      "appMarket": "应用市场",
+      "community": "用户群"
     },
     "HomePage": {
       "slogan": "像写博客一样写代码",
@@ -548,13 +549,12 @@
     "Bonus": "奖励",
     "Channel": "用户名",
     "Time": "时间",
-    "InviteTips": "复制推广链接，发送给其他人。当他们点击此链接注册后，将成为你的被邀请人，并且你可立刻获得佣金。"
+    "InviteTips": "将推广链接复制并发送给其他人。当他们通过该链接注册并成为你的邀请对象后，你将立即获得奖励金额。"
   },
   "Reset": "重置",
   "SettingModal": {
     "Exchange": "兑换"
   },
-  "MyIncomeandExpenses": "我的收支",
   "Expenses": "支出",
   "OrderNumber": "订单号",
   "Bonus amount": "赠送金额",
@@ -567,4 +567,4 @@
   "Core": "核",
   "No History": "暂无记录",
   "MyIncomeAndExpenses": "我的收支"
-}
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -182,7 +182,6 @@
     "CodeTip": "请输入四位数字验证码",
     "TelTip": "请输入有效的手机号码",
     "Registered": "注册时间",
-    "ShutDown": "关闭应用",
     "Subscription": "订阅信息",
     "Usage": "费用中心",
     "Avatar": "头像",
@@ -201,7 +200,8 @@
     "Domain": "域名设置",
     "MyAccount": "我的账户",
     "CostTrend": "成本趋势",
-    "Balance": "余额"
+    "Balance": "余额",
+    "Pause": "暂停应用"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -394,7 +394,8 @@
       "start": "立即开发",
       "stars": "3.9K",
       "funcTemplate": "函数市场",
-      "appMarket": "应用市场"
+      "appMarket": "应用市场",
+      "community": "用户群"
     },
     "HomePage": {
       "slogan": "像写博客一样写代码",
@@ -548,13 +549,13 @@
     "Bonus": "奖励",
     "Channel": "用户名",
     "Time": "时间",
-    "InviteTips": "复制推广链接，发送给其他人。当他们点击此链接注册后，将成为你的被邀请人，并且你可立刻获得佣金。"
+    "InviteTips": "将推广链接复制并发送给其他人。当他们通过该链接注册并成为你的邀请对象后，你将立即获得奖励金额。"
   },
   "Reset": "重置",
   "SettingModal": {
     "Exchange": "兑换"
   },
-  "MyIncomeandExpenses": "我的收支",
+  "MyIncomeAndExpenses": "我的收支",
   "Expenses": "支出",
   "OrderNumber": "订单号",
   "Bonus amount": "赠送金额",
@@ -565,6 +566,5 @@
   "Year": "年",
   "Hour": "小时",
   "Core": "核",
-  "No History": "暂无记录",
-  "MyIncomeAndExpenses": "我的收支"
-}
+  "No History": "暂无记录"
+}
diff --git a/web/src/apis/typing.d.ts b/web/src/apis/typing.d.ts
@@ -301,6 +301,8 @@ export type TFunctionTemplate = {
 export type TemplateList = {
   list: TFunctionTemplate[];
   total: number;
+  page: number;
+  pageSize: number;
 };
 
 export type TLogItem = {

diff --git a/web/src/components/CommonIcon/index.tsx b/web/src/components/CommonIcon/index.tsx
@@ -296,3 +296,9 @@ export const ExitIcon = createIcon({
   viewBox: "0 0 20 20",
   d: "M16.9238 14.3413H15.5891C15.4979 14.3413 15.4125 14.3811 15.3555 14.4514C15.2226 14.6128 15.0802 14.7685 14.9302 14.9166C14.3168 15.5306 13.5901 16.02 12.7905 16.3576C11.962 16.7076 11.0715 16.8871 10.1722 16.8855C9.26276 16.8855 8.38179 16.707 7.55398 16.3576C6.75432 16.02 6.02766 15.5306 5.4142 14.9166C4.79963 14.3045 4.30959 13.5792 3.97122 12.7806C3.61997 11.9528 3.4434 11.0737 3.4434 10.1642C3.4434 9.25478 3.62187 8.3757 3.97122 7.54789C4.30918 6.74856 4.79524 6.02897 5.4142 5.41191C6.03316 4.79484 6.75275 4.30879 7.55398 3.97083C8.38179 3.62148 9.26276 3.443 10.1722 3.443C11.0817 3.443 11.9626 3.61958 12.7905 3.97083C13.5917 4.30879 14.3113 4.79484 14.9302 5.41191C15.0802 5.5619 15.2207 5.71759 15.3555 5.87708C15.4125 5.94733 15.4998 5.9872 15.5891 5.9872H16.9238C17.0434 5.9872 17.1175 5.85429 17.051 5.75366C15.5948 3.49047 13.0468 1.99243 10.1513 2.00003C5.60216 2.01142 1.95485 5.7043 2.00042 10.2478C2.04599 14.7191 5.6876 18.3284 10.1722 18.3284C13.0601 18.3284 15.5967 16.8323 17.051 14.5748C17.1156 14.4742 17.0434 14.3413 16.9238 14.3413ZM18.6117 10.0446L15.9175 7.91813C15.8169 7.83838 15.6707 7.91053 15.6707 8.03774V9.48072H9.70895C9.62541 9.48072 9.55705 9.54907 9.55705 9.63261V10.6959C9.55705 10.7794 9.62541 10.8477 9.70895 10.8477H15.6707V12.2907C15.6707 12.4179 15.8188 12.4901 15.9175 12.4103L18.6117 10.2838C18.6299 10.2696 18.6446 10.2515 18.6547 10.2308C18.6648 10.21 18.67 10.1873 18.67 10.1642C18.67 10.1412 18.6648 10.1184 18.6547 10.0977C18.6446 10.077 18.6299 10.0588 18.6117 10.0446Z",
 });
+
+export const GroupIcon = createIcon({
+  displayName: "GroupIcon",
+  viewBox: "0 0 20 20",
+  d: "M10.4688 16.2621C10.0508 16.3374 9.62449 16.3792 9.18977 16.3792C7.89397 16.3792 6.61489 16.0281 5.50301 15.3593L5.20205 15.1837L3.50497 15.6435C3.03681 15.7689 2.61045 15.3425 2.73585 14.8744L3.19565 13.1773C3.02009 12.8847 2.91141 12.6841 2.85289 12.5754C2.28441 11.5388 1.99181 10.3767 2.00017 9.18959C2.00017 5.2186 5.21877 2 9.18977 2C12.8096 2 15.8109 4.68356 16.3041 8.16967C17.7755 9.08091 18.67 10.686 18.67 12.4166C18.67 13.2526 18.461 14.0551 18.0764 14.7741C18.043 14.8409 17.9761 14.9496 17.8842 15.1085L18.1684 16.1535C18.2938 16.6216 17.8674 17.048 17.3993 16.9226L16.3543 16.6383L16.2289 16.7136C15.4514 17.1817 14.5652 17.4242 13.6624 17.4242C12.492 17.4158 11.3634 17.0145 10.4688 16.2621ZM12.0238 15.794C12.5338 16.0448 13.0939 16.1702 13.6624 16.1702C14.3395 16.1702 15.0083 15.9863 15.5852 15.6351C15.627 15.6101 15.744 15.5432 15.9446 15.4261C16.0868 15.3425 16.2623 15.3175 16.4212 15.3676L16.6636 15.4345L16.5967 15.1921C16.5549 15.0249 16.5716 14.8577 16.6636 14.7072C16.7639 14.54 16.8642 14.3644 16.9646 14.1972C17.2572 13.6538 17.4076 13.0436 17.4076 12.4249C17.4076 11.4468 17.0231 10.5021 16.3376 9.80823C16.1202 12.4918 14.4064 14.7657 12.0238 15.794ZM4.46637 13.2526L4.22393 14.1471L5.11845 13.9046C5.27729 13.8628 5.45285 13.8796 5.59497 13.9715C5.89593 14.1471 6.07149 14.2474 6.13001 14.2892C7.04961 14.8409 8.10297 15.1335 9.18141 15.1335C12.4585 15.1335 15.117 12.4751 15.117 9.19795C15.117 5.92084 12.4585 3.26236 9.18141 3.26236C5.90429 3.26236 3.24581 5.92084 3.24581 9.19795C3.24581 10.1928 3.48825 11.1458 3.94805 11.9986C4.00657 12.1156 4.16541 12.3748 4.39949 12.776C4.49145 12.9182 4.50817 13.0937 4.46637 13.2526ZM11.7897 6.99928C12.1325 6.99928 12.4167 7.27516 12.4167 7.62628C12.4167 7.96903 12.1408 8.25327 11.7897 8.25327H6.58145C6.23869 8.25327 5.95445 7.97739 5.95445 7.62628C5.95445 7.28352 6.23033 6.99928 6.58145 6.99928H11.7897ZM9.29009 10.1259C9.63285 10.1259 9.91709 10.4018 9.91709 10.7529C9.91709 11.0957 9.64121 11.3799 9.29009 11.3799H6.58145C6.23869 11.3799 5.95445 11.104 5.95445 10.7529C5.95445 10.4102 6.23033 10.1259 6.58145 10.1259H9.29009Z",
+});
diff --git a/web/src/components/Pagination/index.tsx b/web/src/components/Pagination/index.tsx
@@ -15,8 +15,9 @@ export default function Pagination(props: {
   values: PageValues;
   options?: number[];
   onChange: (values: PageValues) => void;
+  notShowSelect?: boolean;
 }) {
-  const { values, onChange, options } = props;
+  const { values, onChange, options, notShowSelect } = props;
   const { page, total, pageSize } = values;
   const maxPage = total && pageSize ? Math.ceil(total / pageSize) : -1;
 
@@ -38,7 +39,7 @@ export default function Pagination(props: {
       spacing={"1"}
       display="flex"
       whiteSpace={"nowrap"}
-      justifyContent={"space-between"}
+      justifyContent={!notShowSelect ? "space-between" : "flex-end"}
     >
       <HStack spacing={"1"}>
         <Text as="div" className="mr-2">
@@ -108,24 +109,26 @@ export default function Pagination(props: {
           </Button>
         </IconWrap>
       </HStack>
-      <Select
-        size="sm"
-        w="120px"
-        value={pageSize}
-        onChange={(e: any) => {
-          onChange({
-            ...values,
-            pageSize: parseInt(e.target.value),
-            page: 1,
-          });
-        }}
-      >
-        {(options || [10, 20, 30]).map((data: any) => (
-          <option key={data} value={data}>
-            {data} / {t("Page")}
-          </option>
-        ))}
-      </Select>
+      {!notShowSelect && (
+        <Select
+          size="sm"
+          w="120px"
+          value={pageSize}
+          onChange={(e: any) => {
+            onChange({
+              ...values,
+              pageSize: parseInt(e.target.value),
+              page: 1,
+            });
+          }}
+        >
+          {(options || [10, 20, 30]).map((data: any) => (
+            <option key={data} value={data}>
+              {data} / {t("Page")}
+            </option>
+          ))}
+        </Select>
+      )}
     </HStack>
   );
 }
diff --git a/web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/FunctionTemplate/index.tsx
@@ -36,7 +36,7 @@ const FuncTemplate = (props: { children?: React.ReactElement }) => {
 
       <Modal isOpen={isOpen} onClose={handleModalClose}>
         <ModalOverlay />
-        <ModalContent height={"95%"} maxW={"80%"} m={"auto"} overflow={"auto"}>
+        <ModalContent height={"95%"} maxW={"80%"} m={"auto"} overflowY={"auto"}>
           <ModalHeader pb={-0.5}>{t("HomePage.NavBar.funcTemplate")}</ModalHeader>
           <ModalBody>
             <ModalCloseButton />

diff --git a/web/src/pages/app/mods/SideBar/index.module.scss b/web/src/pages/app/mods/SideBar/index.module.scss
@@ -30,9 +30,3 @@
     fill: var(--chakra-colors-primary-600);
   }
 }
-
-.icon.bottom {
-  width: 100%;
-  position: absolute;
-  bottom: 10px;
-}
diff --git a/web/src/pages/app/mods/SideBar/index.tsx b/web/src/pages/app/mods/SideBar/index.tsx
@@ -68,7 +68,7 @@ export default function SideBar() {
       pageId: Pages.userSetting,
       component: (
         <UserSetting
-          name={userInfo?.profile?.name || ""}
+          name={userInfo?.username || ""}
           avatar={getAvatarUrl(userInfo?._id || "")}
           width={"28px"}
         />

diff --git a/web/src/pages/app/setting/AppInfoList/index.tsx b/web/src/pages/app/setting/AppInfoList/index.tsx
@@ -92,7 +92,7 @@ const AppEnvList = () => {
                 }}
               >
                 <RiShutDownLine size={16} className="mr-1" />
-                {t("SettingPanel.ShutDown")}
+                {t("SettingPanel.Pause")}
               </Button>
             ) : null}
 

diff --git a/web/src/pages/app/setting/BillingDetails/index.tsx b/web/src/pages/app/setting/BillingDetails/index.tsx
@@ -27,7 +27,7 @@ import clsx from "clsx";
 import { BillingIcon, FilterIcon } from "@/components/CommonIcon";
 import EmptyBox from "@/components/EmptyBox";
 import Pagination from "@/components/Pagination";
-import { formatDate, formatPrice } from "@/utils/format";
+import { formatDate } from "@/utils/format";
 import getPageInfo from "@/utils/getPageInfo";
 
 import { BillingControllerFindAll } from "@/apis/v1/billings";
@@ -234,7 +234,7 @@ export default function BillingDetails() {
                     <Td className={item.state === "Done" ? "text-primary-600" : "text-error-600"}>
                       {item.state}
                     </Td>
-                    <Td className="font-medium text-grayModern-900">{formatPrice(item.amount)}</Td>
+                    <Td className="font-medium text-grayModern-900">￥{item.amount}</Td>
                   </Tr>
                 ))}
               </Tbody>

diff --git a/web/src/pages/app/setting/Usage/index.tsx b/web/src/pages/app/setting/Usage/index.tsx
@@ -16,7 +16,8 @@ import {
 import ChargeButton from "@/components/ChargeButton";
 import { CostIcon, ExpendIcon, RechargeIcon } from "@/components/CommonIcon";
 import DateRangePicker from "@/components/DateRangePicker";
-import { formatDate, formatPrice, hidePhoneNumber } from "@/utils/format";
+import { formatDate, formatOriginalPrice, formatPrice, hidePhoneNumber } from "@/utils/format";
+import { getAvatarUrl } from "@/utils/getAvatarUrl";
 
 import { AccountControllerGetChargeOrderAmount } from "@/apis/v1/accounts";
 import { BillingControllerGetExpense, BillingControllerGetExpenseByDay } from "@/apis/v1/billings";
@@ -37,14 +38,17 @@ export default function Usage() {
   const { userInfo } = useGlobalStore((state) => state);
   const { data: accountRes } = useAccountQuery();
 
-  const { data: billingAmountRes } = useQuery(["billing", startTime, endTime], async () => {
-    return BillingControllerGetExpense({
-      startTime: startTime?.toISOString(),
-      endTime: endTime?.toISOString(),
-    });
-  });
+  const { data: billingAmountRes, isLoading: billLoading } = useQuery(
+    ["billing", startTime, endTime],
+    async () => {
+      return BillingControllerGetExpense({
+        startTime: startTime?.toISOString(),
+        endTime: endTime?.toISOString(),
+      });
+    },
+  );
 
-  const { data: chargeOrderAmountRes } = useQuery(
+  const { data: chargeOrderAmountRes, isLoading: chargeLoading } = useQuery(
     ["chargeOrderAmount", startTime, endTime],
     async () => {
       return AccountControllerGetChargeOrderAmount({
@@ -65,7 +69,7 @@ export default function Usage() {
   );
 
   const chartData = ((billingAmountByDayRes?.data as Array<any>) || []).map((item) => ({
-    totalAmount: item.totalAmount / 100,
+    totalAmount: item.totalAmount,
     date: formatDate(item.day).slice(5, 10),
   }));
 
@@ -90,7 +94,13 @@ export default function Usage() {
             <div className="flex items-center justify-between pt-3 text-lg">
               <span>{hidePhoneNumber(userInfo?.phone || "")}</span>
               <span className="flex items-center">
-                {userInfo?.username} <Avatar className="ml-2" width={9} height={9} src="" />
+                {userInfo?.username}{" "}
+                <Avatar
+                  className="ml-2"
+                  width={9}
+                  height={9}
+                  src={getAvatarUrl(userInfo?._id || "")}
+                />
               </span>
             </div>
             <div className="flex items-end justify-between pb-5">
@@ -122,7 +132,11 @@ export default function Usage() {
               </div>
               <div className="flex w-full justify-center pt-3">{t("Expenses")}</div>
               <div className="flex w-full justify-center pt-3 text-xl">
-                {formatPrice(billingAmountRes?.data as number)}
+                {billLoading ? (
+                  <Spinner size={"sm"} />
+                ) : (
+                  formatOriginalPrice(billingAmountRes?.data as number)
+                )}
               </div>
             </div>
             <div
@@ -138,7 +152,11 @@ export default function Usage() {
               </div>
               <div className="flex w-full justify-center pt-3">{t("ChargeNow")}</div>
               <div className="flex w-full justify-center pt-3 text-xl">
-                {formatPrice(chargeOrderAmountRes?.data as number)}
+                {chargeLoading ? (
+                  <Spinner size={"sm"} />
+                ) : (
+                  formatPrice(chargeOrderAmountRes?.data as number)
+                )}
               </div>
             </div>
           </div>
@@ -156,7 +174,9 @@ export default function Usage() {
               <CartesianGrid strokeDasharray="3 3" vertical={false} />
               <XAxis dataKey="date" axisLine={false} tickLine={false} />
               <YAxis axisLine={false} tickLine={false} />
-              <Tooltip formatter={(value) => ["￥" + Number(value).toFixed(2), t("Expenses")]} />
+              <Tooltip
+                formatter={(value) => [formatOriginalPrice(Number(value), 3), t("Expenses")]}
+              />
               <Area
                 type="monotone"
                 dataKey="totalAmount"