update

lerte · Apr 15, 2024 · 36e849e · 36e849e
1 parent db3c9ac
commit 36e849e
Show file tree

Hide file tree

Showing 10 changed files with 860 additions and 23 deletions.
diff --git a/app.go b/app.go
@@ -2,6 +2,7 @@ package main
 
 import (
 	"context"
+	"net/http"
 	"runtime/debug"
 	"zroker/zrok"
 
@@ -105,3 +106,11 @@ func (a *App) OpenExternal(link string) {
 	runtime.BrowserOpenURL(a.ctx, link)
 }
 
+// Request Url
+func (a *App) Request(url string) int {
+
+	resp,_ := http.Get(url+"/api/v1/invite")
+
+	return resp.StatusCode
+}
+
diff --git a/frontend/src/Zroker.tsx b/frontend/src/Zroker.tsx
@@ -1,9 +1,10 @@
 import Login from "./components/Login";
-import { Sun, Moon } from "lucide-react";
+import { Sun, Moon, Github, Home } from "lucide-react";
 import Overview from "./components/Overview";
 import { useEnable } from "./contexts/Enable";
 import { Theme } from "./hooks/useAutoDark";
 import { Box, Button, Flex } from "@radix-ui/themes";
+import { OpenExternal } from "../wailsjs/go/main/App";
 
 const Zroker = ({
   theme,
@@ -18,6 +19,26 @@ const Zroker = ({
     <Flex className="h-dvh p-4">
       {enable ? <Overview /> : <Login />}
       <Box className="absolute right-12 top-12 !flex gap-4">
+        <Button
+          size="4"
+          color="cyan"
+          radius="full"
+          variant="ghost"
+          className="!mr-1"
+          onClick={() => OpenExternal("https://zroker.com")}
+        >
+          <Home />
+        </Button>
+        <Button
+          size="4"
+          color="gray"
+          radius="full"
+          variant="ghost"
+          className="!mr-1"
+          onClick={() => OpenExternal("https://github.com/lerte/zroker")}
+        >
+          <Github />
+        </Button>
         <Button
           size="4"
           radius="full"

diff --git a/frontend/src/components/FrontendEndpoint.tsx b/frontend/src/components/FrontendEndpoint.tsx
@@ -0,0 +1,47 @@
+import { useState } from "react";
+import { Share } from "../../types/zrok";
+import { Text, Link, Tooltip } from "@radix-ui/themes";
+import { OpenExternal, Request } from "../../wailsjs/go/main/App";
+
+const FrontendEndpoint = ({ share }: { share: Share }) => {
+  const [active, setActive] = useState(false);
+  const openExternal = (
+    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+    url: string
+  ) => {
+    event.stopPropagation();
+    if (url == "private") {
+      return;
+    }
+    OpenExternal(url);
+  };
+
+  const getStatus = async () => {
+    const statusCode = await Request(share.frontendEndpoint);
+    if (statusCode == 404) {
+      setActive(false);
+    } else {
+      setActive(true);
+    }
+  };
+
+  getStatus();
+
+  return (
+    <Link
+      href="#"
+      onClick={(event) => openExternal(event, share.frontendEndpoint)}
+    >
+      <span
+        className={`inline-block mr-2 size-3 rounded-full shadow-inner ${
+          active ? "border-green-900 bg-green-500" : "border-red-900 bg-red-500"
+        }`}
+      ></span>
+      <Tooltip content={share.frontendEndpoint}>
+        <Text>{share.frontendEndpoint.slice(0, 20)}</Text>
+      </Tooltip>
+    </Link>
+  );
+};
+
+export default FrontendEndpoint;
diff --git a/frontend/src/components/Overview.tsx b/frontend/src/components/Overview.tsx
@@ -19,14 +19,15 @@ import {
   IconButton,
   Separator,
 } from "@radix-ui/themes";
+import FrontendEndpoint from "./FrontendEndpoint";
 
 type Environments = {
   environment: Environment[];
   shares?: Share[];
 };
 
 const Page = () => {
-  // 当前的Share
+  // current Share
   const [current, setCurrent] = useState<Partial<Share>>({} as Share);
   const [loading, setLoading] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
@@ -65,6 +66,17 @@ const Page = () => {
     OpenExternal(url);
   };
 
+  const handleCopy = (str: string | undefined) => {
+    navigator.clipboard
+      .writeText(str ?? "")
+      .then(() => {
+        toast.success("Copy successful");
+      })
+      .catch(() => {
+        toast.error("Copy failed");
+      });
+  };
+
   const handleDelete = async (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     share: Partial<Share>
@@ -158,10 +170,10 @@ const Page = () => {
             <Table.Row>
               <Table.ColumnHeaderCell>backendMode</Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell>shareMode</Table.ColumnHeaderCell>
-              <Table.ColumnHeaderCell>frontendEndpoint</Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell>
                 backendProxyEndpoint
               </Table.ColumnHeaderCell>
+              <Table.ColumnHeaderCell>frontendEndpoint</Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell>createdAt</Table.ColumnHeaderCell>
               <Table.ColumnHeaderCell>actions</Table.ColumnHeaderCell>
             </Table.Row>
@@ -186,7 +198,7 @@ const Page = () => {
                 <Table.Cell>
                   <Badge
                     size="3"
-                    color="cyan"
+                    color={share.shareMode == "private" ? "red" : "green"}
                     radius="full"
                     variant="soft"
                   >
@@ -207,26 +219,20 @@ const Page = () => {
                   {share.frontendEndpoint == "private" ? (
                     <Text>{share.frontendEndpoint}</Text>
                   ) : (
-                    <Link
-                      href="#"
-                      onClick={(event) =>
-                        openExternal(event, share.frontendEndpoint)
-                      }
-                    >
-                      {share.frontendEndpoint}
-                    </Link>
+                    <FrontendEndpoint share={share} />
                   )}
                 </Table.Cell>
                 <Table.Cell>
-                  {dayjs(share.createdAt).format("YYYY/M/DD HH:mm:ss")}
+                  {dayjs(share.createdAt).format("M/DD HH:mm:ss")}
                 </Table.Cell>
                 <Table.Cell>
                   <Button
-                    variant="solid"
+                    radius="full"
+                    variant="ghost"
                     onClick={(event) => handleDelete(event, share)}
                     loading={current.token == share.token && isLoading}
                   >
-                    <Delete /> Delete
+                    <Delete />
                   </Button>
                 </Table.Cell>
               </Table.Row>
@@ -265,7 +271,10 @@ const Page = () => {
               >
                 {current.token}
               </Text>
-              <IconButton variant="ghost">
+              <IconButton
+                variant="ghost"
+                onClick={() => handleCopy(current.token)}
+              >
                 <CopyIcon className="cursor-pointer" />
               </IconButton>
             </Flex>
@@ -282,7 +291,10 @@ const Page = () => {
               >
                 {current.zId}
               </Text>
-              <IconButton variant="ghost">
+              <IconButton
+                variant="ghost"
+                onClick={() => handleCopy(current.zId)}
+              >
                 <CopyIcon className="cursor-pointer" />
               </IconButton>
             </Flex>

diff --git a/frontend/wailsjs/go/main/App.d.ts b/frontend/wailsjs/go/main/App.d.ts
@@ -24,6 +24,8 @@ export function Overview():Promise<string>;
 
 export function Quit():Promise<void>;
 
+export function Request(arg1:string):Promise<number>;
+
 export function Sharing(arg1:sdk.ShareRequest):Promise<sdk.Share>;
 
 export function Version():Promise<string>;
diff --git a/frontend/wailsjs/go/main/App.js b/frontend/wailsjs/go/main/App.js
@@ -46,6 +46,10 @@ export function Quit() {
   return window['go']['main']['App']['Quit']();
 }
 
+export function Request(arg1) {
+  return window['go']['main']['App']['Request'](arg1);
+}
+
 export function Sharing(arg1) {
   return window['go']['main']['App']['Sharing'](arg1);
 }