From 04f2dfc229f19b2551ce3343196959c624a1c811 Mon Sep 17 00:00:00 2001
From: TalexDreamSoul <TalexDreamSoul@Gmail.com>
Date: Thu, 2 Jul 2026 09:45:21 -0700
Subject: [PATCH] fix: polish kumo dialog and select styling

---
 app/globals.css                               | 20 +++++++++++
 components/ui/dialog.tsx                      | 11 ++++--
 components/ui/select.tsx                      |  9 ++++-
 .../OrganizationManagementClient.tsx          | 35 +++++++------------
 4 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index dfc8056..41f1a57 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -111,6 +111,17 @@ a,
   }
 }
 
+@keyframes dialog-panel-enter {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
 .page-enter {
   animation: page-enter 180ms ease-out both;
 }
@@ -119,6 +130,14 @@ a,
   animation: page-enter 160ms ease-out both;
 }
 
+.dialog-panel-enter {
+  animation: dialog-panel-enter 160ms ease-out both;
+}
+
+:where([role="presentation"].fixed.inset-0.bg-kumo-recessed) {
+  z-index: 40;
+}
+
 .loading-progress {
   width: 55%;
   animation: loading-progress 900ms ease-in-out infinite;
@@ -127,6 +146,7 @@ a,
 @media (prefers-reduced-motion: reduce) {
   .page-enter,
   .table-row-enter,
+  .dialog-panel-enter,
   .loading-progress {
     animation: none;
   }
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index a6506e1..3e95d29 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -17,6 +17,9 @@ type DialogProps = {
   className?: string;
 };
 
+const kumoBackdropClassNames =
+  "fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0";
+
 export function Dialog({
   open,
   title,
@@ -37,14 +40,16 @@ export function Dialog({
     >
       <KumoDialog
         className={cn(
-          "flex max-h-[92svh] w-[min(calc(100vw-1.5rem),48rem)] flex-col overflow-hidden rounded-lg border border-kumo-line bg-kumo-base p-0 shadow-xl",
+          "dialog-panel-enter fixed left-1/2 top-1/2 z-50 flex max-h-[min(92svh,52rem)] w-[min(calc(100vw-1.5rem),48rem)] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border border-kumo-line bg-kumo-base p-0 shadow-xl outline-none ring-1 ring-kumo-line",
+          "data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
           className,
         )}
+        data-kumo-backdrop-classes={kumoBackdropClassNames}
         size="xl"
       >
-        <header className="flex shrink-0 items-start justify-between gap-4 border-b border-kumo-line p-5">
+        <header className="flex shrink-0 items-start justify-between gap-4 border-b border-kumo-line bg-kumo-base p-5">
           <div className="min-w-0">
-            <KumoDialog.Title>{title}</KumoDialog.Title>
+            <KumoDialog.Title className="text-lg font-semibold leading-7 text-kumo-strong">{title}</KumoDialog.Title>
             {description ? <KumoDialog.Description className="mt-1">{description}</KumoDialog.Description> : null}
           </div>
           <Button aria-label="关闭弹窗" onClick={onClose} size="icon" type="button" variant="outline">
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index e5596eb..ddf9026 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -36,7 +36,14 @@ export function Select({
 }: SelectProps): React.ReactElement {
   return (
     <KumoSelect<string>
-      className={cn("w-full", className)}
+      className={cn(
+        "min-h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-left text-sm font-medium text-foreground shadow-sm",
+        "transition-colors hover:border-primary/45 hover:bg-secondary/35",
+        "focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/25",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "[&_[data-placeholder]]:text-muted-foreground [&_svg]:text-primary",
+        className,
+      )}
       defaultValue={defaultValue}
       onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
       placeholder={placeholder}
diff --git a/modules/settings/components/OrganizationManagementClient.tsx b/modules/settings/components/OrganizationManagementClient.tsx
index 240d509..fdc15ea 100644
--- a/modules/settings/components/OrganizationManagementClient.tsx
+++ b/modules/settings/components/OrganizationManagementClient.tsx
@@ -72,8 +72,8 @@ export function OrganizationManagementClient(): React.ReactElement {
         title="新增机构"
       >
         <form className="grid gap-4" onSubmit={handleSubmit}>
-          <Input name="name" placeholder="机构名称" required />
-          <Input name="slug" placeholder="机构标识，可留空" />
+          <Input label="机构名称" name="name" placeholder="机构名称" required />
+          <Input label="机构标识" name="slug" placeholder="可留空" />
           {message ? (
             <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
               {message}
@@ -195,26 +195,17 @@ export function OrganizationRowActions({
         title="编辑机构"
       >
         <form className="grid gap-4" onSubmit={handleSubmit}>
-          <label className="grid gap-2 text-sm">
-            <span className="font-medium">机构名称</span>
-            <Input defaultValue={organization.name} name="name" required />
-          </label>
-          <label className="grid gap-2 text-sm">
-            <span className="font-medium">机构标识</span>
-            <Input defaultValue={organization.slug} name="slug" required />
-          </label>
-          <label className="grid gap-2 text-sm">
-            <span className="font-medium">状态</span>
-            <Select
-              aria-label="机构状态"
-              defaultValue={organization.status}
-              name="status"
-              options={[
-                { value: "active", label: "启用" },
-                { value: "disabled", label: "停用" },
-              ]}
-            />
-          </label>
+          <Input defaultValue={organization.name} label="机构名称" name="name" required />
+          <Input defaultValue={organization.slug} label="机构标识" name="slug" required />
+          <Select
+            defaultValue={organization.status}
+            label="状态"
+            name="status"
+            options={[
+              { value: "active", label: "启用" },
+              { value: "disabled", label: "停用" },
+            ]}
+          />
           {message ? (
             <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
               {message}