From d1afb060f4f8d3932a35333d4450ac1be50df5d6 Mon Sep 17 00:00:00 2001
From: yudachao <290945266@qq.com>
Date: Fri, 3 Apr 2026 14:25:42 +0800
Subject: [PATCH 1/4] style(auth): Capitalize workspace badge label

---
 features/auth/components/auth-shell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/features/auth/components/auth-shell.tsx b/features/auth/components/auth-shell.tsx
index 48fc77c..8c94d2b 100644
--- a/features/auth/components/auth-shell.tsx
+++ b/features/auth/components/auth-shell.tsx
@@ -18,7 +18,7 @@ export function AuthShell({ title, subtitle, children }: AuthShellProps) {
         <aside className="relative hidden bg-[linear-gradient(135deg,#0f172a_0%,#1e293b_48%,#155e75_100%)] p-10 text-white md:flex md:flex-col md:justify-between">
           <div>
             <p className="inline-flex items-center rounded-full border border-white/25 bg-white/10 px-3 py-1 text-xs tracking-[0.18em] uppercase">
-              PPT Workspace
+              PPT WORKSPACE
             </p>
             <h1 className="mt-6 text-4xl leading-tight font-semibold tracking-tight">
               {title}

From efc0970196e5f5e7a57ee9e2b03d62ac4930ca70 Mon Sep 17 00:00:00 2001
From: yudachao <290945266@qq.com>
Date: Tue, 7 Apr 2026 15:44:32 +0800
Subject: [PATCH 2/4] feat(user-create): add user creation form with validation
 flow

---
 app/api/users/route.ts                        |  38 +++++
 app/users/new/page.tsx                        |   9 ++
 features/user-create/api/create-user.ts       |  22 +++
 .../components/user-create-form.tsx           | 148 ++++++++++++++++++
 features/user-create/schema.test.ts           |  91 +++++++++++
 features/user-create/schema.ts                |  41 +++++
 features/user-create/submit.test.ts           | 106 +++++++++++++
 features/user-create/submit.ts                |  58 +++++++
 8 files changed, 513 insertions(+)
 create mode 100644 app/api/users/route.ts
 create mode 100644 app/users/new/page.tsx
 create mode 100644 features/user-create/api/create-user.ts
 create mode 100644 features/user-create/components/user-create-form.tsx
 create mode 100644 features/user-create/schema.test.ts
 create mode 100644 features/user-create/schema.ts
 create mode 100644 features/user-create/submit.test.ts
 create mode 100644 features/user-create/submit.ts

diff --git a/app/api/users/route.ts b/app/api/users/route.ts
new file mode 100644
index 0000000..d626c82
--- /dev/null
+++ b/app/api/users/route.ts
@@ -0,0 +1,38 @@
+import { z } from "zod";
+
+import { apiError, apiOk } from "@/lib/api/response";
+import { createUserRoleOptions } from "@/features/user-create/schema";
+
+const createUserPayloadSchema = z.object({
+  username: z.string().trim().min(3).max(20),
+  email: z.string().trim().email(),
+  role: z.enum(createUserRoleOptions),
+  password: z.string().min(8),
+});
+
+export async function POST(request: Request) {
+  let payload: unknown;
+
+  try {
+    payload = await request.json();
+  } catch {
+    payload = {};
+  }
+
+  const parsed = createUserPayloadSchema.safeParse(payload);
+  if (!parsed.success) {
+    return apiError("Invalid payload", "INVALID_PAYLOAD", 400);
+  }
+
+  return apiOk(
+    {
+      user: {
+        id: crypto.randomUUID(),
+        username: parsed.data.username,
+        email: parsed.data.email,
+        role: parsed.data.role,
+      },
+    },
+    201,
+  );
+}
diff --git a/app/users/new/page.tsx b/app/users/new/page.tsx
new file mode 100644
index 0000000..7c457e2
--- /dev/null
+++ b/app/users/new/page.tsx
@@ -0,0 +1,9 @@
+import { UserCreateForm } from "@/features/user-create/components/user-create-form";
+
+export default function UserCreatePage() {
+  return (
+    <main className="mx-auto w-full max-w-2xl px-6 py-10">
+      <UserCreateForm />
+    </main>
+  );
+}
diff --git a/features/user-create/api/create-user.ts b/features/user-create/api/create-user.ts
new file mode 100644
index 0000000..7d6cefa
--- /dev/null
+++ b/features/user-create/api/create-user.ts
@@ -0,0 +1,22 @@
+import { requestJson } from "@/features/shared/api/request-json";
+import type { CreateUserPayload, CreateUserRole } from "@/features/user-create/schema";
+
+export type CreateUserResponse = {
+  ok: true;
+  user: {
+    id: string;
+    username: string;
+    email: string;
+    role: CreateUserRole;
+  };
+};
+
+export async function createUser(payload: CreateUserPayload) {
+  return requestJson<CreateUserResponse>("/api/users", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(payload),
+  });
+}
diff --git a/features/user-create/components/user-create-form.tsx b/features/user-create/components/user-create-form.tsx
new file mode 100644
index 0000000..9517fd4
--- /dev/null
+++ b/features/user-create/components/user-create-form.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { createUser } from "@/features/user-create/api/create-user";
+import {
+  createUserFormSchema,
+  createUserRoleOptions,
+  type CreateUserFormValues,
+} from "@/features/user-create/schema";
+import { createSubmitCreateUser } from "@/features/user-create/submit";
+
+const roleLabelMap: Record<(typeof createUserRoleOptions)[number], string> = {
+  admin: "管理员",
+  editor: "编辑者",
+  viewer: "只读用户",
+};
+
+const defaultValues: CreateUserFormValues = {
+  username: "",
+  email: "",
+  role: "",
+  password: "",
+  confirmPassword: "",
+};
+
+export function UserCreateForm() {
+  const form = useForm<CreateUserFormValues>({
+    resolver: zodResolver(createUserFormSchema),
+    defaultValues,
+  });
+
+  const submitCreateUser = useMemo(
+    () =>
+      createSubmitCreateUser({
+        createUser,
+        onSuccess: () => {
+          toast.success("用户创建成功");
+        },
+        onError: (message) => {
+          toast.error(message || "创建用户失败");
+        },
+      }),
+    [],
+  );
+
+  const onSubmit = form.handleSubmit(async (values) => {
+    const result = await submitCreateUser(values);
+
+    if (!result.ok) {
+      if (result.reason === "validation" && result.fieldErrors) {
+        for (const [name, messages] of Object.entries(result.fieldErrors)) {
+          if (!messages?.length) continue;
+          form.setError(name as keyof CreateUserFormValues, { message: messages[0] });
+        }
+      }
+      return;
+    }
+
+    form.reset(defaultValues);
+  });
+
+  return (
+    <form onSubmit={onSubmit} className="grid gap-5 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div>
+        <h1 className="text-2xl font-semibold text-slate-900">创建用户</h1>
+        <p className="mt-1 text-sm text-slate-500">填写以下信息，创建一个新用户账号。</p>
+      </div>
+
+      <div className="grid gap-2">
+        <label htmlFor="username" className="text-sm font-medium text-slate-700">
+          用户名
+        </label>
+        <Input id="username" placeholder="请输入用户名" {...form.register("username")} />
+        {form.formState.errors.username ? (
+          <p className="text-sm text-rose-600">{form.formState.errors.username.message}</p>
+        ) : null}
+      </div>
+
+      <div className="grid gap-2">
+        <label htmlFor="email" className="text-sm font-medium text-slate-700">
+          邮箱
+        </label>
+        <Input id="email" type="email" placeholder="user@example.com" {...form.register("email")} />
+        {form.formState.errors.email ? (
+          <p className="text-sm text-rose-600">{form.formState.errors.email.message}</p>
+        ) : null}
+      </div>
+
+      <div className="grid gap-2">
+        <label htmlFor="role" className="text-sm font-medium text-slate-700">
+          角色
+        </label>
+        <select
+          id="role"
+          className="h-9 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring"
+          {...form.register("role")}
+        >
+          <option value="">请选择角色</option>
+          {createUserRoleOptions.map((role) => (
+            <option key={role} value={role}>
+              {roleLabelMap[role]}
+            </option>
+          ))}
+        </select>
+        {form.formState.errors.role ? (
+          <p className="text-sm text-rose-600">{form.formState.errors.role.message}</p>
+        ) : null}
+      </div>
+
+      <div className="grid gap-2">
+        <label htmlFor="password" className="text-sm font-medium text-slate-700">
+          密码
+        </label>
+        <Input id="password" type="password" placeholder="请输入密码" {...form.register("password")} />
+        {form.formState.errors.password ? (
+          <p className="text-sm text-rose-600">{form.formState.errors.password.message}</p>
+        ) : null}
+      </div>
+
+      <div className="grid gap-2">
+        <label htmlFor="confirmPassword" className="text-sm font-medium text-slate-700">
+          确认密码
+        </label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          placeholder="请再次输入密码"
+          {...form.register("confirmPassword")}
+        />
+        {form.formState.errors.confirmPassword ? (
+          <p className="text-sm text-rose-600">{form.formState.errors.confirmPassword.message}</p>
+        ) : null}
+      </div>
+
+      <div className="flex justify-end">
+        <Button type="submit" disabled={form.formState.isSubmitting}>
+          {form.formState.isSubmitting ? "创建中..." : "创建用户"}
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/features/user-create/schema.test.ts b/features/user-create/schema.test.ts
new file mode 100644
index 0000000..b014185
--- /dev/null
+++ b/features/user-create/schema.test.ts
@@ -0,0 +1,91 @@
+import { describe, expect, test } from "bun:test";
+
+import { createUserFormSchema } from "@/features/user-create/schema";
+
+describe("createUserFormSchema", () => {
+  test("requires all required fields", () => {
+    const parsed = createUserFormSchema.safeParse({});
+
+    expect(parsed.success).toBe(false);
+    if (parsed.success) return;
+
+    expect(parsed.error.flatten().fieldErrors.username?.length).toBeGreaterThan(0);
+    expect(parsed.error.flatten().fieldErrors.email?.length).toBeGreaterThan(0);
+    expect(parsed.error.flatten().fieldErrors.role?.length).toBeGreaterThan(0);
+    expect(parsed.error.flatten().fieldErrors.password?.length).toBeGreaterThan(0);
+    expect(parsed.error.flatten().fieldErrors.confirmPassword?.length).toBeGreaterThan(0);
+  });
+
+  test("validates username length", () => {
+    const tooShort = createUserFormSchema.safeParse({
+      username: "ab",
+      email: "user@example.com",
+      role: "admin",
+      password: "password123",
+      confirmPassword: "password123",
+    });
+
+    expect(tooShort.success).toBe(false);
+
+    const tooLong = createUserFormSchema.safeParse({
+      username: "a".repeat(21),
+      email: "user@example.com",
+      role: "admin",
+      password: "password123",
+      confirmPassword: "password123",
+    });
+
+    expect(tooLong.success).toBe(false);
+  });
+
+  test("validates email format", () => {
+    const parsed = createUserFormSchema.safeParse({
+      username: "validname",
+      email: "not-an-email",
+      role: "admin",
+      password: "password123",
+      confirmPassword: "password123",
+    });
+
+    expect(parsed.success).toBe(false);
+  });
+
+  test("requires role selection", () => {
+    const parsed = createUserFormSchema.safeParse({
+      username: "validname",
+      email: "user@example.com",
+      role: "",
+      password: "password123",
+      confirmPassword: "password123",
+    });
+
+    expect(parsed.success).toBe(false);
+  });
+
+  test("validates password length", () => {
+    const parsed = createUserFormSchema.safeParse({
+      username: "validname",
+      email: "user@example.com",
+      role: "admin",
+      password: "1234567",
+      confirmPassword: "1234567",
+    });
+
+    expect(parsed.success).toBe(false);
+  });
+
+  test("requires confirmPassword to match password", () => {
+    const parsed = createUserFormSchema.safeParse({
+      username: "validname",
+      email: "user@example.com",
+      role: "admin",
+      password: "password123",
+      confirmPassword: "password456",
+    });
+
+    expect(parsed.success).toBe(false);
+    if (parsed.success) return;
+
+    expect(parsed.error.flatten().fieldErrors.confirmPassword?.[0]).toContain("一致");
+  });
+});
diff --git a/features/user-create/schema.ts b/features/user-create/schema.ts
new file mode 100644
index 0000000..b81f3c0
--- /dev/null
+++ b/features/user-create/schema.ts
@@ -0,0 +1,41 @@
+import { z } from "zod";
+
+export const createUserRoleOptions = ["admin", "editor", "viewer"] as const;
+
+const createUserRoleSchema = z.enum(createUserRoleOptions, {
+  error: "请选择有效角色",
+});
+
+export const createUserFormSchema = z
+  .object({
+    username: z
+      .string({ error: "请输入用户名" })
+      .trim()
+      .min(1, "请输入用户名")
+      .min(3, "用户名长度至少 3 位")
+      .max(20, "用户名长度不能超过 20 位"),
+    email: z
+      .string({ error: "请输入邮箱" })
+      .trim()
+      .min(1, "请输入邮箱")
+      .email("请输入有效邮箱地址"),
+    role: z
+      .string({ error: "请选择角色" })
+      .trim()
+      .min(1, "请选择角色")
+      .pipe(createUserRoleSchema),
+    password: z
+      .string({ error: "请输入密码" })
+      .min(1, "请输入密码")
+      .min(8, "密码长度至少 8 位"),
+    confirmPassword: z.string({ error: "请确认密码" }).min(1, "请确认密码"),
+  })
+  .refine((value) => value.password === value.confirmPassword, {
+    path: ["confirmPassword"],
+    message: "两次密码输入必须一致",
+  });
+
+export type CreateUserRole = z.infer<typeof createUserRoleSchema>;
+export type CreateUserFormValues = z.input<typeof createUserFormSchema>;
+export type CreateUserFormOutput = z.output<typeof createUserFormSchema>;
+export type CreateUserPayload = Omit<CreateUserFormOutput, "confirmPassword">;
diff --git a/features/user-create/submit.test.ts b/features/user-create/submit.test.ts
new file mode 100644
index 0000000..46aa256
--- /dev/null
+++ b/features/user-create/submit.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, mock, test } from "bun:test";
+
+import { createSubmitCreateUser } from "@/features/user-create/submit";
+
+const validValues = {
+  username: "validname",
+  email: "user@example.com",
+  role: "admin" as const,
+  password: "password123",
+  confirmPassword: "password123",
+};
+
+describe("createSubmitCreateUser", () => {
+  test("does not submit when validation fails", async () => {
+    const createUser = mock(async () => ({ id: "user-1" }));
+    const submitCreateUser = createSubmitCreateUser({ createUser });
+
+    const result = await submitCreateUser({ ...validValues, email: "invalid-email" });
+
+    expect(result.ok).toBe(false);
+    if (result.ok) return;
+
+    expect(result.reason).toBe("validation");
+    expect(createUser).toHaveBeenCalledTimes(0);
+  });
+
+  test("calls createUser when validation passes", async () => {
+    const createUser = mock(async () => ({ id: "user-1" }));
+    const submitCreateUser = createSubmitCreateUser({ createUser });
+
+    const result = await submitCreateUser(validValues);
+
+    expect(result.ok).toBe(true);
+    expect(createUser).toHaveBeenCalledTimes(1);
+  });
+
+  test("submits payload without confirmPassword", async () => {
+    const createUser = mock(async () => ({ id: "user-1" }));
+    const submitCreateUser = createSubmitCreateUser({ createUser });
+
+    await submitCreateUser(validValues);
+
+    const payload = createUser.mock.calls[0]?.[0] as Record<string, unknown>;
+    expect(payload).toBeDefined();
+    expect(Object.hasOwn(payload, "confirmPassword")).toBe(false);
+    expect(payload.username).toBe(validValues.username);
+    expect(payload.email).toBe(validValues.email);
+    expect(payload.role).toBe(validValues.role);
+    expect(payload.password).toBe(validValues.password);
+  });
+
+  test("prevents duplicate submission while pending", async () => {
+    let resolveRequest: (value: { id: string }) => void = () => {};
+    const createUser = mock(
+      () =>
+        new Promise<{ id: string }>((resolve) => {
+          resolveRequest = resolve;
+        }),
+    );
+
+    const submitCreateUser = createSubmitCreateUser({ createUser });
+
+    const first = submitCreateUser(validValues);
+    const second = await submitCreateUser(validValues);
+
+    expect(second.ok).toBe(false);
+    if (!second.ok) {
+      expect(second.reason).toBe("submitting");
+    }
+
+    expect(createUser).toHaveBeenCalledTimes(1);
+
+    resolveRequest({ id: "user-1" });
+    await first;
+  });
+
+  test("triggers success callback", async () => {
+    const createUser = mock(async () => ({ id: "user-1" }));
+    const onSuccess = mock(() => {});
+    const onError = mock((_message: string) => {});
+    const submitCreateUser = createSubmitCreateUser({ createUser, onSuccess, onError });
+
+    await submitCreateUser(validValues);
+
+    expect(onSuccess).toHaveBeenCalledTimes(1);
+    expect(onError).toHaveBeenCalledTimes(0);
+  });
+
+  test("triggers error callback on submit failure", async () => {
+    const createUser = mock(async () => {
+      throw new Error("create failed");
+    });
+    const onSuccess = mock(() => {});
+    const onError = mock((_message: string) => {});
+    const submitCreateUser = createSubmitCreateUser({ createUser, onSuccess, onError });
+
+    const result = await submitCreateUser(validValues);
+
+    expect(result.ok).toBe(false);
+    if (!result.ok) {
+      expect(result.reason).toBe("request");
+    }
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect(onSuccess).toHaveBeenCalledTimes(0);
+  });
+});
diff --git a/features/user-create/submit.ts b/features/user-create/submit.ts
new file mode 100644
index 0000000..2c3f9b8
--- /dev/null
+++ b/features/user-create/submit.ts
@@ -0,0 +1,58 @@
+import { createUserFormSchema, type CreateUserFormValues, type CreateUserPayload } from "@/features/user-create/schema";
+
+export type SubmitCreateUserResult =
+  | { ok: true }
+  | {
+      ok: false;
+      reason: "validation" | "submitting" | "request";
+      fieldErrors?: Record<string, string[] | undefined>;
+      message?: string;
+    };
+
+type CreateSubmitCreateUserOptions = {
+  createUser: (payload: CreateUserPayload) => Promise<unknown>;
+  onSuccess?: () => void;
+  onError?: (message: string) => void;
+};
+
+export function createSubmitCreateUser(options: CreateSubmitCreateUserOptions) {
+  let isSubmitting = false;
+
+  return async function submitCreateUser(values: CreateUserFormValues): Promise<SubmitCreateUserResult> {
+    if (isSubmitting) {
+      return {
+        ok: false,
+        reason: "submitting",
+        message: "正在提交，请稍候",
+      };
+    }
+
+    const parsed = createUserFormSchema.safeParse(values);
+    if (!parsed.success) {
+      return {
+        ok: false,
+        reason: "validation",
+        fieldErrors: parsed.error.flatten().fieldErrors,
+      };
+    }
+
+    const { confirmPassword: _confirmPassword, ...payload } = parsed.data;
+
+    isSubmitting = true;
+    try {
+      await options.createUser(payload);
+      options.onSuccess?.();
+      return { ok: true };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "创建用户失败";
+      options.onError?.(message);
+      return {
+        ok: false,
+        reason: "request",
+        message,
+      };
+    } finally {
+      isSubmitting = false;
+    }
+  };
+}

From 3421d0e2d8608abe0a44ad12e52bfe6c1156b3f0 Mon Sep 17 00:00:00 2001
From: yudachao <290945266@qq.com>
Date: Wed, 8 Apr 2026 10:50:55 +0800
Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9createUser=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/layout.tsx                                |  18 +-
 app/users/new/page.tsx                        |  14 +-
 .../components/user-create-form.tsx           | 254 ++++++++++++------
 features/user-create/schema.ts                |  56 ++--
 4 files changed, 234 insertions(+), 108 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index c99f7b0..3b74634 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { ClerkProvider } from "@clerk/nextjs";
 import { zhCN } from "@clerk/localizations";
-import { Montserrat, Open_Sans } from "next/font/google";
+import { Montserrat, Open_Sans, Space_Grotesk, Space_Mono } from "next/font/google";
 import { QueryProvider } from "@/features/shared/providers/query-provider";
 import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
@@ -16,6 +16,17 @@ const openSans = Open_Sans({
   subsets: ["latin"],
 });
 
+const spaceGrotesk = Space_Grotesk({
+  variable: "--font-space-grotesk",
+  subsets: ["latin"],
+});
+
+const spaceMono = Space_Mono({
+  variable: "--font-space-mono",
+  subsets: ["latin"],
+  weight: ["400", "700"],
+});
+
 export const metadata: Metadata = {
   title: "PPT XML Editor",
   description: "PPT XML Editor with Clerk authentication",
@@ -28,7 +39,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={`${montserrat.variable} ${openSans.variable} antialiased`} suppressHydrationWarning>
+      <body
+        className={`${montserrat.variable} ${openSans.variable} ${spaceGrotesk.variable} ${spaceMono.variable} antialiased`}
+        suppressHydrationWarning
+      >
         <ClerkProvider localization={zhCN} signInFallbackRedirectUrl="/" signUpFallbackRedirectUrl="/">
           <QueryProvider>{children}</QueryProvider>
           <Toaster position="bottom-right" richColors />
diff --git a/app/users/new/page.tsx b/app/users/new/page.tsx
index 7c457e2..4e207d9 100644
--- a/app/users/new/page.tsx
+++ b/app/users/new/page.tsx
@@ -2,8 +2,18 @@ import { UserCreateForm } from "@/features/user-create/components/user-create-fo
 
 export default function UserCreatePage() {
   return (
-    <main className="mx-auto w-full max-w-2xl px-6 py-10">
-      <UserCreateForm />
+    <main className="min-h-screen bg-[#000000] text-[#E8E8E8]">
+      <div className="relative mx-auto w-full max-w-4xl px-6 py-12">
+        <div
+          className="pointer-events-none absolute inset-0 opacity-20"
+          style={{
+            backgroundImage: "radial-gradient(circle, #333333 1px, transparent 1px)",
+            backgroundSize: "16px 16px",
+          }}
+          aria-hidden
+        />
+        <UserCreateForm />
+      </div>
     </main>
   );
 }
diff --git a/features/user-create/components/user-create-form.tsx b/features/user-create/components/user-create-form.tsx
index 9517fd4..70fb0d4 100644
--- a/features/user-create/components/user-create-form.tsx
+++ b/features/user-create/components/user-create-form.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -15,12 +14,6 @@ import {
 } from "@/features/user-create/schema";
 import { createSubmitCreateUser } from "@/features/user-create/submit";
 
-const roleLabelMap: Record<(typeof createUserRoleOptions)[number], string> = {
-  admin: "管理员",
-  editor: "编辑者",
-  viewer: "只读用户",
-};
-
 const defaultValues: CreateUserFormValues = {
   username: "",
   email: "",
@@ -29,7 +22,13 @@ const defaultValues: CreateUserFormValues = {
   confirmPassword: "",
 };
 
+type InlineStatus = {
+  tone: "neutral" | "success" | "error";
+  text: string;
+};
+
 export function UserCreateForm() {
+  const [status, setStatus] = useState<InlineStatus | null>(null);
   const form = useForm<CreateUserFormValues>({
     resolver: zodResolver(createUserFormSchema),
     defaultValues,
@@ -40,10 +39,10 @@ export function UserCreateForm() {
       createSubmitCreateUser({
         createUser,
         onSuccess: () => {
-          toast.success("用户创建成功");
+          setStatus({ tone: "success", text: "[SAVED]" });
         },
         onError: (message) => {
-          toast.error(message || "创建用户失败");
+          setStatus({ tone: "error", text: `[ERROR: ${message || "创建用户失败"}]` });
         },
       }),
     [],
@@ -53,6 +52,9 @@ export function UserCreateForm() {
     const result = await submitCreateUser(values);
 
     if (!result.ok) {
+      if (result.reason === "submitting") {
+        setStatus({ tone: "neutral", text: "[LOADING...]" });
+      }
       if (result.reason === "validation" && result.fieldErrors) {
         for (const [name, messages] of Object.entries(result.fieldErrors)) {
           if (!messages?.length) continue;
@@ -66,81 +68,181 @@ export function UserCreateForm() {
   });
 
   return (
-    <form onSubmit={onSubmit} className="grid gap-5 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-      <div>
-        <h1 className="text-2xl font-semibold text-slate-900">创建用户</h1>
-        <p className="mt-1 text-sm text-slate-500">填写以下信息，创建一个新用户账号。</p>
-      </div>
-
+    <form
+      onSubmit={onSubmit}
+      className="relative grid gap-8 rounded-2xl border border-[#333333] bg-[#111111] p-6 md:p-8"
+      style={{ fontFamily: "var(--font-space-grotesk)" }}
+    >
       <div className="grid gap-2">
-        <label htmlFor="username" className="text-sm font-medium text-slate-700">
-          用户名
-        </label>
-        <Input id="username" placeholder="请输入用户名" {...form.register("username")} />
-        {form.formState.errors.username ? (
-          <p className="text-sm text-rose-600">{form.formState.errors.username.message}</p>
-        ) : null}
+        <p
+          className="text-[11px] tracking-[0.08em] text-[#999999] uppercase"
+          style={{ fontFamily: "var(--font-space-mono)" }}
+        >
+          SYSTEM / USER PROVISION
+        </p>
+        <h1 className="text-4xl leading-none font-medium tracking-[-0.02em] text-[#FFFFFF] md:text-5xl">
+          CREATE USER
+        </h1>
+        <p className="max-w-xl text-sm text-[#999999]">
+          使用严格参数创建用户记录。输入值会在提交前执行本地校验，确认后写入 API payload。
+        </p>
       </div>
 
-      <div className="grid gap-2">
-        <label htmlFor="email" className="text-sm font-medium text-slate-700">
-          邮箱
-        </label>
-        <Input id="email" type="email" placeholder="user@example.com" {...form.register("email")} />
-        {form.formState.errors.email ? (
-          <p className="text-sm text-rose-600">{form.formState.errors.email.message}</p>
-        ) : null}
+      <div className="grid gap-5 md:grid-cols-2">
+        <div className="grid gap-2">
+          <label
+            htmlFor="username"
+            className="text-[11px] tracking-[0.08em] text-[#999999] uppercase"
+            style={{ fontFamily: "var(--font-space-mono)" }}
+          >
+            USERNAME
+          </label>
+          <Input
+            id="username"
+            placeholder="operator_01"
+            className="h-11 rounded-lg border-[#333333] bg-[#111111] px-0 text-[15px] text-[#E8E8E8] shadow-none [font-family:var(--font-space-mono)] placeholder:text-[#666666] focus-visible:border-[#E8E8E8] focus-visible:ring-0"
+            {...form.register("username")}
+          />
+          {form.formState.errors.username ? (
+            <p
+              className="text-[12px] tracking-[0.04em] text-[#D71921] uppercase"
+              style={{ fontFamily: "var(--font-space-mono)" }}
+            >
+              [ERROR: {form.formState.errors.username.message}]
+            </p>
+          ) : null}
+        </div>
+
+        <div className="grid gap-2">
+          <label
+            htmlFor="email"
+            className="text-[11px] tracking-[0.08em] text-[#999999] uppercase"
+            style={{ fontFamily: "var(--font-space-mono)" }}
+          >
+            EMAIL
+          </label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="user@example.com"
+            className="h-11 rounded-lg border-[#333333] bg-[#111111] px-0 text-[15px] text-[#E8E8E8] shadow-none [font-family:var(--font-space-mono)] placeholder:text-[#666666] focus-visible:border-[#E8E8E8] focus-visible:ring-0"
+            {...form.register("email")}
+          />
+          {form.formState.errors.email ? (
+            <p
+              className="text-[12px] tracking-[0.04em] text-[#D71921] uppercase"
+              style={{ fontFamily: "var(--font-space-mono)" }}
+            >
+              [ERROR: {form.formState.errors.email.message}]
+            </p>
+          ) : null}
+        </div>
       </div>
 
-      <div className="grid gap-2">
-        <label htmlFor="role" className="text-sm font-medium text-slate-700">
-          角色
-        </label>
-        <select
-          id="role"
-          className="h-9 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring"
-          {...form.register("role")}
-        >
-          <option value="">请选择角色</option>
-          {createUserRoleOptions.map((role) => (
-            <option key={role} value={role}>
-              {roleLabelMap[role]}
+      <div className="grid gap-5 md:grid-cols-3">
+        <div className="grid gap-2 md:col-span-1">
+          <label
+            htmlFor="role"
+            className="text-[11px] tracking-[0.08em] text-[#999999] uppercase"
+            style={{ fontFamily: "var(--font-space-mono)" }}
+          >
+            ROLE
+          </label>
+          <select
+            id="role"
+            className="h-11 rounded-lg border border-[#333333] bg-[#111111] px-3 text-[14px] text-[#E8E8E8] outline-none transition-colors [font-family:var(--font-space-mono)] focus:border-[#E8E8E8]"
+            {...form.register("role")}
+          >
+            <option className="bg-[#111111]" value="">
+              SELECT
             </option>
-          ))}
-        </select>
-        {form.formState.errors.role ? (
-          <p className="text-sm text-rose-600">{form.formState.errors.role.message}</p>
-        ) : null}
-      </div>
-
-      <div className="grid gap-2">
-        <label htmlFor="password" className="text-sm font-medium text-slate-700">
-          密码
-        </label>
-        <Input id="password" type="password" placeholder="请输入密码" {...form.register("password")} />
-        {form.formState.errors.password ? (
-          <p className="text-sm text-rose-600">{form.formState.errors.password.message}</p>
-        ) : null}
+            {createUserRoleOptions.map((role) => (
+              <option className="bg-[#111111]" key={role} value={role}>
+                {role.toUpperCase()}
+              </option>
+            ))}
+          </select>
+          {form.formState.errors.role ? (
+            <p
+              className="text-[12px] tracking-[0.04em] text-[#D71921] uppercase"
+              style={{ fontFamily: "var(--font-space-mono)" }}
+            >
+              [ERROR: {form.formState.errors.role.message}]
+            </p>
+          ) : null}
+        </div>
+
+        <div className="grid gap-2">
+          <label
+            htmlFor="password"
+            className="text-[11px] tracking-[0.08em] text-[#999999] uppercase"
+            style={{ fontFamily: "var(--font-space-mono)" }}
+          >
+            PASSWORD
+          </label>
+          <Input
+            id="password"
+            type="password"
+            placeholder="••••••••"
+            className="h-11 rounded-lg border-[#333333] bg-[#111111] px-0 text-[15px] text-[#E8E8E8] shadow-none [font-family:var(--font-space-mono)] placeholder:text-[#666666] focus-visible:border-[#E8E8E8] focus-visible:ring-0"
+            {...form.register("password")}
+          />
+          {form.formState.errors.password ? (
+            <p
+              className="text-[12px] tracking-[0.04em] text-[#D71921] uppercase"
+              style={{ fontFamily: "var(--font-space-mono)" }}
+            >
+              [ERROR: {form.formState.errors.password.message}]
+            </p>
+          ) : null}
+        </div>
+
+        <div className="grid gap-2">
+          <label
+            htmlFor="confirmPassword"
+            className="text-[11px] tracking-[0.08em] text-[#999999] uppercase"
+            style={{ fontFamily: "var(--font-space-mono)" }}
+          >
+            CONFIRM
+          </label>
+          <Input
+            id="confirmPassword"
+            type="password"
+            placeholder="••••••••"
+            className="h-11 rounded-lg border-[#333333] bg-[#111111] px-0 text-[15px] text-[#E8E8E8] shadow-none [font-family:var(--font-space-mono)] placeholder:text-[#666666] focus-visible:border-[#E8E8E8] focus-visible:ring-0"
+            {...form.register("confirmPassword")}
+          />
+          {form.formState.errors.confirmPassword ? (
+            <p
+              className="text-[12px] tracking-[0.04em] text-[#D71921] uppercase"
+              style={{ fontFamily: "var(--font-space-mono)" }}
+            >
+              [ERROR: {form.formState.errors.confirmPassword.message}]
+            </p>
+          ) : null}
+        </div>
       </div>
 
-      <div className="grid gap-2">
-        <label htmlFor="confirmPassword" className="text-sm font-medium text-slate-700">
-          确认密码
-        </label>
-        <Input
-          id="confirmPassword"
-          type="password"
-          placeholder="请再次输入密码"
-          {...form.register("confirmPassword")}
-        />
-        {form.formState.errors.confirmPassword ? (
-          <p className="text-sm text-rose-600">{form.formState.errors.confirmPassword.message}</p>
-        ) : null}
-      </div>
+      <div className="flex items-center justify-between border-t border-[#222222] pt-5">
+        <p
+          className={`text-[11px] tracking-[0.08em] uppercase ${
+            status?.tone === "error"
+              ? "text-[#D71921]"
+              : status?.tone === "success"
+                ? "text-[#E8E8E8]"
+                : "text-[#666666]"
+          }`}
+          style={{ fontFamily: "var(--font-space-mono)" }}
+        >
+          {status?.text ?? "[READY]"}
+        </p>
 
-      <div className="flex justify-end">
-        <Button type="submit" disabled={form.formState.isSubmitting}>
-          {form.formState.isSubmitting ? "创建中..." : "创建用户"}
+        <Button
+          type="submit"
+          disabled={form.formState.isSubmitting}
+          className="h-11 rounded-full border border-[#E8E8E8] bg-[#E8E8E8] px-6 text-[12px] tracking-[0.08em] text-[#000000] uppercase transition-colors [font-family:var(--font-space-mono)] hover:bg-[#FFFFFF]"
+        >
+          {form.formState.isSubmitting ? "SUBMITTING" : "CREATE USER"}
         </Button>
       </div>
     </form>
diff --git a/features/user-create/schema.ts b/features/user-create/schema.ts
index b81f3c0..e24d4fa 100644
--- a/features/user-create/schema.ts
+++ b/features/user-create/schema.ts
@@ -3,37 +3,37 @@ import { z } from "zod";
 export const createUserRoleOptions = ["admin", "editor", "viewer"] as const;
 
 const createUserRoleSchema = z.enum(createUserRoleOptions, {
-  error: "请选择有效角色",
+	error: "请选择有效角色",
 });
 
 export const createUserFormSchema = z
-  .object({
-    username: z
-      .string({ error: "请输入用户名" })
-      .trim()
-      .min(1, "请输入用户名")
-      .min(3, "用户名长度至少 3 位")
-      .max(20, "用户名长度不能超过 20 位"),
-    email: z
-      .string({ error: "请输入邮箱" })
-      .trim()
-      .min(1, "请输入邮箱")
-      .email("请输入有效邮箱地址"),
-    role: z
-      .string({ error: "请选择角色" })
-      .trim()
-      .min(1, "请选择角色")
-      .pipe(createUserRoleSchema),
-    password: z
-      .string({ error: "请输入密码" })
-      .min(1, "请输入密码")
-      .min(8, "密码长度至少 8 位"),
-    confirmPassword: z.string({ error: "请确认密码" }).min(1, "请确认密码"),
-  })
-  .refine((value) => value.password === value.confirmPassword, {
-    path: ["confirmPassword"],
-    message: "两次密码输入必须一致",
-  });
+	.object({
+		username: z
+			.string({ error: "请输入用户名" })
+			.trim()
+			.min(1, "请输入用户名")
+			.min(3, "用户名长度至少 3 位")
+			.max(20, "用户名长度不能超过 20 位"),
+		email: z
+			.string({ error: "请输入邮箱" })
+			.trim()
+			.min(1, "请输入邮箱")
+			.email("请输入有效邮箱地址"),
+		role: z
+			.string({ error: "请选择角色" })
+			.trim()
+			.min(1, "请选择角色")
+			.pipe(createUserRoleSchema),
+		password: z
+			.string({ error: "请输入密码" })
+			.min(1, "请输入密码")
+			.min(8, "密码长度至少 8 位"),
+		confirmPassword: z.string({ error: "请确认密码" }).min(1, "请确认密码"),
+	})
+	.refine((value) => value.password === value.confirmPassword, {
+		path: ["confirmPassword"],
+		message: "两次密码输入必须一致",
+	});
 
 export type CreateUserRole = z.infer<typeof createUserRoleSchema>;
 export type CreateUserFormValues = z.input<typeof createUserFormSchema>;

From d16543aaaaf28c22b8332eefb40a0f939052dc00 Mon Sep 17 00:00:00 2001
From: yudachao <290945266@qq.com>
Date: Wed, 8 Apr 2026 10:54:24 +0800
Subject: [PATCH 4/4] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 608ffb6..206f780 100644
--- a/README.md
+++ b/README.md
@@ -235,6 +235,7 @@ bun run api:smoke  # API 冒烟测试（需 dev server 已启动）
 - 持续完善版本 diff 展示
 - 完善权限隔离与协作模型
 - 优化大文稿下的性能表现
+- 
 
 ## 参考文档