From fcec5b996f8e31d3c9a17f2ffc7c4a02994847fe Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Wed, 28 Oct 2026 21:01:54 +0800
Subject: [PATCH] refactor(color): use wpColorPicker for page config nav color

Replace the native input[type=color] in the page config meta box with a
wpColorPicker-enhanced text input, enqueued only on page edit screens, and
contract-lock that no native color inputs remain in theme PHP.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/Admin/PageConfigMetaBox.php                 | 16 +++++++++++++++-
 .../color-unification-contract.test.cjs         | 17 +++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/Admin/PageConfigMetaBox.php b/src/Admin/PageConfigMetaBox.php
index ad7a0a3a..eccd9489 100644
--- a/src/Admin/PageConfigMetaBox.php
+++ b/src/Admin/PageConfigMetaBox.php
@@ -18,6 +18,20 @@ final class PageConfigMetaBox {
 	public static function init(): void {
 		add_action('add_meta_boxes_page', [self::class, 'register']);
 		add_action('save_post_page', [self::class, 'save']);
+		add_action('admin_enqueue_scripts', [self::class, 'enqueue']);
+	}
+
+	public static function enqueue(string $hook): void {
+		if (!in_array($hook, ['post.php', 'post-new.php'], true)) {
+			return;
+		}
+		$screen = function_exists('get_current_screen') ? get_current_screen() : null;
+		if (!$screen || 'page' !== $screen->post_type) {
+			return;
+		}
+		wp_enqueue_style('wp-color-picker');
+		wp_enqueue_script('wp-color-picker');
+		wp_add_inline_script('wp-color-picker', "jQuery(function($){ $('.aksrt-page-config-color').wpColorPicker(); });");
 	}
 
 	public static function register(): void {
@@ -64,7 +78,7 @@ final class PageConfigMetaBox {
 			</div>
 
 			<label for="aksrt-header-slider-nav-color"><?php esc_html_e('导航栏文字颜色', 'aksrt'); ?></label>
-			<div><input id="aksrt-header-slider-nav-color" type="color" name="page_config[header_slider_nav_color]" value="<?php echo esc_attr((string) ($config['header_slider_nav_color'] ?? '#ffffff')); ?>"></div>
+			<div><input id="aksrt-header-slider-nav-color" class="aksrt-page-config-color" type="text" name="page_config[header_slider_nav_color]" value="<?php echo esc_attr((string) ($config['header_slider_nav_color'] ?? '#ffffff')); ?>" data-default-color="#ffffff"></div>
 
 			<?php self::render_json_field('header_slider', __('背景内容', 'aksrt'), $config['header_slider'] ?? self::slide_defaults(), 16); ?>
 			<?php self::render_json_field('header_slider_option', __('背景显示设置', 'aksrt'), $config['header_slider_option'] ?? self::slider_defaults(), 12); ?>
diff --git a/tests/widget-system/color-unification-contract.test.cjs b/tests/widget-system/color-unification-contract.test.cjs
index 3dae3e30..fa8bfe35 100644
--- a/tests/widget-system/color-unification-contract.test.cjs
+++ b/tests/widget-system/color-unification-contract.test.cjs
@@ -75,3 +75,20 @@ test('widget background color input is wpColorPicker-enhanced like top-level col
   assert.match(renderer, /class="' \. esc_attr\(\$class\) \. '"/);
   assert.match(read('assets/widgets/admin.js'), /\.aksrt-widget-color'\)\.wpColorPicker\(\)/);
 });
+
+test('page config nav color uses wpColorPicker instead of native input[type=color]', () => {
+  const metaBox = read('src/Admin/PageConfigMetaBox.php');
+  assert.doesNotMatch(metaBox, /type="color"/);
+  assert.match(metaBox, /class="aksrt-page-config-color" type="text" name="page_config\[header_slider_nav_color\]"/);
+  assert.match(metaBox, /wp_enqueue_script\('wp-color-picker'\)/);
+  assert.match(metaBox, /\.aksrt-page-config-color'\)\.wpColorPicker\(\)/);
+  assert.match(metaBox, /Color::sanitize\(\(string\) \(\$raw\['header_slider_nav_color'\]/);
+});
+
+test('no native input[type=color] remains in theme PHP', () => {
+  const offenders = ['src', 'inc', 'templates']
+    .flatMap((dir) => walk(dir, ['.php']))
+    .filter((file) => /type=["']color["']/.test(read(file)))
+    .map((file) => file.replace(/\\/g, '/'));
+  assert.deepEqual(offenders, []);
+});