1

frontend/package-lock.json

@@ -21,10 +21,12 @@
         "@antv/x6-plugin-snapline": "^2.1.7",
         "@antv/x6-plugin-transform": "^2.1.8",
         "@antv/x6-react-shape": "^2.2.3",
+        "@hookform/resolvers": "^3.9.1",
         "@logicflow/core": "^2.0.9",
         "@logicflow/extension": "^2.0.13",
         "@monaco-editor/react": "^4.6.0",
         "@radix-ui/react-avatar": "^1.1.2",
+        "@radix-ui/react-label": "^2.1.1",
         "@radix-ui/react-progress": "^1.1.1",
         "@radix-ui/react-select": "^2.1.4",
         "@radix-ui/react-separator": "^1.1.1",
@@ -43,9 +45,11 @@
         "react": "^18.2.0",
         "react-diff-viewer-continued": "^3.4.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.54.2",
         "react-redux": "^9.0.4",
         "react-router-dom": "^6.21.0",
-        "recharts": "^2.15.0"
+        "recharts": "^2.15.0",
+        "zod": "^3.24.1"
       },
       "devDependencies": {
         "@types/dagre": "^0.7.52",
@@ -1659,6 +1663,15 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "license": "MIT"
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmmirror.com/@hookform/resolvers/-/resolvers-3.9.1.tgz",
+      "integrity": "sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -2145,6 +2158,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/@radix-ui/react-label/-/react-label-2.1.1.tgz",
+      "integrity": "sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
@@ -7429,6 +7465,22 @@
       "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "node_modules/react-hook-form": {
+      "version": "7.54.2",
+      "resolved": "https://registry.npmmirror.com/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.3.1.tgz",
@@ -9020,6 +9072,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmmirror.com/zod/-/zod-3.24.1.tgz",
+      "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/zustand": {
       "version": "4.5.5",
       "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.5.tgz",

frontend/package.json

@@ -23,10 +23,12 @@
     "@antv/x6-plugin-snapline": "^2.1.7",
     "@antv/x6-plugin-transform": "^2.1.8",
     "@antv/x6-react-shape": "^2.2.3",
+    "@hookform/resolvers": "^3.9.1",
     "@logicflow/core": "^2.0.9",
     "@logicflow/extension": "^2.0.13",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-separator": "^1.1.1",
@@ -45,9 +47,11 @@
     "react": "^18.2.0",
     "react-diff-viewer-continued": "^3.4.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.54.2",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.21.0",
-    "recharts": "^2.15.0"
+    "recharts": "^2.15.0",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@types/dagre": "^0.7.52",

frontend/pnpm-lock.yaml

@@ -47,6 +47,9 @@ importers:
       '@antv/x6-react-shape':
         specifier: ^2.2.3
         version: 2.2.3(@antv/x6@2.18.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@hookform/resolvers':
+        specifier: ^3.9.1
+        version: 3.9.1(react-hook-form@7.54.2(react@18.3.1))
       '@logicflow/core':
         specifier: ^2.0.9
         version: 2.0.9
@@ -59,6 +62,9 @@ importers:
       '@radix-ui/react-avatar':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-label':
+        specifier: ^2.1.1
+        version: 2.1.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-progress':
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -113,6 +119,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.3.1(react@18.3.1)
+      react-hook-form:
+        specifier: ^7.54.2
+        version: 7.54.2(react@18.3.1)
       react-redux:
         specifier: ^9.0.4
         version: 9.2.0(@types/react@18.3.16)(react@18.3.1)(redux@5.0.1)
@@ -122,6 +131,9 @@ importers:
       recharts:
         specifier: ^2.15.0
         version: 2.15.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      zod:
+        specifier: ^3.24.1
+        version: 3.24.1
     devDependencies:
       '@types/dagre':
         specifier: ^0.7.52
@@ -718,6 +730,11 @@ packages:
   '@floating-ui/utils@0.2.8':
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
 
+  '@hookform/resolvers@3.9.1':
+    resolution: {integrity: sha512-ud2HqmGBM0P0IABqoskKWI6PEf6ZDDBZkFqe2Vnl+mTHCEHzr3ISjjZyCwTjC/qpL25JC9aIDkloQejvMeq0ug==}
+    peerDependencies:
+      react-hook-form: ^7.0.0
+
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
@@ -913,6 +930,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-label@2.1.1':
+    resolution: {integrity: sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.1':
     resolution: {integrity: sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==}
     peerDependencies:
@@ -2872,6 +2902,12 @@ packages:
   react-fast-compare@3.2.2:
     resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
 
+  react-hook-form@7.54.2:
+    resolution: {integrity: sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -3414,6 +3450,9 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zod@3.24.1:
+    resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==}
+
   zustand@4.5.5:
     resolution: {integrity: sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==}
     engines: {node: '>=12.7.0'}
@@ -4099,6 +4138,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.8': {}
 
+  '@hookform/resolvers@3.9.1(react-hook-form@7.54.2(react@18.3.1))':
+    dependencies:
+      react-hook-form: 7.54.2(react@18.3.1)
+
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -4288,6 +4331,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.16
 
+  '@radix-ui/react-label@2.1.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.16
+      '@types/react-dom': 18.3.5(@types/react@18.3.16)
+
   '@radix-ui/react-popper@1.2.1(@types/react-dom@18.3.5(@types/react@18.3.16))(@types/react@18.3.16)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -6419,6 +6471,10 @@ snapshots:
 
   react-fast-compare@3.2.2: {}
 
+  react-hook-form@7.54.2(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   react-is@16.13.1: {}
 
   react-is@18.3.1: {}
@@ -6949,6 +7005,8 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
+  zod@3.24.1: {}
+
   zustand@4.5.5(@types/react@18.3.16)(immer@10.1.1)(react@18.3.1):
     dependencies:
       use-sync-external-store: 1.2.2(react@18.3.1)

frontend/public/favicon.svg

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-    <circle cx="16" cy="16" r="14" fill="#2196F3"/>
+  <rect width="32" height="32" fill="#FFFFFF"/>
-    <path d="M16 6a10 10 0 0 0-10 10 10 10 0 0 0 10 10 10 10 0 0 0 10-10h-2a8 8 0 0 1-8 8 8 8 0 0 1-8-8 8 8 0 0 1 8-8v-2z" fill="#FFFFFF"/>
+  <path d="M6 6h20v20H6z" fill="#000000"/>
-    <circle cx="16" cy="16" r="4" fill="#FFFFFF"/>
+  <path d="M10 10h12v12H10z" fill="#FFFFFF"/>
-    <path d="M17.5 14.5l1.5-1.5 1.5 1.5-1.5 1.5z" fill="#2196F3"/>
+  <path d="M14 14h4v4h-4z" fill="#000000"/>
-    <path d="M14.5 17.5l-1.5 1.5-1.5-1.5 1.5-1.5z" fill="#2196F3"/>
+  <path d="M6 6l4 4m16-4l-4 4M6 26l4-4m16 4l-4-4" stroke="#000000" stroke-width="2"/>
 </svg>

frontend/src/components/ui/form.tsx

@@ -0,0 +1,176 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

frontend/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

frontend/src/pages/Login/index.module.css

@@ -1,62 +1,84 @@
 .loginContainer {
-  height: 100vh;
+    min-height: 100vh;
-  width: 100vw;
+    display: flex;
-  display: flex;
+}
-  justify-content: center;
+
-  align-items: center;
+.leftSection {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    flex: 1;
+    background-color: black;
+    color: white;
+    padding: 2.5rem;
+    display: none;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+@media (min-width: 1024px) {
+    .leftSection {
+        display: flex;
+    }
+}
+
+.rightSection {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    background-color: white;
 }
 
 .loginBox {
-  width: 400px;
+    width: 100%;
-  padding: 40px;
+    max-width: 400px;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 16px;
-  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-  backdrop-filter: blur(4px);
 }
 
 .logo {
-  text-align: center;
+    text-align: center;
-  margin-bottom: 40px;
+    margin-bottom: 2rem;
-}
-
-.logo img {
-  width: 64px;
-  height: 64px;
-  margin-bottom: 16px;
 }
 
 .logo h1 {
-  font-size: 24px;
+    font-size: 1.875rem;
-  color: #333;
+    font-weight: 600;
-  margin: 0;
+    color: #000;
 }
 
 .input {
-  height: 50px;
+    width: 100%;
-  border-radius: 8px;
+    height: 2.5rem;
-  border: 1px solid #e8e8e8;
+    border-radius: 0.375rem;
-  transition: all 0.3s;
+    border: 1px solid #e2e8f0;
+    padding: 0.5rem 1rem;
+    margin-bottom: 1rem;
+    transition: all 0.2s;
+}
+
+.input:hover {
+    border-color: #cbd5e0;
 }
 
-.input:hover,
 .input:focus {
-  border-color: #764ba2;
+    border-color: #3182ce;
-  box-shadow: 0 0 0 2px rgba(118, 75, 162, 0.2);
+    box-shadow: 0 0 0 1px #3182ce;
 }
 
 .loginButton {
-  height: 50px;
+    width: 100%;
-  border-radius: 8px;
+    height: 2.5rem;
-  font-size: 16px;
+    background-color: #000;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
-  border: none;
+    border: none;
-  margin-top: 16px;
+    border-radius: 0.375rem;
-  transition: all 0.3s;
+    font-weight: 500;
+    transition: all 0.2s;
 }
 
 .loginButton:hover {
-  transform: translateY(-2px);
+    background-color: #1a1a1a;
-  box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
+}
+
+.loginButton:disabled {
+    background-color: #e2e8f0;
+    cursor: not-allowed;
 } 

frontend/src/pages/Login/index.tsx

@@ -75,63 +75,91 @@ const Login: React.FC = () => {
 
     return (
         <div className={styles.loginContainer}>
-            <div className={styles.loginBox}>
+            {/* 左侧区域 */}
-                <div className={styles.logo}>
+            <div className={styles.leftSection}>
-                    <h1>管理系统</h1>
+                <div>
+                    <h1 className="text-xl font-bold">Deploy Ease Platform</h1>
                 </div>
-                <Form<LoginForm>
+                <div className="space-y-4">
-                    form={form}
+                    <blockquote className="text-2xl font-medium">
-                    name="login"
+                        "这个平台帮助我们显著提升了部署效率，让团队可以更专注于业务开发。"
-                    onFinish={handleFinish}
+                    </blockquote>
-                    autoComplete="off"
+                    <p className="text-lg">张工</p>
-                    size="large"
+                    <p className="text-zinc-400">高级运维工程师</p>
-                >
+                </div>
-                    <Form.Item
+            </div>
-                        name="tenantId"
-                        rules={[{required: true, message: '请选择租户!'}]}
-                    >
-                        <Select
-                            placeholder="请选择租户"
-                            options={tenants.map(tenant => ({
-                                label: tenant.name,
-                                value: tenant.code
-                            }))}
-                            className={styles.input}
-                        />
-                    </Form.Item>
 
-                    <Form.Item
+            {/* 右侧登录区域 */}
-                        name="username"
+            <div className={styles.rightSection}>
-                        rules={[{required: true, message: '请输入用户名!'}]}
+                <div className={styles.loginBox}>
+                    <div className={styles.logo}>
+                        <h1>管理系统</h1>
+                    </div>
+                    <Form<LoginForm>
+                        form={form}
+                        name="login"
+                        onFinish={handleFinish}
+                        autoComplete="off"
+                        size="large"
                     >
-                        <Input 
+                        <Form.Item
-                            placeholder="用户名" 
+                            name="tenantId"
-                            className={styles.input}
+                            rules={[{required: true, message: '请选择租户!'}]}
-                        />
-                    </Form.Item>
-
-                    <Form.Item
-                        name="password"
-                        rules={[{required: true, message: '请输入密码!'}]}
-                    >
-                        <Input.Password 
-                            placeholder="密码" 
-                            className={styles.input}
-                        />
-                    </Form.Item>
-
-                    <Form.Item>
-                        <Button 
-                            type="primary" 
-                            htmlType="submit" 
-                            block 
-                            loading={loading}
-                            className={styles.loginButton}
                         >
-                            登录
+                            <Select
-                        </Button>
+                                placeholder="请选择租户"
-                    </Form.Item>
+                                options={tenants.map(tenant => ({
-                </Form>
+                                    label: tenant.name,
+                                    value: tenant.code
+                                }))}
+                                className={styles.input}
+                            />
+                        </Form.Item>
+
+                        <Form.Item
+                            name="username"
+                            rules={[{required: true, message: '请输入用户名!'}]}
+                        >
+                            <Input 
+                                placeholder="用户名" 
+                                className={styles.input}
+                            />
+                        </Form.Item>
+
+                        <Form.Item
+                            name="password"
+                            rules={[{required: true, message: '请输入密码!'}]}
+                        >
+                            <Input.Password 
+                                placeholder="密码" 
+                                className={styles.input}
+                            />
+                        </Form.Item>
+
+                        <Form.Item>
+                            <Button 
+                                type="primary" 
+                                htmlType="submit" 
+                                block 
+                                loading={loading}
+                                className={styles.loginButton}
+                            >
+                                登录
+                            </Button>
+                        </Form.Item>
+                    </Form>
+
+                    <div className="text-center text-sm text-gray-500 mt-4">
+                        登录即表示您同意我们的
+                        <a href="#" className="text-blue-600 hover:text-blue-800 mx-1">
+                            服务条款
+                        </a>
+                        和
+                        <a href="#" className="text-blue-600 hover:text-blue-800 mx-1">
+                            隐私政策
+                        </a>
+                    </div>
+                </div>
             </div>
         </div>
     );