feat(frontend): 统一全站 Modal 壳并修复角色保存按钮样式

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/chat/ChatShell.tsx

@@ -26,6 +26,7 @@ import { onDocumentVisible } from "@/lib/visibilityReconcile";
 import { toast } from "@/lib/toast";
 import Avatar from "@/components/Avatar";
 import ContextMenu, { type CtxMenuItem } from "@/components/ContextMenu";
+import Modal from "@/components/Modal";
 
 function roomTitle(room: ChatRoomView) {
   if (room.room_type === "direct") {
@@ -600,115 +601,99 @@ function CreateGroupModal({
   };
 
   return (
-    <div
-      className="fixed inset-0 z-[1000] flex items-center justify-center p-4"
-      style={{ background: "rgba(0,0,0,0.55)" }}
-      // 刻意不绑定外侧点击关闭，避免误关丢失已填内容
-    >
-      <div
-        className="w-full max-w-md rounded-2xl p-6 j13-toast-in"
-        style={{ background: "var(--panel)", border: "1px solid var(--line)" }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between mb-5">
-          <h2 className="text-[18px] font-extrabold" style={{ color: "var(--ink)" }}>
-            新建群聊
-          </h2>
-          <button
-            onClick={onClose}
-            disabled={submitting}
-            aria-label="关闭"
-            className="w-7 h-7 flex items-center justify-center rounded-full hover:bg-[var(--accent-soft)] transition-colors"
-            style={{ color: "var(--ink-3)" }}
-          >
-            <X size={15} />
+    <Modal
+      open
+      title="新建群聊"
+      onClose={onClose}
+      busy={submitting}
+      maxWidthClass="max-w-md"
+      footer={
+        <>
+          <button type="button" onClick={onClose} disabled={submitting} className="btn btn-line btn-sm">
+            取消
           </button>
+          <button type="button" onClick={submit} disabled={submitting} className="btn btn-primary btn-sm">
+            {submitting ? "创建中..." : "创建"}
+          </button>
+        </>
+      }
+    >
+      <div className="space-y-4">
+        <div>
+          <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
+            群名称 <span style={{ color: "var(--danger)" }}>*</span>
+          </label>
+          <input
+            autoFocus
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            maxLength={32}
+            placeholder="2-32 个字符"
+            className="w-full px-3.5 h-10 rounded-lg outline-none"
+            style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
+          />
         </div>
-        <div className="space-y-4">
+        <div>
+          <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
+            群简介（选填）
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            maxLength={200}
+            rows={3}
+            className="w-full px-3.5 py-2.5 rounded-lg outline-none resize-none"
+            style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
+          />
+        </div>
+        <div>
+          <label className="block text-[12px] font-bold mb-2" style={{ color: "var(--ink-2)" }}>
+            可见性
+          </label>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => setIsPrivate(false)}
+              className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
+              style={{
+                background: !isPrivate ? "var(--accent-soft)" : "var(--bg)",
+                color: !isPrivate ? "var(--accent)" : "var(--ink-2)",
+                border: `1px solid ${!isPrivate ? "var(--accent)" : "var(--line)"}`,
+              }}
+            >
+              公开
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsPrivate(true)}
+              className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
+              style={{
+                background: isPrivate ? "var(--accent-soft)" : "var(--bg)",
+                color: isPrivate ? "var(--accent)" : "var(--ink-2)",
+                border: `1px solid ${isPrivate ? "var(--accent)" : "var(--line)"}`,
+              }}
+            >
+              私密
+            </button>
+          </div>
+        </div>
+        {isPrivate && (
           <div>
             <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
-              群名称 <span style={{ color: "var(--danger)" }}>*</span>
+              初始成员（选填）
             </label>
             <input
-              autoFocus
               type="text"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              maxLength={32}
-              placeholder="2-32 个字符"
+              value={memberInput}
+              onChange={(e) => setMemberInput(e.target.value)}
+              placeholder="用户名，多个用空格或逗号分隔"
               className="w-full px-3.5 h-10 rounded-lg outline-none"
               style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
             />
           </div>
-          <div>
-            <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
-              群简介（选填）
-            </label>
-            <textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              maxLength={200}
-              rows={3}
-              className="w-full px-3.5 py-2.5 rounded-lg outline-none resize-none"
-              style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
-            />
-          </div>
-          <div>
-            <label className="block text-[12px] font-bold mb-2" style={{ color: "var(--ink-2)" }}>
-              可见性
-            </label>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={() => setIsPrivate(false)}
-                className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
-                style={{
-                  background: !isPrivate ? "var(--accent-soft)" : "var(--bg)",
-                  color: !isPrivate ? "var(--accent)" : "var(--ink-2)",
-                  border: `1px solid ${!isPrivate ? "var(--accent)" : "var(--line)"}`,
-                }}
-              >
-                公开
-              </button>
-              <button
-                type="button"
-                onClick={() => setIsPrivate(true)}
-                className="flex-1 h-9 rounded-lg text-[13px] font-semibold"
-                style={{
-                  background: isPrivate ? "var(--accent-soft)" : "var(--bg)",
-                  color: isPrivate ? "var(--accent)" : "var(--ink-2)",
-                  border: `1px solid ${isPrivate ? "var(--accent)" : "var(--line)"}`,
-                }}
-              >
-                私密
-              </button>
-            </div>
-          </div>
-          {isPrivate && (
-            <div>
-              <label className="block text-[12px] font-bold mb-1.5" style={{ color: "var(--ink-2)" }}>
-                初始成员（选填）
-              </label>
-              <input
-                type="text"
-                value={memberInput}
-                onChange={(e) => setMemberInput(e.target.value)}
-                placeholder="用户名，多个用空格或逗号分隔"
-                className="w-full px-3.5 h-10 rounded-lg outline-none"
-                style={{ background: "var(--bg)", border: "1px solid var(--line)", color: "var(--ink)" }}
-              />
-            </div>
-          )}
-          <div className="flex justify-end gap-2 pt-1">
-            <button onClick={onClose} disabled={submitting} className="btn btn-line btn-sm">
-              取消
-            </button>
-            <button onClick={submit} disabled={submitting} className="btn btn-accent btn-sm">
-              {submitting ? "创建中..." : "创建"}
-            </button>
-          </div>
-        </div>
+        )}
       </div>
-    </div>
+    </Modal>
   );
 }