fix(users): 编辑 modal 观察者改 toggle switch + 说明文字下移

之前 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

@@ -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; } }

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>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
-                  <input
+                  <span style={{ fontSize: 14, color: 'var(--color-text-primary)' }}>设为观察者</span>
-                    type="checkbox"
+                  <label className={styles.switch}>
-                    checked={editIsObserver}
+                    <input
-                    onChange={(e) => setEditIsObserver(e.target.checked)}
+                      type="checkbox"
-                    style={{ marginRight: 8, verticalAlign: 'middle' }}
+                      checked={editIsObserver}
-                  />
+                      onChange={(e) => setEditIsObserver(e.target.checked)}
-                  设为观察者（可查看全部团队的内容资产，不显示费用；需该用户重新登录后生效）
+                    />
-                </label>
+                    <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}>