feat: add version badge in ui

boot/Dockerfile

@@ -1,8 +1,11 @@
+ARG VERSION="1.0.0"
+
 FROM eclipse-temurin:17-jre
+
 LABEL authors="ReaJason<[email protected]>"
 
 WORKDIR /app
-COPY build/libs/boot.jar app.jar
+COPY build/libs/boot-${ARG}.jar app.jar
 
 ENV JAVA_OPTS="" \
     INTER_JAVA_OPTS="--add-opens=java.base/java.util=ALL-UNNAMED --add-opens=java.xml/com.sun.org.apache.xalan.internal.xsltc.trax=ALL-UNNAMED --add-opens=java.xml/com.sun.org.apache.xalan.internal.xsltc.runtime=ALL-UNNAMED"

boot/src/main/java/com/reajason/javaweb/boot/controller/VersionController.java

@@ -0,0 +1,25 @@
+package com.reajason.javaweb.boot.controller;
+
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.web.bind.annotation.CrossOrigin;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * @author ReaJason
+ * @since 2025/2/2
+ */
+@RestController
+@CrossOrigin("*")
+@RequestMapping("/version")
+public class VersionController {
+
+    @Value("${spring.application.version}")
+    String version;
+
+    @GetMapping
+    public String version() {
+        return version;
+    }
+}

web/src/components/version-badge.tsx

@@ -0,0 +1,30 @@
+import { env } from "@/config";
+import { useQuery } from "@tanstack/react-query";
+import { LoaderCircle } from "lucide-react";
+import type React from "react";
+import { Button } from "./ui/button";
+
+const VersionBadge: React.FC = () => {
+  const { isPending, data } = useQuery<string>({
+    queryKey: ["version"],
+    queryFn: async () => {
+      const response = await fetch(`${env.API_URL}/version`);
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      return await response.text();
+    },
+  });
+
+  return (
+    <div className="flex items-center space-x-2">
+      <Button
+        className={`rounded-full ${data && "bg-green-500 text-white"}`}
+        size="sm"
+        variant={isPending ? "ghost" : "default"}
+      >
+        {isPending ? <LoaderCircle className="h-3.5 w-3.5 animate-spin" /> : <span>v{data}</span>}
+      </Button>
+    </div>
+  );
+};
+
+export default VersionBadge;

web/src/routes/__root.tsx

@@ -2,6 +2,7 @@ import { LanguageSwitcher } from "@/components/language-switcher";
 import { ModeToggle } from "@/components/mode-toggle.tsx";
 import { ThemeProvider } from "@/components/theme-provider.tsx";
 import { Button } from "@/components/ui/button.tsx";
+import VersionBadge from "@/components/version-badge";
 import { Outlet, createRootRoute } from "@tanstack/react-router";
 
 export const Route = createRootRoute({
@@ -18,6 +19,7 @@ function RootComponent() {
               <h2 className="text-lg font-semibold">MemShellParty - JavaWeb</h2>
             </div>
             <div className="flex gap-1 mr-4">
+              <VersionBadge />
               <LanguageSwitcher />
               <Button
                 variant="ghost"