From f54bf94422dec733bb96d93dd2d6f2c51eaf3bd5 Mon Sep 17 00:00:00 2001
From: seaislee1209 <seaislee129@gmail.com>
Date: Mon, 18 May 2026 18:16:20 +0800
Subject: [PATCH] =?UTF-8?q?fix(users):=20=E7=BC=96=E8=BE=91=20modal=20?=
 =?UTF-8?q?=E8=A7=82=E5=AF=9F=E8=80=85=E6=94=B9=20toggle=20switch=20+=20?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=E6=96=87=E5=AD=97=E4=B8=8B=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

之前 checkbox + 一整段说明文字塞一个 label 里,文字换行 + checkbox 浮到中间,挤眼。
- 顶部一行:左标签「设为观察者」+ 右 toggle switch(复用 SettingsPage 同款样式,加到 UsersPage.module.css)
- 下方一行:小字灰色说明「可查看全部团队的内容资产...」

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 web/src/pages/UsersPage.module.css | 14 ++++++++++++++
 web/src/pages/UsersPage.tsx        | 23 ++++++++++++++---------
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/web/src/pages/UsersPage.module.css b/web/src/pages/UsersPage.module.css
index 31817b8..3ce9caf 100644
--- a/web/src/pages/UsersPage.module.css
+++ b/web/src/pages/UsersPage.module.css
@@ -47,6 +47,20 @@
 .enableBtn { background: transparent; border: 1px solid var(--color-success); color: var(--color-success); }
 .enableBtn:hover { background: var(--color-success-bg-hover); }
 
+/* Toggle switch — 用于编辑用户 modal 内的「设为观察者」等 boolean 字段 */
+.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
+.switch input { opacity: 0; width: 0; height: 0; }
+.slider {
+  position: absolute; cursor: pointer; inset: 0;
+  background: var(--color-border-card); border-radius: 24px; transition: 0.3s;
+}
+.slider::before {
+  content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
+  background: var(--color-on-primary); border-radius: 50%; transition: 0.3s;
+}
+.switch input:checked + .slider { background: var(--color-primary); }
+.switch input:checked + .slider::before { transform: translateX(20px); }
+
 .empty { text-align: center; color: var(--color-text-secondary); padding: 40px; }
 .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
diff --git a/web/src/pages/UsersPage.tsx b/web/src/pages/UsersPage.tsx
index 11b3404..34d5cc7 100644
--- a/web/src/pages/UsersPage.tsx
+++ b/web/src/pages/UsersPage.tsx
@@ -360,15 +360,20 @@ export function UsersPage() {
             </div>
             {editUser.is_team_admin && editUser.team_id && (
               <div className={styles.formGroup}>
-                <label>
-                  <input
-                    type="checkbox"
-                    checked={editIsObserver}
-                    onChange={(e) => setEditIsObserver(e.target.checked)}
-                    style={{ marginRight: 8, verticalAlign: 'middle' }}
-                  />
-                  设为观察者（可查看全部团队的内容资产，不显示费用；需该用户重新登录后生效）
-                </label>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+                  <span style={{ fontSize: 14, color: 'var(--color-text-primary)' }}>设为观察者</span>
+                  <label className={styles.switch}>
+                    <input
+                      type="checkbox"
+                      checked={editIsObserver}
+                      onChange={(e) => setEditIsObserver(e.target.checked)}
+                    />
+                    <span className={styles.slider}></span>
+                  </label>
+                </div>
+                <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginTop: 6, lineHeight: 1.5 }}>
+                  可查看全部团队的内容资产，不显示费用；需该用户重新登录后生效
+                </div>
               </div>
             )}
             <div className={styles.formGroup}>