refactor subscription dialog experience (#914)

* refactor(web): improve the subscripting experience * refactor(web): fix dark mode style * refactor(web): fix i18n text * fix(web): restart app bug * fix(web): dependence list max height
labring · Mar 16, 2023 · 463a1bb · 463a1bb
1 parent d650d20
commit 463a1bb
Show file tree

Hide file tree

Showing 30 changed files with 470 additions and 202 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -54,6 +54,7 @@
     "fullname",
     "ghaction",
     "healthz",
+    "hljs",
     "hokify",
     "hostpath",
     "immer",

diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -127,7 +127,7 @@
     "WX": "WeChat Mini Program/Public Account",
     "Welcome": "Welcome to the LAF cloud development platform!",
     "DeleteApp": "delete apps",
-    "DeleteTip": "Are you sure you want to delete this app?",
+    "DeleteTip": "The current operation will permanently delete applications, including functions, data, cloud storage, etc. related data related to the application. After deleting, <strong> will not be able to cancel </strong>,please enter <strong>{{appId}}</strong> confirm",
     "Duration": "Duration"
   },
   "LogPanel": {
@@ -151,7 +151,6 @@
     "Memory": "Memory",
     "Restart": "Restart",
     "network": "Outgoing capacity",
-    "Close": "Close",
     "AppInfo": "Application Information",
     "Auth": "Real-name Authentication",
     "Code": "Code",
@@ -166,7 +165,8 @@
     "ToAuth": "Authenticate Now",
     "UserInfo": "User Information",
     "noAuth": "Not Authenticated",
-    "showAuth": "Go to Auth"
+    "showAuth": "Go to Auth",
+    "ShutDown": "ShutDown"
   },
   "StoragePanel": {
     "All": "Total Capacity",
@@ -284,5 +284,18 @@
     "Free": "Free"
   },
   "star-us-on-github": "Star us on GitHub",
-  "Time": "Time"
+  "Time": "Time",
+  "CreateTime": "Created",
+  "EndTime": "Expired",
+  "Renew": "Renew",
+  "TotalPrice": "Total",
+  "Balance": "Balance",
+  "ChargeNow": "Charge",
+  "balance is insufficient": "balance is insufficient",
+  "DeleteApp": "Delete",
+  "Recharge amount": "Recharge amount",
+  "Scan with WeChat": "WeChat scan code payment",
+  "Order Number": "Order Number",
+  "payment status": "Payment status",
+  "Monthly": "Monthly"
 }
diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -127,7 +127,7 @@
     "WX": "微信小程序/公众号",
     "Welcome": "欢迎来到 LAF 云开发平台！",
     "DeleteApp": "删除 APP",
-    "DeleteTip": "你确定想要删除这个 App?",
+    "DeleteTip": "当前操作将会永久删除应用, 包括函数、数据、云存储等与应用相关的数据, 删除后<strong>将无法撤消</strong>, 请输入 <strong>{{appId}}</strong> 后确认",
     "Duration": "购买时长"
   },
   "LogPanel": {
@@ -150,7 +150,6 @@
     "Disk": "硬盘",
     "DB": "数据库",
     "network": "出网容量",
-    "Close": "关闭应用",
     "Delete": "删除应用",
     "Restart": "重启应用",
     "UserInfo": "用户信息",
@@ -166,7 +165,8 @@
     "IDTip": "请输入有效的身份证号码",
     "CodeTip": "请输入四位数字验证码",
     "TelTip": "请输入有效的手机号码",
-    "Registered": "注册时间"
+    "Registered": "注册时间",
+    "ShutDown": "关闭应用"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -284,5 +284,19 @@
     "Free": "免费"
   },
   "star-us-on-github": "在 GitHub 上支持我们",
-  "Time": "时间"
-}
+  "Time": "时间",
+  "CreateTime": "创建时间",
+  "EndTime": "到期时间",
+  "Renew": "续期",
+  "TotalPrice": "共需支付",
+  "Balance": "账户余额",
+  "ChargeNow": "充值",
+  "balance is insufficient": "余额不足",
+  "nihao": "你好",
+  "DeleteApp": "删除应用",
+  "Recharge amount": "充值金额",
+  "Scan with WeChat": "微信扫码支付",
+  "Order Number": "订单号",
+  "payment status": "支付状态",
+  "Monthly": "月"
+}
diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -127,7 +127,7 @@
     "WX": "微信小程序/公众号",
     "Welcome": "欢迎来到 LAF 云开发平台！",
     "DeleteApp": "删除 APP",
-    "DeleteTip": "你确定想要删除这个 App?",
+    "DeleteTip": "当前操作将会永久删除应用, 包括函数、数据、云存储等与应用相关的数据, 删除后<strong>将无法撤消</strong>,  请输入 <strong>{{appId}}</strong> 后确认",
     "Duration": "购买时长"
   },
   "LogPanel": {
@@ -150,7 +150,6 @@
     "Disk": "硬盘",
     "DB": "数据库",
     "network": "出网容量",
-    "Close": "关闭应用",
     "Delete": "删除应用",
     "Restart": "重启应用",
     "UserInfo": "用户信息",
@@ -166,7 +165,8 @@
     "IDTip": "请输入有效的身份证号码",
     "CodeTip": "请输入四位数字验证码",
     "TelTip": "请输入有效的手机号码",
-    "Registered": "注册时间"
+    "Registered": "注册时间",
+    "ShutDown": "关闭应用"
   },
   "StoragePanel": {
     "All": "总容量",
@@ -284,5 +284,18 @@
     "Free": "免费"
   },
   "star-us-on-github": "在 GitHub 上支持我们",
-  "Time": "时间"
-}
+  "Time": "时间",
+  "CreateTime": "创建时间",
+  "EndTime": "到期时间",
+  "Renew": "续期",
+  "TotalPrice": "共需支付",
+  "Balance": "账户余额",
+  "ChargeNow": "充值",
+  "balance is insufficient": "余额不足",
+  "DeleteApp": "删除应用",
+  "Recharge amount": "充值金额",
+  "Scan with WeChat": "微信扫码支付",
+  "Order Number": "订单号",
+  "payment status": "支付状态",
+  "Monthly": "月"
+}
diff --git a/web/src/components/ChargeButton/index.tsx b/web/src/components/ChargeButton/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import {
   Button,
   Input,
@@ -26,7 +26,9 @@ export default function ChargeButton(props: { amount?: number; children: React.R
   const { children } = props;
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-  const [amount, setAmount] = React.useState(props.amount || 0);
+  const initialAmount = props.amount && props.amount > 0 ? props.amount : 100;
+
+  const [amount, setAmount] = React.useState(initialAmount);
 
   const [phaseStatus, setPhaseStatus] = React.useState<"Pending" | "Paid" | undefined>();
 
@@ -57,6 +59,11 @@ export default function ChargeButton(props: { amount?: number; children: React.R
     },
   );
 
+  useEffect(() => {
+    const initialAmount = props.amount && props.amount > 0 ? props.amount : 100;
+    setAmount(initialAmount);
+  }, [props.amount]);
+
   return (
     <>
       {React.cloneElement(children, { onClick: onOpen })}
@@ -67,11 +74,11 @@ export default function ChargeButton(props: { amount?: number; children: React.R
           <ModalCloseButton />
           <ModalBody px="10" pb="10">
             <div className="flex flex-col items-center text-xl">
-              <h2 className="text-second">当前余额</h2>
+              <h2 className="text-second">{t("Balance")}</h2>
               <h3 className="text-3xl font-semibold mb-4">
                 {formatPrice(accountQuery.data?.balance)}
               </h3>
-              <p className="text-second mb-2">充值金额</p>
+              <p className="text-second mb-2">{t("Recharge amount")}</p>
               <InputGroup>
                 <InputLeftAddon children="¥" />
                 <Input
@@ -95,22 +102,24 @@ export default function ChargeButton(props: { amount?: number; children: React.R
                   });
                 }}
               >
-                确定
+                {t("Confirm")}
               </Button>
             </div>
 
             {createChargeOrder.data?.data?.result?.code_url && (
               <div className="flex flex-col items-center text-xl mt-4">
-                <h2 className="mb-2">微信扫码支付</h2>
+                <h2 className="mb-2">{t("Scan with WeChat")}</h2>
                 <QRCodeSVG
                   value={createChargeOrder.data?.data?.result?.code_url}
                   width={180}
                   height={180}
                 />
                 <p className="text-base mt-4 text-second ">
-                  订单号：{createChargeOrder.data?.data?.order?.id}
+                  {t("Order Number")}：{createChargeOrder.data?.data?.order?.id}
+                </p>
+                <p className="text-base mt-1 text-second ">
+                  {t("payment status")}: {phaseStatus}
                 </p>
-                <p className="text-base mt-1 text-second ">支付状态: {phaseStatus}</p>
               </div>
             )}
           </ModalBody>

diff --git a/web/src/components/ConfirmButton/index.tsx b/web/src/components/ConfirmButton/index.tsx
@@ -16,7 +16,7 @@ import { t } from "i18next";
 interface ConfirmButtonProps {
   onSuccessAction: () => void;
   headerText: string;
-  bodyText: string;
+  bodyText: string | React.ReactElement | any;
   confirmButtonText?: string;
   children: React.ReactElement;
 }

diff --git a/web/src/components/CopyText/index.tsx b/web/src/components/CopyText/index.tsx
@@ -15,7 +15,13 @@ export default function CopyText(props: {
   const { onCopy, setValue } = useClipboard("");
   const { showSuccess } = useGlobalStore();
 
-  const { children = <CopyIcon />, text, tip, className, hideToolTip } = props;
+  const {
+    children = <CopyIcon fontSize={10} color="#999" />,
+    text,
+    tip,
+    className,
+    hideToolTip,
+  } = props;
 
   useEffect(() => {
     setValue(text || "");

diff --git a/web/src/components/Editor/FunctionEditor.tsx b/web/src/components/Editor/FunctionEditor.tsx
@@ -29,7 +29,12 @@ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
 monaco?.editor.defineTheme("lafEditorTheme", {
   base: "vs",
   inherit: true,
-  rules: [],
+  rules: [
+    {
+      foreground: "#0066ff",
+      token: "keyword",
+    },
+  ],
   colors: {
     "editorLineNumber.foreground": "#aaa",
     "editorOverviewRuler.border": "#fff",

diff --git a/web/src/components/Editor/JSONViewer.tsx b/web/src/components/Editor/JSONViewer.tsx
@@ -1,6 +1,6 @@
 import SyntaxHighlighter from "react-syntax-highlighter";
 
-type JSONViewerProp = {
+type JSONViewerProps = {
   code: string;
   language?: string;
   showNumber?: boolean;
@@ -234,8 +234,8 @@ const JSONViewerDarkStyle: any = {
     fontWeight: "bold",
   },
 };
-export default function JSONViewer(prop: JSONViewerProp) {
-  const { code, language = "json", colorMode = "light" } = prop;
+export default function JSONViewer(props: JSONViewerProps) {
+  const { code, language = "json", colorMode = "light" } = props;
   const lightTheme = { background: "#fdfdfe" };
   const darkTheme = {
     background: "#202631",

diff --git a/web/src/components/IconText/index.tsx b/web/src/components/IconText/index.tsx
@@ -1,14 +1,22 @@
 import React from "react";
+import { useColorMode } from "@chakra-ui/react";
+import clsx from "clsx";
 
 export default function IconText(props: {
   icon: React.ReactElement;
   text: string;
   onClick?: () => void;
 }) {
+  const { colorMode } = useColorMode();
+  const darkMode = colorMode === "dark";
+
   return (
     <div
       onClick={props.onClick}
-      className="text-grayIron-600 flex flex-col items-center hover:text-black"
+      className={clsx("text-grayIron-600 flex flex-col items-center", {
+        "hover:text-black": !darkMode,
+        "hover:text-white": darkMode,
+      })}
     >
       {React.cloneElement(props.icon, {
         height: "20px",

diff --git a/web/src/layouts/Function.tsx b/web/src/layouts/Function.tsx
@@ -1,14 +1,17 @@
 import { useEffect } from "react";
 import { Outlet, useParams } from "react-router-dom";
-import { Badge, Center, Spinner } from "@chakra-ui/react";
+import { Badge, Center, Spinner, useColorMode } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
+import clsx from "clsx";
 
 import { APP_PHASE_STATUS, Pages } from "@/constants/index";
 
 import { ApplicationControllerFindOne } from "@/apis/v1/applications";
 import useGlobalStore from "@/pages/globalStore";
 
 export default function FunctionLayout() {
+  const { colorMode } = useColorMode();
+  const darkMode = colorMode === "dark";
   const { init, loading, setCurrentApp, currentApp, setCurrentPage } = useGlobalStore(
     (state) => state,
   );
@@ -62,7 +65,12 @@ export default function FunctionLayout() {
             {currentApp?.phase !== APP_PHASE_STATUS.Started &&
             currentApp?.phase !== APP_PHASE_STATUS.Stopped &&
             currentApp?.phase !== APP_PHASE_STATUS.Deleted ? (
-              <div className="absolute top-0 bottom-0 left-0 right-0 z-[999] flex flex-col justify-center items-center bg-lafWhite-200 opacity-70 ">
+              <div
+                className={clsx(
+                  "absolute top-0 bottom-0 left-0 right-0 z-[999] flex flex-col justify-center items-center  opacity-70 ",
+                  darkMode ? "bg-lafDark-100" : "bg-lafWhite-600",
+                )}
+              >
                 <Spinner
                   thickness="4px"
                   speed="0.65s"

diff --git a/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx b/web/src/pages/app/database/mods/DeleteCollectionModal/index.tsx
@@ -61,7 +61,7 @@ function DeleteCollectionModal(props: { database: any }) {
           <ModalBody pb={6}>
             <p className="mb-2">
               {t("CollectionPanel.DeleteCollectionTip")}
-              <span className=" text-black mx-1 font-bold">{database.name}</span>
+              <span className="mx-1 font-bold">{database.name}</span>
               {t("DeleteTip")}。
             </p>
             <p className="mb-4">

diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
@@ -172,7 +172,7 @@ export default function DebugPanel(props: { containerRef: any }) {
                   >
                     <TabList className="mb-1 flex-none">
                       <Tab>
-                        Params
+                        Query
                         {queryParams.length > 0 && (
                           <span className="ml-1">({queryParams.length})</span>
                         )}

diff --git a/web/src/pages/app/functions/mods/DependencePanel/index.tsx b/web/src/pages/app/functions/mods/DependencePanel/index.tsx
@@ -14,6 +14,7 @@ import SectionList from "@/components/SectionList";
 import AddDependenceModal from "./AddDependenceModal";
 import { TPackage, useDelPackageMutation, usePackageQuery } from "./service";
 
+import useCustomSettingStore from "@/pages/customSetting";
 import useGlobalStore from "@/pages/globalStore";
 
 export default function DependenceList() {
@@ -24,10 +25,13 @@ export default function DependenceList() {
   });
   const { t } = useTranslation();
 
+  const store = useCustomSettingStore();
+
   const builtinPackage: TPackage[] = [];
   const customPackage: TPackage[] = [];
 
-  const SECTION_HEIGHT = 180;
+  const { height } = store.getLayoutInfo("functionPage", "DependencePanel");
+  const SECTION_HEIGHT = height - 90;
 
   packageQuery?.data?.data?.forEach((packageItem: TPackage) => {
     if (packageItem.builtin) {

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -213,9 +213,9 @@ export default function FunctionList() {
                       navigate(`/app/${currentApp?.appid}/${Pages.function}/${func?.name}`);
                     }}
                   >
-                    <div>
+                    <div className="leading-loose font-semibold">
                       <FileTypeIcon type={FileType.ts} />
-                      <span className="ml-2 font-medium">{func?.name}</span>
+                      <span className="ml-2 text-base">{func?.name}</span>
                     </div>
                     <HStack spacing={1}>
                       {functionCache.getCache(func?.id, func?.source?.code) !==