diff --git a/client/lib/screens/settings/settings_screen.dart b/client/lib/screens/settings/settings_screen.dart
index 10a4bb5..6a73885 100644
--- a/client/lib/screens/settings/settings_screen.dart
+++ b/client/lib/screens/settings/settings_screen.dart
@@ -16,6 +16,7 @@ import '../../core/theme/context_tokens.dart';
 import '../../core/theme/app_tokens.dart';
 import '../../core/theme/app_tokens.g.dart';
 import '../../core/theme/theme_controller.dart';
+import '../../widgets/kpi_card.dart';
 import '../../models/number_rule.dart';
 import '../../models/user.dart';
 import '../../providers/license_provider.dart';
@@ -1112,30 +1113,14 @@ class _RoleBadge extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final Color bg;
-    final Color fg;
-    switch (role) {
-      case '超级管理员':
-        bg = const Color(0xFFFCE4EC);
-        fg = context.tokens.danger;
-        break;
-      case '管理员':
-        bg = const Color(0xFFE3F2FD);
-        fg = context.tokens.primary;
-        break;
-      case '操作员':
-        bg = const Color(0xFFE8F5E9);
-        fg = context.tokens.success;
-        break;
-      default:
-        bg = const Color(0xFFF5F5F5);
-        fg = context.tokens.muted;
-    }
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
-      decoration: BoxDecoration(color: bg, borderRadius: BorderRadius.circular(3)),
-      child: Text(role, style: TextStyle(color: fg, fontSize: 12, fontWeight: FontWeight.w500)),
-    );
+    final t = context.tokens;
+    final (Color fg, Color bg) = switch (role) {
+      '超级管理员' => (t.danger, t.dangerBg),
+      '管理员' => (t.primary, t.infoSoft),
+      '操作员' => (t.success, t.okSoft),
+      _ => (t.muted, t.infoSoft),
+    };
+    return StatusPill(label: role, color: fg, background: bg);
   }
 }
 
diff --git a/client/test/golden/goldens/settings_params_a.png b/client/test/golden/goldens/settings_params_a.png
new file mode 100644
index 0000000..9cd129c
Binary files /dev/null and b/client/test/golden/goldens/settings_params_a.png differ
diff --git a/client/test/golden/goldens/settings_params_b.png b/client/test/golden/goldens/settings_params_b.png
new file mode 100644
index 0000000..e56769e
Binary files /dev/null and b/client/test/golden/goldens/settings_params_b.png differ
diff --git a/client/test/golden/goldens/settings_params_c.png b/client/test/golden/goldens/settings_params_c.png
new file mode 100644
index 0000000..19aab04
Binary files /dev/null and b/client/test/golden/goldens/settings_params_c.png differ
diff --git a/client/test/golden/settings_golden_test.dart b/client/test/golden/settings_golden_test.dart
new file mode 100644
index 0000000..3c510b4
--- /dev/null
+++ b/client/test/golden/settings_golden_test.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:jiu_client/core/auth/auth_state.dart';
+import 'package:jiu_client/screens/settings/settings_screen.dart';
+
+import '../support/golden_harness.dart';
+
+/// design-distill 阶段4：系统设置「系统参数」Tab golden × 三主题。
+/// 验证外观主题选择器（三色板微缩预览）+ 参数卡随主题换色。
+/// （该 Tab 走本地 state，无需 mock 业务 provider。）
+/// 更新基准：flutter test --update-goldens test/golden/settings_golden_test.dart
+void main() {
+  TestWidgetsFlutterBinding.ensureInitialized();
+  SharedPreferences.setMockInitialValues({});
+
+  goldenAcrossThemes(
+    'settings 系统参数 Tab',
+    goldenPrefix: 'settings_params',
+    child: () => const Scaffold(body: SettingsScreen(initialTab: 3)),
+    overrides: () => [isReadonlyProvider.overrideWithValue(false)],
+    logical: const Size(1280, 1000),
+  );
+}