feat:template develop envs & links (#4073)

* feat:template develop envs & links Signed-off-by: jingyang <3161362058@qq.com> * fix text Signed-off-by: jingyang <3161362058@qq.com> --------- Signed-off-by: jingyang <3161362058@qq.com>
labring · Oct 12, 2023 · b02cf53 · b02cf53
1 parent a7b6260
commit b02cf53
Show file tree

Hide file tree

Showing 16 changed files with 336 additions and 36 deletions.
diff --git a/frontend/desktop/public/locales/en/common.json b/frontend/desktop/public/locales/en/common.json
@@ -89,5 +89,6 @@
   "Remaining Time": "Remaining Time: ",
   "Please read and agree to the agreement": "Please read and agree to the agreement",
   "Purchase Link Error": "Purchase Link Error",
-  "You have not purchased the License": "You have not purchased the License"
+  "You have not purchased the License": "You have not purchased the License",
+  "App Info": "App Info"
 }
diff --git a/frontend/desktop/public/locales/zh/common.json b/frontend/desktop/public/locales/zh/common.json
@@ -83,5 +83,6 @@
   "Remaining Time": "剩余激活时间: ",
   "Please read and agree to the agreement": "请阅读并同意协议",
   "Purchase Link Error": "购买链接错误",
-  "You have not purchased the License": "您还没有购买 License"
+  "You have not purchased the License": "您还没有购买 License",
+  "App Info": "应用信息"
 }
diff --git a/frontend/desktop/src/components/rightContext/index.tsx b/frontend/desktop/src/components/rightContext/index.tsx
@@ -0,0 +1,90 @@
+import { Box, Flex, Icon, Text } from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { MouseEvent, ReactElement, ReactNode, useState } from 'react';
+
+export type SideBarMenu = {
+  id: string;
+  value: string;
+  icon: ReactElement;
+  click: () => void;
+};
+
+export default function RightContext({ children }: { children: ReactNode }) {
+  const [contextOpen, setContextOpen] = useState(false);
+  const [xYPosistion, setXyPosistion] = useState({ x: 0, y: 0 });
+  const { t } = useTranslation();
+
+  const showNav = (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const positionChange = {
+      x: e.pageX,
+      y: e.pageY
+    };
+    setXyPosistion(positionChange);
+    setContextOpen(true);
+  };
+
+  const hideContext = (e: MouseEvent<HTMLDivElement>) => {
+    setContextOpen(false);
+  };
+
+  const menus: SideBarMenu[] = [
+    {
+      id: 'appinfo',
+      value: 'App Info',
+      icon: (
+        <path d="M4.66667 11.3333H9.33333V10H4.66667V11.3333ZM4.66667 8.66667H11.3333V7.33333H4.66667V8.66667ZM4.66667 6H11.3333V4.66667H4.66667V6ZM3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667V3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13056 2.96667 2 3.33333 2H12.6667C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333V12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14H3.33333ZM3.33333 12.6667H12.6667V3.33333H3.33333V12.6667Z" />
+      ),
+      click: () => {
+        console.log(111);
+      }
+    }
+  ];
+
+  return (
+    <Box onContextMenu={showNav} onClick={hideContext} position={'relative'}>
+      {children}
+      {contextOpen && (
+        <Box
+          cursor={'pointer'}
+          position={'fixed'}
+          top={xYPosistion.y + 15}
+          left={xYPosistion.x + 10}
+          border={'1px solid #FFF'}
+          background={'rgba(244, 246, 248, 0.90)'}
+          backdropFilter={'blur(50px)'}
+          borderRadius={'4px'}
+          boxShadow={'0px 1.16667px 2.33333px 0px rgba(0, 0, 0, 0.20)'}
+          zIndex={9999}
+          p="6px"
+        >
+          {menus.map((item) => {
+            return (
+              <Flex
+                w="118px"
+                h="30px"
+                key={item.id}
+                onClick={item.click}
+                alignItems={'center'}
+                overflow={'hidden'}
+                px="4px"
+                _hover={{
+                  background: 'rgba(0, 0, 0, 0.05)',
+                  color: '#0884DD',
+                  svg: {
+                    fill: '#0884DD'
+                  }
+                }}
+              >
+                <Icon fill={'#5A646E'} w={'16px'} h="16px" viewBox="0 0 16 16">
+                  {item.icon}
+                </Icon>
+                <Text pl="8px">{t(item.value)}</Text>
+              </Flex>
+            );
+          })}
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/frontend/providers/dbprovider/src/pages/db/edit/index.tsx b/frontend/providers/dbprovider/src/pages/db/edit/index.tsx
@@ -201,7 +201,7 @@ const EditApp = ({ dbName, tabType }: { dbName?: string; tabType?: 'form' | 'yam
           yamlList={yamlList}
           applyBtnText={applyBtnText}
           applyCb={() =>
-            formHook.handleSubmit((data) => openConfirm(submitSuccess(data)), submitError)()
+            formHook.handleSubmit((data) => openConfirm(() => submitSuccess(data))(), submitError)()
           }
         />
 

diff --git a/frontend/providers/template/public/images/ButtonEffect.svg b/frontend/providers/template/public/images/ButtonEffect.svg
diff --git a/frontend/providers/template/public/locales/en/common.json b/frontend/providers/template/public/locales/en/common.json
@@ -173,5 +173,12 @@
   "Installed": "Installed",
   "Kind": "Kind",
   "Component": "Component",
-  "No Applications": "No Applications"
-}
+  "No Applications": "No Applications",
+  "Home Page": "Home Page",
+  "Share": "Share",
+  "Share Link": "Share Link",
+  "One click deploy button": "One click deploy button",
+  "Html Part": "Html Part",
+  "Markdown Part": "Markdown Part",
+  "Button Effect": "Button Effect"
+}
diff --git a/frontend/providers/template/public/locales/zh/common.json b/frontend/providers/template/public/locales/zh/common.json
@@ -179,5 +179,12 @@
   "Installed": "我安装的",
   "Kind": "类型",
   "Component": "组件",
-  "No Applications": "暂无应用"
-}
+  "No Applications": "暂无应用",
+  "Home Page": "项目首页",
+  "Share": "分享",
+  "Share Link": "分享链接",
+  "One click deploy button": "一键部署按钮",
+  "Html Part": "Html 片段",
+  "Markdown Part": "Markdown 片段",
+  "Button Effect": "按钮效果"
+}