chore(web): fix styles & optimize tips & add running cancel (#1740)

labring · Dec 19, 2023 · 821a273 · 821a273
1 parent 5f20b62
commit 821a273
Show file tree

Hide file tree

Showing 27 changed files with 370 additions and 109 deletions.
diff --git a/web/public/locales/en/translation.json b/web/public/locales/en/translation.json
@@ -279,7 +279,7 @@
     "Inaccessible": "Inaccessible",
     "isResolved": "Effective",
     "cnameTip": "Add the \"CNAME\" record of the domain to resolve to <strong>{{cnameDomain}}</strong>, After the resolution takes effect, the custom domain name can be bound.",
-    "editHostTip": "oss-bucket needs to be in read mode to enable website hosting",
+    "editHostTip": "oss-bucket needs to be in readOnly mode to enable website hosting",
     "CreateWebHosting": "Bind custom domain name",
     "CustomDomain": "Custom Domain",
     "CurrentDomain": "Current domain: ",
@@ -292,7 +292,12 @@
     "CustomApplicationDomain": "Custom Application Domain",
     "BucketNameisRequired": "Bucket name is required",
     "Fail": "upload failed",
-    "UploadFailTip": "{{number}} files upload failed"
+    "UploadFailTip": "{{number}} files upload failed",
+    "StartAppTips": " Please start the application first",
+    "SuccessfullyHosted": "Successfully hosted",
+    "SuccessfullyHostedTips": "HTTP is active, HTTPS activation may take some time. To check the hosting status, use HTTP for now.",
+    "BucketTips": "Newly created buckets or buckets after app restart need to wait for 15 ~ 30 s to take effect",
+    "DomainNotResolved": "Try using ping or nslookup to check if domain name resolution is effective"
   },
   "TriggerPanel": {
     "AddTrigger": "Add Trigger",
@@ -313,7 +318,8 @@
     "EmptyTriggerTip": "You have not created a trigger,",
     "Every8AM": "8 am every day",
     "EveryHour": "per hour",
-    "EveryFiveMinutes": "every five minutes"
+    "EveryFiveMinutes": "every five minutes",
+    "createFail": "Trigger limit reached. Upgrade app configuration."
   },
   "StatusBar": {
     "CurrentApplication": "Current App"
@@ -393,7 +399,8 @@
     "LoginOrRegister": "Login / Register",
     "BindGitHub": "Bind GitHub",
     "BindSuccess": "Bind Successfully",
-    "GitHubLogin": "GitHub Login"
+    "GitHubLogin": "GitHub Login",
+    "PleaseBindUser": "Please bind your user"
   },
   "Time": "Time",
   "CreateTime": "Created",

diff --git a/web/public/locales/zh-CN/translation.json b/web/public/locales/zh-CN/translation.json
@@ -292,7 +292,12 @@
     "CustomApplicationDomain": "自定义应用域名",
     "BucketNameisRequired": "请输入 Bucket 名称",
     "Fail": "上传失败",
-    "UploadFailTip": "{{number}} 个文件上传失败"
+    "UploadFailTip": "{{number}} 个文件上传失败",
+    "StartAppTips": "请先启动应用",
+    "SuccessfullyHosted": "托管成功",
+    "SuccessfullyHostedTips": "HTTP已生效，HTTPS需要一些时间生效。如需查看托管状态，请暂时使用HTTP访问。",
+    "BucketTips": "新创建的 bucket，或应用重启后的 bucket ，需要等待 15 ~ 30s 才能生效",
+    "DomainNotResolved": "尝试使用 ping 或 nslookup 来查看域名解析是否生效"
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",
@@ -313,7 +318,8 @@
     "EmptyTriggerTip": "您还没有创建触发器,",
     "Every8AM": "每天上午8点",
     "EveryHour": "每小时",
-    "EveryFiveMinutes": "每五分钟"
+    "EveryFiveMinutes": "每五分钟",
+    "createFail": "触发器数量已达上限，请升级应用配置"
   },
   "StatusBar": {
     "CurrentApplication": "当前应用"
@@ -393,7 +399,8 @@
     "LoginOrRegister": "登录 / 注册",
     "BindGitHub": "绑定 GitHub",
     "BindSuccess": "绑定成功",
-    "GitHubLogin": "GitHub 登录"
+    "GitHubLogin": "GitHub 登录",
+    "PleaseBindUser": "请绑定对应用户"
   },
   "Time": "时间",
   "CreateTime": "创建时间",

diff --git a/web/public/locales/zh/translation.json b/web/public/locales/zh/translation.json
@@ -292,7 +292,12 @@
     "CustomApplicationDomain": "自定义应用域名",
     "BucketNameisRequired": "请输入 Bucket 名称",
     "Fail": "上传失败",
-    "UploadFailTip": "{{number}} 个文件上传失败"
+    "UploadFailTip": "{{number}} 个文件上传失败",
+    "StartAppTips": "请先启动应用",
+    "SuccessfullyHosted": "托管成功",
+    "SuccessfullyHostedTips": "HTTP已生效，HTTPS需要一些时间生效。如需查看托管状态，请暂时使用HTTP访问。",
+    "BucketTips": "新创建的 bucket，或应用重启后的 bucket ，需要等待 15 ~ 30s 才能生效",
+    "DomainNotResolved": "尝试使用 ping 或 nslookup 来查看域名解析是否生效"
   },
   "TriggerPanel": {
     "AddTrigger": "新建触发器",
@@ -313,7 +318,8 @@
     "EmptyTriggerTip": "您还没有创建触发器,",
     "Every8AM": "每天上午8点",
     "EveryHour": "每小时",
-    "EveryFiveMinutes": "每五分钟"
+    "EveryFiveMinutes": "每五分钟",
+    "createFail": "触发器数量已达上限，请升级应用配置"
   },
   "StatusBar": {
     "CurrentApplication": "当前应用"
@@ -393,7 +399,8 @@
     "LoginOrRegister": "登录 / 注册",
     "BindGitHub": "绑定 GitHub",
     "BindSuccess": "绑定成功",
-    "GitHubLogin": "GitHub 登录"
+    "GitHubLogin": "GitHub 登录",
+    "PleaseBindUser": "请绑定对应用户"
   },
   "Time": "时间",
   "CreateTime": "创建时间",

diff --git a/web/src/components/ChargeButton/index.tsx b/web/src/components/ChargeButton/index.tsx
@@ -112,10 +112,11 @@ export default function ChargeButton(props: { amount?: number; children: React.R
                     )}
                     <Button
                       className={clsx(
-                        "w-full !rounded-md !border-2 bg-gray-100 py-10 !text-[24px]",
+                        "w-full !rounded-md !border-2 py-10 !text-[24px]",
                         item.amount === amount * 100
                           ? "!border-primary-400 !text-primary-600"
                           : "!border-transparent",
+                        darkMode ? "bg-gray-500" : "bg-gray-100 ",
                       )}
                       variant={"outline"}
                       key={item.amount}

diff --git a/web/src/components/Resize/index.tsx b/web/src/components/Resize/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
 import { Box, Center, useColorModeValue } from "@chakra-ui/react";
 import clsx from "clsx";
@@ -18,7 +18,7 @@ export default function Resize(props: {
   const store = useCustomSettingStore();
   const { width, height, minWidth, maxWidth, minHeight, maxHeight, display } =
     store.getLayoutInfoStyle(pageId, panelId);
-  const { isDragging, position, separatorProps } = useResizable({
+  const { isDragging, position, separatorProps, handleClick } = useResizable({
     axis: type,
     initial: type === "x" ? width : height,
     min: type === "x" ? minWidth : minHeight,
@@ -35,6 +35,7 @@ export default function Resize(props: {
     store.setLayoutInfo(pageId, panelId, newPosition);
   }, [position, pageId, panelId, store]);
   const borderColor = useColorModeValue("slate.300", "lafDark.300");
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   return (
     <>
@@ -49,15 +50,25 @@ export default function Resize(props: {
           {...separatorProps}
         >
           <Center className="relative h-full w-full">
-            {type === "x" && width <= 20 ? (
+            {type === "x" && width <= minWidth + 15 ? (
               <div
                 className={clsx(
-                  "z-50",
-                  reverse ? "rounded-l-lg" : "rounded-r-lg",
+                  "absolute z-50 cursor-pointer",
+                  !isCollapsed && !reverse && "mr-2 rounded-l-full",
+                  isCollapsed && !reverse && "ml-2 rounded-r-full",
+                  !isCollapsed && reverse && "ml-2 rounded-r-full",
+                  isCollapsed && reverse && "mr-2 rounded-l-full",
                   "h-[30px] w-2 bg-grayIron-300 leading-loose text-lafWhite-600 transition-colors group-hover:bg-grayIron-400",
                 )}
+                onClick={(e) => {
+                  handleClick(e, isCollapsed);
+                  setIsCollapsed(!isCollapsed);
+                }}
               >
-                {reverse ? <ChevronLeftIcon fontSize={10} /> : <ChevronRightIcon fontSize={10} />}
+                {!isCollapsed && !reverse && <ChevronLeftIcon fontSize={10} />}
+                {isCollapsed && !reverse && <ChevronRightIcon fontSize={10} />}
+                {!isCollapsed && reverse && <ChevronRightIcon fontSize={10} />}
+                {isCollapsed && reverse && <ChevronLeftIcon fontSize={10} />}
               </div>
             ) : (
               <>

diff --git a/web/src/hooks/useResizable.ts b/web/src/hooks/useResizable.ts
@@ -6,6 +6,7 @@ type Resizable = {
   position: number;
   isDragging: boolean;
   separatorProps: SeparatorProps;
+  handleClick: (e: React.MouseEvent | React.TouchEvent, isCollapsed: boolean) => void;
 };
 type UseResizableProps = {
   axis: "x" | "y";
@@ -72,15 +73,27 @@ const useResizable = ({
         }
       })();
 
-      if (currentPosition <= 4) return setPosition(4);
-
       if (min <= currentPosition && currentPosition <= max) {
         setPosition(currentPosition);
       }
     },
     [axis, disabled, max, min, reverse, containerRef],
   );
 
+  const handleClick = useCallback(
+    (e: React.MouseEvent | React.TouchEvent, isCollapsed: boolean) => {
+      if (disabled) return;
+      e.stopPropagation();
+      e.preventDefault();
+      if (!isCollapsed) {
+        setPosition(4);
+      } else {
+        setPosition(min);
+      }
+    },
+    [disabled, min],
+  );
+
   const handleUp = useCallback(
     (e: MouseEvent | TouchEvent) => {
       if (disabled) return;
@@ -116,6 +129,7 @@ const useResizable = ({
       onMouseDown: handleDown,
       onTouchStart: handleDown,
     },
+    handleClick,
   };
 };
 

diff --git a/web/src/pages/app/database/index.tsx b/web/src/pages/app/database/index.tsx
@@ -25,7 +25,7 @@ function DatabasePage() {
   return (
     <Content>
       <Row className="flex-grow" ref={containerRef}>
-        <Col {...settingStore.layoutInfo.collectionPage.SideBar}>
+        <Col style={{ width: settingStore.layoutInfo.collectionPage.SideBar.style.width }}>
           <CollectionListPanel />
           <Resize
             type="y"

diff --git a/web/src/pages/app/functions/index.tsx b/web/src/pages/app/functions/index.tsx
@@ -25,7 +25,7 @@ function FunctionPage() {
   return (
     <Content>
       <Row ref={containerRef}>
-        <Col {...functionPageConfig.SideBar}>
+        <Col style={{ width: functionPageConfig.SideBar.style.width }}>
           <FunctionPanel />
           <Resize
             type="y"
@@ -71,7 +71,7 @@ function FunctionPage() {
               reverse
               containerRef={containerRef}
             />
-            <Col {...functionPageConfig.RightPanel}>
+            <Col style={{ width: functionPageConfig.RightPanel.style.width }}>
               <DebugPanel containerRef={containerRef} />
             </Col>
           </Row>

diff --git a/web/src/pages/app/functions/mods/DebugPanel/index.tsx b/web/src/pages/app/functions/mods/DebugPanel/index.tsx
@@ -14,6 +14,7 @@ import {
   useColorMode,
 } from "@chakra-ui/react";
 import axios from "axios";
+import clsx from "clsx";
 import { keyBy, mapValues } from "lodash";
 
 import JSONViewer from "@/components/Editor/JSONViewer";
@@ -62,6 +63,7 @@ export default function DebugPanel(props: { containerRef: any }) {
   const [runningResData, setRunningResData] = useState();
   const [isLoading, setIsLoading] = useState(false);
   const [runningMethod, setRunningMethod] = useState<TMethod>();
+  const [isHovered, setIsHovered] = useState(false);
 
   const compileMutation = useCompileMutation();
   const { colorMode } = useColorMode();
@@ -71,6 +73,8 @@ export default function DebugPanel(props: { containerRef: any }) {
   const [bodyParams, setBodyParams] = useState<{ contentType: string; data: any }>();
   const [headerParams, setHeaderParams] = useState([]);
 
+  const [abortController, setAbortController] = useState(new AbortController());
+
   const functionPageConfig = useCustomSettingStore((store) => store.layoutInfo.functionPage);
   const { displayName } = useHotKey(
     DEFAULT_SHORTCUTS.send_request,
@@ -147,7 +151,7 @@ export default function DebugPanel(props: { containerRef: any }) {
             return status === 500 ? true : status >= 200 && status < 300;
           },
         });
-
+        const signal = abortController.signal;
         const res = await axiosInstance({
           url: getFunctionUrl(),
           method: runningMethod,
@@ -158,6 +162,7 @@ export default function DebugPanel(props: { containerRef: any }) {
             "x-laf-debug-data": encodeData(_funcData),
             "Content-Type": bodyParams?.contentType || "application/json",
           }),
+          signal,
         });
 
         setCurrentRequestId(res.headers["request-id"]);
@@ -166,13 +171,20 @@ export default function DebugPanel(props: { containerRef: any }) {
 
         setRunningResData(res.data);
       }
+
+      return () => abortController.abort();
     } catch (error: any) {
       setRunningResData(error.toString());
     } finally {
       setIsLoading(false);
     }
   };
 
+  const cancelRequest = () => {
+    abortController.abort();
+    setAbortController(new AbortController());
+  };
+
   return (
     <>
       <Panel className="min-w-[200px] flex-grow overflow-hidden !px-0">
@@ -253,14 +265,32 @@ export default function DebugPanel(props: { containerRef: any }) {
                       );
                     })}
                   </Select>
-                  <Tooltip label={`${t("shortcutKey")} ${displayName.toUpperCase()}`}>
+                  <Tooltip
+                    label={isLoading ? "" : `${t("shortcutKey")} ${displayName.toUpperCase()}`}
+                  >
                     <Button
                       disabled={getFunctionUrl() === ""}
-                      className="ml-2 !h-6 !w-14 !bg-primary-600 !text-base"
-                      onClick={() => runningCode()}
-                      isLoading={isLoading}
+                      className={clsx(
+                        "relative ml-2 !h-6 !w-14 !text-base",
+                        isLoading ? "!bg-primary-400" : "!bg-primary-600 ",
+                      )}
+                      onClick={() => (isLoading ? cancelRequest() : runningCode())}
+                      onMouseEnter={() => setIsHovered(true)}
+                      onMouseLeave={() => setIsHovered(false)}
                     >
-                      {t("FunctionPanel.Debug")}
+                      {isLoading ? (
+                        <>
+                          {isHovered ? (
+                            t("Cancel")
+                          ) : (
+                            <Center>
+                              <Spinner size={"xs"} />
+                            </Center>
+                          )}
+                        </>
+                      ) : (
+                        t("FunctionPanel.Debug")
+                      )}
                     </Button>
                   </Tooltip>
                 </div>
@@ -336,21 +366,18 @@ export default function DebugPanel(props: { containerRef: any }) {
                     pageId="functionPage"
                     panelId="RunningPanel"
                   />
-                  <div className="relative flex-1 overflow-auto">
+                  <div className="h-full flex-1 overflow-auto">
                     {isLoading ? (
-                      <div className="absolute left-0 right-0">
-                        <Center>
-                          <Spinner />
-                        </Center>
-                      </div>
-                    ) : null}
-                    {runningResData !== undefined ? (
+                      <Center className="h-full">
+                        <Spinner />
+                      </Center>
+                    ) : runningResData !== undefined ? (
                       <JSONViewer
                         colorMode={colorMode}
                         code={JSON.stringify(runningResData, null, 2)}
                       />
                     ) : (
-                      <Center minH={140} className="text-grayIron-600">
+                      <Center className="h-full text-grayIron-600">
                         {t("FunctionPanel.EmptyDebugTip")}
                       </Center>
                     )}

diff --git a/web/src/pages/app/functions/mods/FunctionPanel/index.tsx b/web/src/pages/app/functions/mods/FunctionPanel/index.tsx
@@ -335,7 +335,7 @@ export default function FunctionList() {
   }
 
   return (
-    <Panel className="min-w-[215px] flex-grow overflow-hidden">
+    <Panel className="flex-grow overflow-hidden">
       <Panel.Header
         title={
           <div className="flex">