feat(repository): Optimize time display format and add repository clone function

Author: lazhenyi

script/nginx.conf

@@ -38,6 +38,17 @@ http {
             proxy_read_timeout 60s;
         }
 
+        location /git/ {
+            proxy_pass http://localhost:8080;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_connect_timeout 60s;
+            proxy_send_timeout 60s;
+            proxy_read_timeout 60s;
+        }
+
         location / {
             try_files $uri $uri/ /index.html;
         }

views/src/app/repository/files.tsx

@@ -173,7 +173,7 @@ export const RepoFiles = () => {
                                 <div className="flex items-center">
                                     {commits[idx] && (
                                         <>
-                                            {new Date(commits[idx].timestamp * 1000).toString()}
+                                            {getTimeStr(commits[idx].timestamp * 1000)}
                                         </>
                                     )}
                                 </div>
@@ -276,4 +276,27 @@ export const RepoFiles = () => {
             </div>
         </div>
     );
-};
+};
+
+
+export function getTimeStr(timestamp:number) {
+    const now = new Date();
+    const date = new Date(timestamp);
+    // @ts-ignore
+    const diff = (now - date) / 1000;
+
+    if (diff < 60) {
+        return "just";
+    } else if (diff < 3600) {
+        return Math.floor(diff / 60) + " minutes ago";
+    } else if (diff < 86400) {
+        return Math.floor(diff / 3600) + " hours ago";
+    } else if (diff < 604800) {
+        return Math.floor(diff / 86400) + " days ago";
+    } else {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
+    }
+}

views/src/app/repository/layout.tsx

@@ -2,9 +2,11 @@ import { useEffect, useState } from "react";
 import {Outlet, useNavigate, useParams,} from "react-router-dom";
 import { HeaderShell } from "@/component/shell/Header.tsx";
 import axios from "axios";
-import { Tabs } from "@mantine/core";
+import {Tabs} from "@mantine/core";
 import { Box, Card, Text, Button, Group } from "@mantine/core";
-import { AlertCircle, Loader2 } from "lucide-react";
+import {AlertCircle, CopyIcon, Loader2} from "lucide-react";
+import {useClipboard} from "@mantine/hooks";
+import {notifications} from "@mantine/notifications";
 
 interface RepoApiResponse {
     code: number;
@@ -42,6 +44,7 @@ export const Repolayout = () => {
     const [repoData, setRepoData] = useState<RepoData | null>(null);
     const nav = useNavigate();
     const [type, setType] = useState('files');
+    const clip = useClipboard()
     useEffect(() => {
         const urls = window.location.href.split("/");
         setType("files")
@@ -121,19 +124,56 @@ export const Repolayout = () => {
     }
 
     const { repo: repository } = repoData;
+
+    function copyText(arg0: string) {
+        clip.copy(arg0)
+        notifications.show({
+            message: "Copy Success",
+            color: "green"
+        })
+    }
+
     return (
         <>
             <HeaderShell />
             <Box mt={64} p={4} style={{ maxWidth: '1200px', margin: '0 auto', width: '100%' }}>
-                <Card mb={4}>
+                <Card mb={4} >
                     <Box p={4}>
                         <Group justify="space-between" mb={2}>
                             <Text size="2xl">{owner}/{repository.name}</Text>
                             <Text color="dimmed">
                                 {new Date(repository.updated_at).toLocaleDateString()}
                             </Text>
                         </Group>
-                        <Text color="dimmed" mb={4}>{repository.description || 'No description provided'}</Text>
+                        <Box style={{
+                            justifyContent: "space-between",
+                            display: "flex",
+                            alignItems: "center",
+                        }}>
+                            <Text color="dimmed" mb={4}>{repository.description || 'No description provided'}</Text>
+                            <div style={{
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "1rem",
+                            }}>
+                                <div style={{
+                                    border: "1px solid #ccc",
+                                    borderRadius: "4px",
+                                    padding: "0.5rem",
+                                    display: "flex",
+                                    backgroundColor: "#f5f5f5",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    marginBottom: "0.5rem",
+                                    gap: "0.5rem"
+                                }}>
+                                    {window.location.protocol + "//"}{window.location.host + "/git/" + owner + "/" + repository.name + ".git"}
+                                    <CopyIcon onClick={() => {
+                                        copyText(window.location.protocol + "//" + window.location.host + "/git/" + owner + "/" + repository.name + ".git");
+                                    }}/>
+                                </div>
+                            </div>
+                        </Box>
                     </Box>
                 </Card>
                 <Tabs defaultValue={type} value={type} onChange={(value) => {

views/src/app/root/RepoList.tsx

@@ -2,6 +2,7 @@ import {Input, Pagination} from "@mantine/core";
 import {useEffect, useState} from "react";
 import axios from "axios";
 import {useNavigate} from "react-router-dom";
+import {getTimeStr} from "@/app/repository/files.tsx";
 export interface RepoListTypes {
     name: string,
     description: string,
@@ -98,10 +99,10 @@ export const RootRepoList = () => {
                                     color: '#999'
                                 }}>
                     <span>
-                        Created: {new Date(repo.created_at).toString()}
+                        Created: {getTimeStr(new Date(repo.created_at).getTime())}
                     </span>
                     <span>
-                        Updated: {new Date(repo.updated_at).toString()}
+                        Updated: {getTimeStr(new Date(repo.updated_at).getTime())}
                     </span>
                                 </div>
                             </div>

views/src/component/shell/Header.tsx

@@ -1,6 +1,6 @@
 import {Link, useNavigate} from "react-router-dom";
 import useUserContext from "@/store/useUserContext.tsx";
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import {Button} from "@mantine/core";
 
 export const HeaderShell = () => {
@@ -9,6 +9,10 @@ export const HeaderShell = () => {
     useEffect(() => {
         user.refresh();
     }, []);
+    const [Width, setWidth] = useState(window.innerWidth);
+    useEffect(() => {
+        setWidth(window.innerWidth)
+    }, [window.innerWidth]);
     return(
         <div style={{
             background: "white",
@@ -17,16 +21,20 @@ export const HeaderShell = () => {
             display: "flex",
             borderBottom: "0.1rem solid rgb(217, 217, 217)",
         }}>
-            <div style={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                padding: "0 1rem",
-            }}>
-                <img src="/jzflow-logo-rust.png" alt="logo" style={{
-                    height: "32px",
-                }}/>
-            </div>
+            {
+                Width > 768 && (
+                    <div style={{
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        padding: "0 1rem",
+                    }}>
+                        <img src="/jzflow-logo-rust.png" alt="logo" style={{
+                            height: "32px",
+                        }}/>
+                    </div>
+                )
+            }
             <div style={{
                 display: "flex",
                 alignItems: "center",