fix(frontend): align page-set hint bar and FA5 icons with the reference

- 齿轮提示横条改为参考主题的 .abs-right 垂直居中几何（top:50% +
  right:.7em + translateY(-50%)），本站 legacy .abs-right 是 top:0/right:0
  导致横条贴到按钮顶角
- 新增 front-page-admin-set.js：横条 2 秒后淡出 1 秒消失（对齐参考
  主题 js/page-edit.js），开关关闭时不出队脚本
- 齿轮与弹窗内图标统一为 FA5 惯例 fa fas fa-*，并采用 FA5 的 glyph
  重命名（sliders→sliders-h、pie-chart→chart-pie）

assets/css/build/public.css

@@ -4908,6 +4908,22 @@ html.dark .footer-tabbar {
     transition: 0.3s;
 }
 
+/* 前台页面编辑齿轮的提示横条：参考主题共用 .abs-right（top:50% + right:.7em +
+ * translateY(-50%) 的垂直居中定位）。本站 legacy-utilities 的 .abs-right 是
+ * top:0/right:0，横条会贴到按钮顶角，故在此恢复参考几何。 */
+.float-right .admin-set-page .admin-set-info {
+    position: absolute;
+    top: 50%;
+    right: 0.7em;
+    transform: translateY(-50%);
+    white-space: nowrap;
+    line-height: 1.5;
+    margin: 0;
+    box-shadow: none;
+    text-align: center;
+    z-index: 1;
+}
+
 body:has(.modal.in) .float-right,
 .modal-open .float-right,
 .imgbox-show .float-right,

assets/css/frontend/floating-buttons.css

@@ -14,6 +14,22 @@
     transition: 0.3s;
 }
 
+/* 前台页面编辑齿轮的提示横条：参考主题共用 .abs-right（top:50% + right:.7em +
+ * translateY(-50%) 的垂直居中定位）。本站 legacy-utilities 的 .abs-right 是
+ * top:0/right:0，横条会贴到按钮顶角，故在此恢复参考几何。 */
+.float-right .admin-set-page .admin-set-info {
+    position: absolute;
+    top: 50%;
+    right: 0.7em;
+    transform: translateY(-50%);
+    white-space: nowrap;
+    line-height: 1.5;
+    margin: 0;
+    box-shadow: none;
+    text-align: center;
+    z-index: 1;
+}
+
 body:has(.modal.in) .float-right,
 .modal-open .float-right,
 .imgbox-show .float-right,

assets/js/front-page-admin-set.js

@@ -0,0 +1,31 @@
+/**
+ * AKSRT Frontend Page Admin Set — 前台编辑齿轮的提示横条
+ *
+ * 齿轮按钮左侧的「在此编辑此页面参数」横条只是首次进入的引导提示，
+ * 2 秒后淡出 1 秒消失，避免常驻遮挡悬浮按钮栏（对齐参考主题 js/page-edit.js）。
+ *
+ * @package AKSRT
+ */
+
+(function () {
+  'use strict';
+
+  function fadeHint() {
+    var hint = document.querySelector('.admin-set-page .admin-set-info');
+    if (!hint) return;
+
+    setTimeout(function () {
+      hint.style.transition = 'opacity 1s';
+      hint.style.opacity = '0';
+      setTimeout(function () {
+        hint.style.display = 'none';
+      }, 1000);
+    }, 2000);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fadeHint);
+  } else {
+    fadeHint();
+  }
+})();

src/Frontend/PageAdminSet.php

@@ -27,9 +27,33 @@ class PageAdminSet {
 	public function init(): void {
 		add_filter('aksrt_float_right_buttons', [$this, 'float_button'], 10, 2);
 		add_action('wp_footer', [$this, 'render_modal'], 10);
+		add_action('wp_footer', [self::class, 'enqueue_hint_script'], 9);
 		add_action('wp_ajax_aksrt_frontend_set_save', [$this, 'ajax_save']);
 	}
 
+	/**
+	 * 提示横条的自动淡出（对齐参考主题 js/page-edit.js）。
+	 *
+	 * 参考主题在 2 秒后把 .admin-set-info 淡出 1 秒，避免提示常驻遮挡悬浮栏。
+	 * 挂在 wp_footer 早期：wp_print_footer_scripts 在此之前执行，脚本仍能入队。
+	 */
+	public static function enqueue_hint_script(): void {
+		if (!self::enabled()) {
+			return;
+		}
+		$path = get_template_directory() . '/assets/js/front-page-admin-set.js';
+		if (!file_exists($path)) {
+			return;
+		}
+		wp_enqueue_script(
+			'aksrt-front-page-admin-set',
+			get_template_directory_uri() . '/assets/js/front-page-admin-set.js',
+			['jquery'],
+			(string) filemtime($path),
+			true
+		);
+	}
+
 	/** 开启条件：设置开关 + 管理员 + 单页/术语页 + 有效对象（排除投稿与导航页模板）。 */
 	public static function enabled(): bool {
 		if (!class_exists('\AKSRT\Settings\ExtensionRuntime') || !is_user_logged_in()) {
@@ -60,7 +84,7 @@ class PageAdminSet {
 
 		$button = '<a href="javascript:;" data-toggle="modal" data-target="#modal_admin_set"'
 			. ' title="' . esc_attr__('设置页面参数', 'aksrt') . '" class="admin-set-page float-btn">'
-			. '<i class="fa fa-cog fa-spin" aria-hidden="true"></i>'
+			. '<i class="fa fas fa-cog fa-spin" aria-hidden="true"></i>'
 			. '<div class="abs-right badg c-red px12 admin-set-info" style="width:187px;">' . esc_html__('在此编辑此页面参数', 'aksrt') . '</div></a>';
 
 		return (string) $buttons . $button;
@@ -96,13 +120,13 @@ class PageAdminSet {
 		], admin_url('customize.php'));
 
 		$header = '<div class="modal-header"><strong class="modal-title">'
-			. '<i class="fa fa-sliders mr10" aria-hidden="true"></i>' . esc_html($type_label . __('设置', 'aksrt'))
+			. '<i class="fa fas fa-sliders-h mr10" aria-hidden="true"></i>' . esc_html($type_label . __('设置', 'aksrt'))
 			. '</strong><button class="close" data-dismiss="modal">' . $this->close_icon() . '</button></div>';
 
 		$footer = '<div class="modal-footer">'
-			. '<a target="_blank" title="' . esc_attr__('使用可视化布局配置此页面', 'aksrt') . '" data-toggle="tooltip" href="' . esc_url($widgets_url) . '" class="but c-yellow-2 padding-lg"><i class="fa fa-pie-chart" aria-hidden="true"></i>' . esc_html__('模块布局', 'aksrt') . '</a>'
+			. '<a target="_blank" title="' . esc_attr__('使用可视化布局配置此页面', 'aksrt') . '" data-toggle="tooltip" href="' . esc_url($widgets_url) . '" class="but c-yellow-2 padding-lg"><i class="fa fas fa-chart-pie" aria-hidden="true"></i>' . esc_html__('模块布局', 'aksrt') . '</a>'
-			. ($edit_link ? '<a target="_blank" href="' . esc_url($edit_link) . '" class="but c-yellow padding-lg"><i class="fa fa-wordpress" aria-hidden="true"></i>' . esc_html__('后台编辑', 'aksrt') . '</a>' : '')
+			. ($edit_link ? '<a target="_blank" href="' . esc_url($edit_link) . '" class="but c-yellow padding-lg"><i class="fa fas fa-wordpress" aria-hidden="true"></i>' . esc_html__('后台编辑', 'aksrt') . '</a>' : '')
-			. '<button class="but jb-blue padding-lg wp-ajax-submit"><i class="fa fa-check" aria-hidden="true"></i>' . esc_html__('确认修改', 'aksrt') . '</button>'
+			. '<button class="but jb-blue padding-lg wp-ajax-submit"><i class="fa fas fa-check" aria-hidden="true"></i>' . esc_html__('确认修改', 'aksrt') . '</button>'
 			. '</div>';
 
 		$body = '<div class="modal-body">'

tests/widget-system/frontend-page-edit-harness.php

@@ -20,6 +20,7 @@ namespace {
 	$GLOBALS['aksrt_set_object']          = null;
 	$GLOBALS['aksrt_set_page_templates']  = [];
 	$GLOBALS['aksrt_set_can']             = true;
+	$GLOBALS['aksrt_set_scripts']         = [];
 
 	function __(string $text, string $domain = ''): string { return $text; }
 	function esc_html__($t, $d = ''): string { return (string) $t; }
@@ -84,6 +85,11 @@ namespace {
 	function wp_kses($t, $allowed = null): string { return (string) $t; }
 	function checked($a, $b = true, $echo = true): string { return (string) $a === (string) $b ? ' checked="checked"' : ''; }
 	function selected($a, $b = true, $echo = true): string { return (string) $a === (string) $b ? ' selected="selected"' : ''; }
+	function wp_enqueue_script($handle, $src = '', $deps = [], $ver = false, $in_footer = false): void {
+		$GLOBALS['aksrt_set_scripts'][$handle] = ['src' => $src, 'deps' => $deps, 'in_footer' => $in_footer];
+	}
+	function get_template_directory(): string { return dirname(__DIR__, 2); }
+	function get_template_directory_uri(): string { return 'https://example.test/wp-content/themes/aksrt-theme'; }
 
 	function set_check(bool $condition, string $message): void {
 		if (!$condition) throw new \RuntimeException($message);
@@ -256,5 +262,36 @@ namespace {
 	set_check(($GLOBALS['aksrt_set_meta']['widgets_register'] ?? '') === '', 'closing the widget container must clear the flag');
 	set_check(($GLOBALS['aksrt_set_meta']['widgets_register_container'] ?? ['x']) === [], 'closing the widget container must clear positions');
 
+	// --- Hint script: the transient label must fade like the reference theme. ---
+	PageAdminSet::enqueue_hint_script();
+	$hint = $GLOBALS['aksrt_set_scripts']['aksrt-front-page-admin-set'] ?? null;
+	set_check(is_array($hint), 'the hint fade script must be enqueued when the feature is on');
+	set_check(strpos((string) ($hint['src'] ?? ''), '/assets/js/front-page-admin-set.js') !== false, 'the hint fade script must point at front-page-admin-set.js');
+	set_check(($hint['deps'] ?? []) === ['jquery'], 'the hint fade script must depend on jQuery');
+	set_check(!empty($hint['in_footer']), 'the hint fade script must load in the footer');
+
+	\AKSRT\Settings\ExtensionRuntime::$settings = ['admin_frontend_set' => false];
+	$GLOBALS['aksrt_set_scripts'] = [];
+	PageAdminSet::enqueue_hint_script();
+	set_check($GLOBALS['aksrt_set_scripts'] === [], 'the disabled switch must not enqueue the hint fade script');
+	\AKSRT\Settings\ExtensionRuntime::$settings = ['admin_frontend_set' => true];
+
+	// --- Icons: the site-wide convention is the normalized `fa fas fa-*` form. ---
+	$GLOBALS['aksrt_set_queried'] = 12;
+	$GLOBALS['aksrt_set_is_single'] = true;
+	$GLOBALS['aksrt_set_is_page'] = false;
+	$GLOBALS['aksrt_set_post_type'] = 'post';
+	$GLOBALS['aksrt_set_post'] = (object) ['ID' => 12, 'post_type' => 'post'];
+	ob_start();
+	(new PageAdminSet())->render_modal();
+	$modal_icons = (string) ob_get_clean();
+	foreach (['fa fas fa-sliders-h', 'fa fas fa-times', 'fa fas fa-chart-pie', 'fa fas fa-wordpress', 'fa fas fa-check'] as $icon) {
+		set_check(strpos($modal_icons, $icon) !== false, "modal must use the FA5 icon {$icon}");
+	}
+	set_check(strpos($modal_icons, 'class="fa fa-') === false, 'modal must not use bare FA4 icon classes');
+
+	$gear = (new PageAdminSet())->float_button('', false);
+	set_check(strpos($gear, 'fa fas fa-cog fa-spin') !== false, 'the gear must use the FA5 cog class');
+
 	echo "Frontend page edit harness passed\n";
 }

tests/widget-system/system-tools-contract.test.cjs

@@ -218,6 +218,54 @@ test('frontend page edit ships gate, footer modal, and legacy ajax-save contract
   assert.equal(fs.existsSync(path.join(root, 'assets/js/page-admin-set.js')), false);
 });
 
+test('frontend page edit icons follow the FA5 convention and the hint bar fades like the reference', () => {
+  const pageAdminSet = read('src/Frontend/PageAdminSet.php');
+  const hintJs = read('assets/js/front-page-admin-set.js');
+  const floatingCss = read('assets/css/frontend/floating-buttons.css');
+  const publicCss = read('assets/css/build/public.css');
+  const publicMinCss = read('assets/css/build/public.min.css');
+
+  // Site-wide icon convention is aksrt_icon_markup()'s normalized `fa fas fa-*`:
+  // the gear, the modal header, both footer links and the submit button.
+  // FA5 renames the reference's FA4 glyphs (sliders→sliders-h, pie-chart→chart-pie).
+  assert.match(pageAdminSet, /<i class="fa fas fa-cog fa-spin" aria-hidden="true"><\/i>/);
+  assert.match(pageAdminSet, /<i class="fa fas fa-sliders-h mr10" aria-hidden="true"><\/i>/);
+  assert.match(pageAdminSet, /<i class="fa fas fa-chart-pie" aria-hidden="true"><\/i>/);
+  assert.match(pageAdminSet, /<i class="fa fas fa-wordpress" aria-hidden="true"><\/i>/);
+  assert.match(pageAdminSet, /<i class="fa fas fa-check" aria-hidden="true"><\/i>/);
+  assert.match(pageAdminSet, /<i class="fa fas fa-times" aria-hidden="true"><\/i>/);
+  // No bare FA4 prefixes survive inside the feature markup.
+  assert.doesNotMatch(pageAdminSet, /class="fa fa-(cog|sliders|sliders-h|chart-pie|pie-chart|wordpress|check|times)\b/);
+  // Every glyph must exist in the shipped FA5 build (fa-spin is a utility, not a glyph).
+  const fa5 = read('assets/fontawesome5/css/all.min.css');
+  for (const token of ['fa-cog', 'fa-sliders-h', 'fa-chart-pie', 'fa-wordpress', 'fa-check', 'fa-times']) {
+    assert.ok(fa5.includes(`.${token}:before`), `${token} is missing from Font Awesome 5.15.4`);
+  }
+
+  // The transient label fades 2s after load over 1s (reference js/page-edit.js).
+  assert.match(pageAdminSet, /add_action\('wp_footer', \[self::class, 'enqueue_hint_script'\], 9\)/);
+  assert.match(pageAdminSet, /wp_enqueue_script\(\s*'aksrt-front-page-admin-set',\s*get_template_directory_uri\(\) \. '\/assets\/js\/front-page-admin-set\.js',\s*\['jquery'\],\s*\(string\) filemtime\(\$path\),\s*true\s*\)/s);
+  assert.match(hintJs, /setTimeout\(function \(\) \{/, 'the fade is delayed like the reference');
+  assert.match(hintJs, /hint\.style\.transition = 'opacity 1s'/);
+  assert.match(hintJs, /hint\.style\.opacity = '0'/);
+  assert.match(hintJs, /querySelector\('\.admin-set-page \.admin-set-info'\)/);
+
+  // Label geometry: reference .abs-right is top:50% + right:.7em + translateY(-50%).
+  // AKSRT's legacy .abs-right is top:0/right:0, so the float bar restores it.
+  // The minified bundle has no space before the brace, so keep it optional.
+  const labelRule = /\.float-right \.admin-set-page \.admin-set-info\s*\{[^}]*\}/s;
+  assert.match(floatingCss, labelRule);
+  assert.match(publicCss, labelRule);
+  assert.match(publicMinCss, labelRule);
+  for (const css of [floatingCss, publicCss, publicMinCss]) {
+    const rule = css.match(labelRule)[0];
+    assert.match(rule, /position:\s*absolute/);
+    assert.match(rule, /top:\s*50%/);
+    assert.match(rule, /right:\s*0?\.7em/);
+    assert.match(rule, /transform:\s*translateY\(-50%\)/);
+  }
+});
+
 test('float toolbar config reaches the tinymce plugin with reference-context buttons', () => {
   const editorJs = read('assets/js/front-submit-editor.js');
   const submitPage = read('templates/pages/page-submit.php');