feat(widgets): rebuild admin widgets page to match reference theme

- Replace transfer modal/admin-post flow with reference-style AJAX
  export/import/template dialogs (admin-transfer.js, TransferController)
- Customizer "移出模块" action, reference lazy form loading with t-notice
- Common fields use reference labels, dependencies, compact/inline rows,
  top/bottom-only extra spacing; form header with description/reminder
- Remove placement hint, template preview and legacy transfer code
- Fix widget audit (current_datetime stub, honor catalog common flags)
  and regenerate stale golden fixtures for posts_toc, quote, posts

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

assets/widgets/admin-transfer.js

@@ -0,0 +1,325 @@
+/* Sidebar toolbar: per-area export / import / template import (zibll WIE flow). */
+(function ($) {
+  'use strict';
+
+  const config = window.aksrtWidgetAdmin || {};
+  const t = (key) => (config.i18n && config.i18n[key]) || key;
+
+  function post(action, data) {
+    return $.ajax({
+      url: config.ajaxUrl,
+      type: 'POST',
+      dataType: 'json',
+      data: $.extend({ action, nonce: config.transferNonce }, data || {}),
+    });
+  }
+
+  function failMessage(res, xhr, fallbackKey) {
+    return res?.data?.message || xhr?.responseJSON?.data?.message || t(fallbackKey);
+  }
+
+  function clearResult($result) {
+    return $result.removeClass('is-ok is-warn is-err').empty();
+  }
+
+  function showError($result, message) {
+    clearResult($result).addClass('is-err').text(message);
+  }
+
+  function reloadButton() {
+    return $('<p class="aksrt-wie-modal__reload-wrap"></p>').append(
+      $('<button type="button" class="button button-primary aksrt-wie-modal__reload"></button>').text(t('reloadPage'))
+    );
+  }
+
+  function renderImportResult($result, res, autoReload) {
+    clearResult($result);
+    if (!res?.success || !res.data) {
+      showError($result, failMessage(res, null, 'importFailed'));
+      return;
+    }
+    const warnings = Array.isArray(res.data.warnings) ? res.data.warnings : [];
+    $result.addClass(warnings.length ? 'is-warn' : 'is-ok');
+    [res.data.message || t('importSuccess')].concat(warnings).forEach((line, index) => {
+      if (index) $result.append('<br>');
+      $result.append(document.createTextNode(String(line)));
+    });
+    $result.append(reloadButton());
+    if (autoReload) window.setTimeout(() => window.location.reload(), 200);
+  }
+
+  function withButtonLoading($button, loadingText, idleText, request) {
+    $button.prop('disabled', true).text(loadingText);
+    return request().always(() => $button.prop('disabled', false).text(idleText));
+  }
+
+  function importModeHtml(name) {
+    return `<div class="aksrt-wie-modal__import-mode">
+      <div class="aksrt-wie-modal__import-mode-title description"></div>
+      <label class="aksrt-wie-modal__import-mode-row"><input type="radio" name="${name}" value="replace"> <span data-mode-label="replace"></span></label>
+      <label class="aksrt-wie-modal__import-mode-row"><input type="radio" name="${name}" value="append" checked> <span data-mode-label="append"></span></label>
+    </div>`;
+  }
+
+  function createModal(opts) {
+    let $modal = null;
+
+    function ensure() {
+      if ($modal) return $modal;
+      $modal = $(`<div id="${opts.id}" class="aksrt-wie-modal${opts.extraClass ? ' ' + opts.extraClass : ''}" aria-hidden="true">
+        <div class="aksrt-wie-modal__backdrop" data-aksrt-wie-close></div>
+        <div class="aksrt-wie-modal__dialog" role="dialog" aria-modal="true">
+          <button type="button" class="aksrt-wie-modal__close" data-aksrt-wie-close aria-label="${t('close')}">&times;</button>
+          ${opts.bodyHtml}
+          ${opts.actionsHtml}
+          <p class="aksrt-wie-modal__result" aria-live="polite"></p>
+        </div>
+      </div>`).appendTo('body');
+      $modal.find('.aksrt-wie-modal__import-mode-title').text(t('importModeLabel'));
+      $modal.find('[data-mode-label="replace"]').text(t('importModeReplace'));
+      $modal.find('[data-mode-label="append"]').text(t('importModeAppend'));
+      $modal.find('.aksrt-wie-modal__cancel').text(t('close'));
+      $modal.on('click', '[data-aksrt-wie-close], .aksrt-wie-modal__cancel', close);
+      if (opts.onInit) opts.onInit($modal);
+      return $modal;
+    }
+
+    function open() {
+      ensure().find('input[name$="-import-mode"][value="append"]').prop('checked', true);
+      clearResult($modal.find('.aksrt-wie-modal__result'));
+      $modal.addClass('is-open').attr('aria-hidden', 'false');
+    }
+
+    function close() {
+      if ($modal) $modal.removeClass('is-open').attr('aria-hidden', 'true');
+    }
+
+    return { ensure, open, close, $result: () => ensure().find('.aksrt-wie-modal__result') };
+  }
+
+  const state = { mode: 'export', sidebarId: '', templateSidebarId: '' };
+
+  const ioModal = createModal({
+    id: 'aksrt-wie-modal',
+    bodyHtml: `<h3 class="aksrt-wie-modal__title"></h3>
+      <p class="aksrt-wie-modal__hint description"></p>
+      <textarea class="aksrt-wie-modal__textarea" spellcheck="false"></textarea>
+      ${importModeHtml('aksrt-wie-import-mode')}`,
+    actionsHtml: `<p class="aksrt-wie-modal__actions">
+      <button type="button" class="button aksrt-wie-modal__copy"></button>
+      <button type="button" class="button button-primary aksrt-wie-modal__submit"></button>
+      <button type="button" class="button aksrt-wie-modal__cancel"></button>
+    </p>`,
+    onInit($modal) {
+      $modal.find('.aksrt-wie-modal__copy').on('click', function () {
+        const textarea = $modal.find('.aksrt-wie-modal__textarea')[0];
+        textarea.select();
+        textarea.setSelectionRange(0, textarea.value.length);
+        try {
+          document.execCommand('copy');
+          $(this).text(t('copyDone'));
+        } catch (_error) {
+          window.alert(t('copyFail'));
+        }
+      });
+      $modal.find('.aksrt-wie-modal__submit').on('click', submitImport);
+    },
+  });
+
+  const templateModal = createModal({
+    id: 'aksrt-wie-template-modal',
+    extraClass: 'aksrt-wie-template-layer',
+    bodyHtml: `<h3 class="aksrt-wie-modal__title"></h3>
+      <div class="aksrt-wie-modal__hint description"></div>
+      <div class="aksrt-wie-template-list-wrap"><p class="aksrt-wie-template-list-status description"></p><div class="aksrt-wie-template-list"></div></div>
+      ${importModeHtml('aksrt-wie-template-import-mode')}`,
+    actionsHtml: `<p class="aksrt-wie-modal__actions">
+      <button type="button" class="button button-primary aksrt-wie-template-submit"></button>
+      <button type="button" class="button aksrt-wie-modal__cancel"></button>
+    </p>`,
+    onInit($modal) {
+      $modal.find('.aksrt-wie-modal__title').text(t('templateModalTitle'));
+      // templateHint is server-built, escaped translation markup.
+      $modal.find('.aksrt-wie-modal__hint').html(t('templateHint'));
+      $modal.find('.aksrt-wie-template-submit').text(t('templateSubmit')).on('click', submitTemplate);
+    },
+  });
+
+  function openIoModal(mode, sidebarId) {
+    state.mode = mode;
+    state.sidebarId = sidebarId;
+    const $modal = ioModal.ensure();
+    const isExport = mode === 'export';
+    $modal.find('.aksrt-wie-modal__title').text(t(isExport ? 'exportTitle' : 'importTitle'));
+    $modal.find('.aksrt-wie-modal__hint').text(t(isExport ? 'exportHint' : 'importHint'));
+    $modal.find('.aksrt-wie-modal__textarea').prop('readonly', isExport).val('');
+    $modal.find('.aksrt-wie-modal__copy').toggle(isExport).text(t('copy'));
+    $modal.find('.aksrt-wie-modal__submit').toggle(!isExport).text(t('submitImport')).prop('disabled', false);
+    $modal.find('.aksrt-wie-modal__import-mode').toggle(!isExport);
+    ioModal.open();
+    if (isExport) fetchExport();
+  }
+
+  function fetchExport() {
+    const $textarea = ioModal.ensure().find('.aksrt-wie-modal__textarea').val(t('loadingExport'));
+    post('aksrt_widgets_export_sidebar', { sidebar_id: state.sidebarId })
+      .done((res) => {
+        if (res?.success && res.data?.json_text) {
+          $textarea.val(res.data.json_text);
+          return;
+        }
+        $textarea.val('');
+        showError(ioModal.$result(), failMessage(res, null, 'exportFailed'));
+      })
+      .fail((xhr) => {
+        $textarea.val('');
+        showError(ioModal.$result(), failMessage(null, xhr, 'networkError'));
+      });
+  }
+
+  function submitImport() {
+    const $modal = ioModal.ensure();
+    const mode = $modal.find('input[name="aksrt-wie-import-mode"]:checked').val() || 'append';
+    if (!window.confirm(t(mode === 'append' ? 'confirmImportAppend' : 'confirmImportReplace'))) return;
+    const raw = String($modal.find('.aksrt-wie-modal__textarea').val() || '').trim();
+    if (!raw) {
+      showError(ioModal.$result(), t('pasteJsonFirst'));
+      return;
+    }
+    withButtonLoading($modal.find('.aksrt-wie-modal__submit'), t('loadingImport'), t('submitImport'), () =>
+      post('aksrt_widgets_import_sidebar', { sidebar_id: state.sidebarId, json: raw, import_mode: mode })
+        .done((res) => {
+          if (res?.success) $modal.find('.aksrt-wie-modal__textarea').val('');
+          renderImportResult(ioModal.$result(), res, false);
+        })
+        .fail((xhr) => showError(ioModal.$result(), failMessage(null, xhr, 'networkError')))
+    );
+  }
+
+  function templateItem(template) {
+    const $meta = $('<span class="aksrt-wie-template-item-meta"></span>')
+      .append($('<span class="aksrt-wie-template-item-title"></span>').text(template.title || template.id));
+    if (template.desc) $meta.append($('<span class="aksrt-wie-template-item-desc"></span>').text(template.desc));
+    if (template.remind) {
+      $meta.append($('<span class="aksrt-wie-template-item-remind"></span>')
+        .append('<span class="dashicons dashicons-info-outline" aria-hidden="true"></span>')
+        .append(document.createTextNode(template.remind)));
+    }
+    if (Array.isArray(template.modules) && template.modules.length) {
+      $meta.append($('<span class="aksrt-wie-template-item-modules"></span>').text(template.modules.map((module) => module.title).join(' / ')));
+    }
+    const $label = $('<label class="aksrt-wie-template-item-label"></label>')
+      .append($('<input type="radio" name="aksrt-wie-template-id">').val(template.id))
+      .append($meta);
+    return $('<div class="aksrt-wie-template-item"></div>').append($('<div class="aksrt-wie-template-item-row"></div>').append($label));
+  }
+
+  function openTemplateModal(sidebarId) {
+    state.templateSidebarId = sidebarId;
+    const $modal = templateModal.ensure();
+    const $list = $modal.find('.aksrt-wie-template-list').empty();
+    const $status = $modal.find('.aksrt-wie-template-list-status').text(t('templateLoadingList'));
+    templateModal.open();
+    post('aksrt_widgets_list_templates')
+      .done((res) => {
+        const templates = res?.success ? res.data?.templates : null;
+        $status.text(Array.isArray(templates) && templates.length ? '' : t('templateEmpty'));
+        (templates || []).forEach((template) => $list.append(templateItem(template)));
+      })
+      .fail((xhr) => $status.text(failMessage(null, xhr, 'networkError')));
+  }
+
+  function submitTemplate() {
+    const $modal = templateModal.ensure();
+    const $picked = $modal.find('input[name="aksrt-wie-template-id"]:checked');
+    if (!$picked.length) {
+      window.alert(t('templatePick'));
+      return;
+    }
+    const templateId = String($picked.val());
+    const mode = $modal.find('input[name="aksrt-wie-template-import-mode"]:checked').val() || 'append';
+    const title = $picked.closest('.aksrt-wie-template-item').find('.aksrt-wie-template-item-title').text().trim() || templateId;
+    const message = t('confirmTemplate').replace('{title}', title).replace('{mode}', t(mode === 'append' ? 'importModeAppend' : 'importModeReplace'));
+    if (!window.confirm(message)) return;
+    withButtonLoading($modal.find('.aksrt-wie-template-submit'), t('loadingImport'), t('templateSubmit'), () =>
+      post('aksrt_widgets_import_template', { sidebar_id: state.templateSidebarId, template_id: templateId, import_mode: mode })
+        .done((res) => renderImportResult(templateModal.$result(), res, true))
+        .fail((xhr) => showError(templateModal.$result(), failMessage(null, xhr, 'networkError')))
+    );
+  }
+
+  function injectToolbar($anchor, sidebarId) {
+    if (!$anchor?.length || !sidebarId || $anchor.next('.aksrt-wie-toolbar').length) return;
+    const $toolbar = $('<div class="aksrt-wie-toolbar"></div>');
+    [['export', 'exportModules'], ['import', 'importModules'], ['template', 'importTemplate']].forEach(([action, label]) => {
+      $('<button type="button" class="button button-small"></button>')
+        .text(t(label))
+        .attr('data-aksrt-wie-action', action)
+        .attr('data-sidebar-id', sidebarId)
+        .appendTo($toolbar);
+    });
+    $anchor.after($toolbar);
+  }
+
+  function scanWidgetsScreen() {
+    $('.widgets-holder-wrap:not(#available-widgets):not(.inactive-sidebar):not(.is-aksrt-wie)').each(function () {
+      const $wrap = $(this);
+      const $sortables = $wrap.find('.widgets-sortables').first();
+      const sidebarId = String($sortables.attr('id') || '');
+      if (!sidebarId) return;
+      const $description = $sortables.find('.sidebar-description .description').first();
+      $wrap.addClass('is-aksrt-wie');
+      injectToolbar($description.length ? $description : $sortables.find('.description').first(), sidebarId);
+    });
+  }
+
+  function scanCustomizer() {
+    const prefix = 'sub-accordion-section-sidebar-widgets-';
+    $('.control-section-sidebar:not(.is-aksrt-wie)').each(function () {
+      const $section = $(this);
+      const sectionId = String($section.attr('id') || '');
+      if (!sectionId.startsWith(prefix) || sectionId.length === prefix.length) return;
+      $section.addClass('is-aksrt-wie');
+      const $description = $section.find('.section-meta .description').first();
+      injectToolbar($description.length ? $description : $section.find('.accordion-section-title, .customize-section-title').first(), sectionId.slice(prefix.length));
+    });
+    $('.customize-control-widget_form:not(.is-aksrt-wie)').each(function () {
+      const $nav = $(this).find('.widget-reorder-nav').first();
+      if (!$nav.length) return;
+      $('<span class="aksrt-wie-btn-delete dashicons-trash" tabindex="0" role="button"></span>').text(t('removeModule')).appendTo($nav);
+      $(this).addClass('is-aksrt-wie');
+    });
+  }
+
+  $(document)
+    .on('click', '[data-aksrt-wie-action]', function () {
+      const action = String($(this).data('aksrt-wie-action'));
+      const sidebarId = String($(this).data('sidebar-id') || '');
+      if (!sidebarId) return;
+      if (action === 'template') openTemplateModal(sidebarId);
+      else openIoModal(action, sidebarId);
+    })
+    .on('click keydown', '.aksrt-wie-btn-delete', function (event) {
+      if (event.type === 'keydown' && event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      $(this).closest('.customize-control-widget_form').find('.widget-control-remove').first().trigger('click');
+    })
+    .on('click', '.aksrt-wie-modal__reload', () => window.location.reload())
+    .on('keydown', (event) => {
+      if (event.key !== 'Escape') return;
+      ioModal.close();
+      templateModal.close();
+    })
+    .on('widget-added', () => {
+      if (document.body.classList.contains('wp-customizer')) scanCustomizer();
+    });
+
+  $(function () {
+    if (!config.ajaxUrl) return;
+    if (document.body.classList.contains('widgets-php')) scanWidgetsScreen();
+    if (document.body.classList.contains('wp-customizer')) {
+      window.wp?.customize?.bind?.('ready', () => window.setTimeout(scanCustomizer, 300));
+      $(document).on('click', '.control-panel-widgets .control-section-sidebar', () => window.setTimeout(scanCustomizer, 100));
+    }
+  });
+})(jQuery);

assets/widgets/admin.css

@@ -41,6 +41,21 @@
 .aksrt-widget-field--switcher .description { grid-column: 1 / -1; grid-row: 2; }
 .aksrt-widget-field--switcher > .aksrt-widget-switch { grid-column: 2; grid-row: 1; }
 
+/* Reference CSF row modifiers. */
+.aksrt-widget-field.is-compact { margin-top: -12px; padding-top: 0; border-top: 0; }
+.aksrt-widget-field__subtitle { margin: 0 0 5px; color: #646970; font-size: 12px; }
+.aksrt-widget-field.is-inline .aksrt-widget-choices--radio label > span { padding: 0; border: 0; background: none; box-shadow: none; }
+.aksrt-widget-field.is-inline .aksrt-widget-choices--radio { gap: 4px 14px; }
+.aksrt-widget-field--content { padding: 10px 0; color: #50575e; }
+.aksrt-widget-field--subheading { padding: 10px 12px; margin: 6px 0 0; border: 0; background: #f6f7f9; color: #0991f5; font-weight: 600; }
+.aksrt-widget-field--submessage { padding: 8px 12px; margin: 8px 0; border: 0; border-radius: 4px; font-size: 13px; }
+.aksrt-widget-field--submessage-normal { background: #f5f5f5; color: #555; }
+.aksrt-widget-field--submessage-success { background: rgba(18, 185, 40, .1); color: #12b928; }
+.aksrt-widget-field--submessage-info { background: rgba(41, 151, 247, .1); color: #2997f7; }
+.aksrt-widget-field--submessage-warning { background: rgba(255, 156, 57, .1); color: #e18c47; }
+.aksrt-widget-field--submessage-danger { background: rgba(255, 69, 69, .1); color: #ff4646; }
+.aksrt-widget-field .c-yellow { color: #fc844c; }
+
 .aksrt-widget-switch {
   display: inline-flex;
   cursor: pointer;
@@ -144,6 +159,8 @@
   gap: 6px;
 }
 
+.aksrt-widget-spacing--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+
 .aksrt-widget-spacing label span {
   display: block;
   margin-bottom: 3px;
@@ -201,55 +218,63 @@
 .aksrt-widget-form .button { min-height: 32px; line-height: 30px; border-radius: 3px; }
 .aksrt-widget-form .button-primary { background: #0991f5; border-color: #087bcf; }
 
-.aksrt-widget-form-lazy {
-  padding: 14px;
-  border: 1px dashed #c3c4c7;
-  border-radius: 6px;
-  text-align: center;
-}
+.aksrt-widget-form-lazy { padding: 10px 0; }
+.aksrt-widget-form-lazy__status:empty { display: none; }
 
-.aksrt-widget-form-lazy__status { margin-top: 0; color: #646970; }
+/* Reference t-notice boxes (lazy form status). */
+.t-notice { padding: 8px 12px; border-radius: 4px; font-size: 13px; line-height: 1.5; }
+.t-notice.t-loading { background: rgba(255, 156, 57, .1); color: #e18c47; }
+.t-notice.t-error { background: rgba(255, 69, 69, .1); color: #ff4646; }
 
-.aksrt-widget-placement-hint {
-	display: flex;
-	gap: 6px;
-	align-items: flex-start;
-	margin: 10px 0 0;
-	padding: 8px;
-	border-left: 3px solid #72aee6;
-	background: #f0f6fc;
-	color: #50575e;
-}
+/* Sidebar toolbar: export / import / template import. */
+.aksrt-wie-toolbar { margin: 8px 0 12px; }
+.aksrt-wie-toolbar .button { margin-right: 6px; margin-bottom: 4px; }
+.aksrt-wie-btn-delete { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; color: #b32d2e; font-size: 12px; cursor: pointer; }
+.aksrt-wie-btn-delete::before { font: normal 16px/1 dashicons; content: '182'; }
+.aksrt-wie-btn-delete:hover,
+.aksrt-wie-btn-delete:focus { color: #d63638; }
 
-.aksrt-widget-placement-hint.is-warning {
-	border-color: #dba617;
-	background: #fcf9e8;
-	color: #614200;
-}
+/* WIE modal shell. */
+.aksrt-wie-modal { display: none; position: fixed; inset: 0; z-index: 1000100; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }
+.aksrt-wie-modal.is-open { display: flex; }
+.aksrt-wie-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
+.aksrt-wie-modal__dialog { position: relative; z-index: 1; width: 100%; max-width: min(920px, 96vw); max-height: 90vh; overflow: auto; padding: 18px 20px 16px; box-sizing: border-box; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; box-shadow: 0 8px 32px rgba(0, 0, 0, .14); }
+.aksrt-wie-modal__close { position: absolute; top: 10px; right: 10px; width: 2em; height: 2em; padding: 0; border: none; background: transparent; color: #646970; font-size: 20px; line-height: 1; cursor: pointer; }
+.aksrt-wie-modal__close:hover { color: #1d2327; }
+.aksrt-wie-modal__title { margin: 0 32px 10px 0; font-size: 16px; line-height: 1.3; }
+.aksrt-wie-modal__hint { margin: 0 0 10px; font-size: 13px; }
+.aksrt-wie-modal__import-mode { display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #dcdcde; border-radius: 4px; background: #f6f7f7; }
+.aksrt-wie-modal__import-mode-title { margin: 0 0 8px; font-weight: 600; }
+.aksrt-wie-modal__import-mode-row { display: block; margin: 6px 0 0; cursor: pointer; }
+.aksrt-wie-modal__import-mode-row input { margin-right: 6px; vertical-align: middle; }
+.aksrt-wie-modal__textarea { width: 100%; min-height: 240px; box-sizing: border-box; font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 1.45; }
+.aksrt-wie-modal__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
+.aksrt-wie-modal__result { margin: 10px 0 0; font-size: 13px; }
+.aksrt-wie-modal__result.is-ok { color: #008a20; }
+.aksrt-wie-modal__result.is-warn { color: #996800; }
+.aksrt-wie-modal__result.is-err { color: #d63638; }
+.aksrt-wie-modal__reload-wrap { margin: 12px 0 0; }
+.aksrt-wie-remind { margin-bottom: 10px; color: #fc844c; font-size: .9em; }
+.aksrt-wie-remind b { color: inherit; }
 
-.aksrt-widget-transfer-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
-.aksrt-widget-transfer-toolbar .button { margin: 0; }
-.aksrt-widget-customizer-remove { margin-left: 8px; color: #b32d2e; }
-.aksrt-widget-transfer-modal[hidden] { display: none !important; }
-.aksrt-widget-transfer-modal.is-open { position: fixed; inset: 0; z-index: 1000100; display: flex; align-items: center; justify-content: center; padding: 20px; }
-.aksrt-widget-transfer-modal__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0, 0, 0, .45); }
-.aksrt-widget-transfer-modal__dialog { position: relative; z-index: 1; box-sizing: border-box; width: min(720px, 96vw); max-height: 90vh; overflow: auto; padding: 18px 20px 16px; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; box-shadow: 0 8px 32px rgba(0, 0, 0, .14); }
-.aksrt-widget-transfer-modal__dialog h2 { margin: 0 36px 10px 0; font-size: 16px; }
-.aksrt-widget-transfer-modal__area { margin: 0 0 12px; }
-.aksrt-widget-transfer-modal__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; background: transparent; color: #646970; font-size: 22px; cursor: pointer; }
-.aksrt-widget-transfer-modal__tabs { display: flex; gap: 6px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #dcdcde; }
-.aksrt-widget-transfer-modal__tabs .is-active { border-color: #0991f5; color: #087bcf; box-shadow: inset 0 -2px #0991f5; }
-.aksrt-widget-transfer-modal__panel form { display: grid; align-content: start; gap: 10px; }
-.aksrt-widget-transfer-modal__panel select,
-.aksrt-widget-transfer-modal__panel input[type="file"] { width: 100%; }
-.aksrt-widget-transfer__actions { display: flex; flex-wrap: wrap; gap: 8px; }
-.aksrt-widget-template-preview-output { max-height: 420px; overflow: auto; margin-top: 14px; padding: 14px; border: 1px solid #dcdcde; background: #fff; }
-.aksrt-widget-template-preview__area { margin-bottom: 18px; }
-.aksrt-widget-template-preview__module { margin: 10px 0; padding: 12px; border: 1px dashed #c3c4c7; border-radius: 6px; }
+/* Template picker layer. */
+.aksrt-wie-template-layer { z-index: 1000120; }
+.aksrt-wie-template-list-wrap { margin-bottom: 12px; }
+.aksrt-wie-template-list { display: flex; flex-wrap: wrap; gap: 10px; max-height: 42vh; overflow: auto; }
+.aksrt-wie-template-item { flex: 1 1 30%; min-width: 360px; }
+.aksrt-wie-template-item-row { display: flex; gap: 8px; align-items: flex-start; height: 100%; }
+.aksrt-wie-template-item-label { display: flex; flex: 1 1 auto; gap: 10px; align-items: flex-start; min-width: 0; height: stretch; margin: 0; padding: 10px 12px; border: 1px solid #efeeee; border-radius: 8px; background: #fbfbfb; cursor: pointer; }
+.aksrt-wie-template-item-label:hover { background: #f7fbfe; }
+.aksrt-wie-template-item-label input[type="radio"] { flex-shrink: 0; margin-top: 3px; }
+.aksrt-wie-template-item-meta { display: flex; flex-direction: column; gap: 4px; }
+.aksrt-wie-template-item-title { font-weight: 600; }
+.aksrt-wie-template-item-desc { color: #646970; font-size: 12px; line-height: 1.4; }
+.aksrt-wie-template-item-remind { color: #fc844c; font-size: 12px; line-height: 1.4; }
+.aksrt-wie-template-item-modules { margin: 0; padding-left: 1.2em; font-size: 12px; line-height: 1.5; color: #50575e; }
 
 @media (max-width: 600px) {
-	.aksrt-widget-transfer-modal.is-open { padding: 10px; }
-	.aksrt-widget-transfer-modal__dialog { width: 100%; padding: 16px; }
+	.aksrt-wie-modal { padding: 10px; }
+	.aksrt-wie-template-item { min-width: 100%; }
 }
 
 @media (prefers-reduced-motion: reduce) {

assets/widgets/admin.js

@@ -22,7 +22,6 @@
     });
     evaluateDependencies($root);
 	updateWidgetTitle($root);
-	updatePlacementWarning($root);
 	updateRepeaterControls($root);
   }
 
@@ -54,82 +53,6 @@
 		}).first().replaceWith(`${title} `);
 	}
 
-	function updatePlacementWarning(root) {
-		const $widget = $(root).closest('.widget');
-		const $hint = $widget.find('.aksrt-widget-placement-hint').first();
-		if (!$hint.length) return;
-		const size = String($hint.data('widget-size') || 'any');
-		const area = String($widget.closest('.widgets-sortables').attr('id') || '');
-		const isSidebar = /sidebar/.test(area);
-		$hint.toggleClass('is-warning', (size === 'wide' && isSidebar) || (size === 'sidebar' && !isSidebar && area !== ''));
-	}
-
-  function injectTransferToolbar($anchor, sidebarId) {
-    if (!$anchor?.length || !sidebarId || $anchor.next('.aksrt-widget-transfer-toolbar').length) return;
-    const $toolbar = $('<div class="aksrt-widget-transfer-toolbar" role="group"></div>');
-    [
-      ['export', config.i18n?.export || '导出'],
-      ['import', config.i18n?.import || '导入'],
-      ['template', config.i18n?.template || '应用模板'],
-    ].forEach(([action, label]) => {
-      $('<button type="button" class="button button-small"></button>')
-        .text(label)
-        .attr('data-aksrt-transfer-action', action)
-        .attr('data-sidebar-id', sidebarId)
-        .appendTo($toolbar);
-    });
-    $anchor.after($toolbar);
-  }
-
-  function scanWidgetAreas() {
-    $('.widgets-holder-wrap:not(#available-widgets):not(.inactive-sidebar)').each(function () {
-      const $wrap = $(this);
-      const $sortables = $wrap.find('.widgets-sortables').first();
-      const sidebarId = String($sortables.attr('id') || '');
-      if (!sidebarId) return;
-      const $description = $sortables.find('.sidebar-description .description').first();
-      const $anchor = $description.length ? $description : $sortables.find('.description').first();
-      if ($anchor.length) injectTransferToolbar($anchor, sidebarId);
-    });
-
-    $('.control-section-sidebar').each(function () {
-      const $section = $(this);
-      const sectionId = String($section.attr('id') || '');
-      const prefix = 'sub-accordion-section-sidebar-widgets-';
-      if (!sectionId.startsWith(prefix)) return;
-      const sidebarId = sectionId.slice(prefix.length);
-      const $description = $section.find('.section-meta .description').first();
-      const $anchor = $description.length ? $description : $section.find('.accordion-section-title, .customize-section-title').first();
-      if ($anchor.length) injectTransferToolbar($anchor, sidebarId);
-    });
-
-    $('.customize-control-widget_form').each(function () {
-      const $control = $(this);
-      const $nav = $control.find('.widget-reorder-nav').first();
-      if (!$nav.length || $nav.find('.aksrt-widget-customizer-remove').length) return;
-      $('<button type="button" class="button-link-delete aksrt-widget-customizer-remove" aria-label="移除此小工具">移除</button>').appendTo($nav);
-    });
-  }
-
-  function openTransferModal(action, sidebarId) {
-    const $modal = $('#aksrt-widget-transfer-modal');
-    if (!$modal.length) return;
-    const sidebars = config.sidebars || {};
-    const areaName = sidebars[sidebarId] || sidebarId;
-    $modal.find('.aksrt-widget-transfer-modal__area').text(areaName);
-    $modal.find('input[name="sidebar"], input[name="target_sidebar"]').val(sidebarId);
-    $modal.find('[data-transfer-tab]').removeClass('is-active');
-    $modal.find(`[data-transfer-tab="${action}"]`).addClass('is-active');
-    $modal.find('[data-transfer-panel]').prop('hidden', true);
-    $modal.find(`[data-transfer-panel="${action}"]`).prop('hidden', false);
-    $modal.prop('hidden', false).addClass('is-open').attr('aria-hidden', 'false');
-    $modal.find('[data-transfer-panel="' + action + '"] button, [data-transfer-panel="' + action + '"] input, [data-transfer-panel="' + action + '"] select').filter(':visible').first().trigger('focus');
-  }
-
-  function closeTransferModal() {
-    $('#aksrt-widget-transfer-modal').removeClass('is-open').attr('aria-hidden', 'true').prop('hidden', true);
-  }
-
   function loadForm(container) {
     const $container = $(container);
     if ($container.data('loading') || $container.data('loaded')) return;
@@ -138,7 +61,8 @@
     const number = core.resolveWidgetNumber(inputName, $widget.attr('id'), $container.data('widget-number'));
     // New-widget templates use __i__ until WordPress assigns a real instance number.
     if (!number) return;
-    $container.data('loading', true).find('.aksrt-widget-form-lazy__status').text(config.i18n?.loading || 'Loading…');
+    $container.data('loading', true);
+    setLazyStatus($container, 'loading', config.i18n?.loading || '正在加载模块配置…');
     $.post(config.ajaxUrl, {
       action: config.action,
       nonce: config.nonce,
@@ -146,17 +70,25 @@
       widget_number: number,
     }).done((response) => {
       if (!response?.success || !response.data?.html) {
-        $container.data('loading', false).find('.aksrt-widget-form-lazy__status').text(response?.data?.message || config.i18n?.error || 'Failed to load.');
+        $container.data('loading', false);
+        setLazyStatus($container, 'error', response?.data?.message || config.i18n?.error || '加载失败，请刷新页面后重试');
         return;
       }
       const $form = $(response.data.html);
-      $container.replaceWith($form);
+      $container.data('loaded', true).replaceWith($form);
       initForm($form);
-    }).fail(() => {
-      $container.data('loading', false).find('.aksrt-widget-form-lazy__status').text(config.i18n?.error || 'Failed to load.');
+    }).fail((xhr) => {
+      $container.data('loading', false);
+      setLazyStatus($container, 'error', xhr?.responseJSON?.data?.message || config.i18n?.error || '加载失败，请刷新页面后重试');
     });
   }
 
+  /* Lazy placeholder status uses the reference t-notice box (t-loading / t-error). */
+  function setLazyStatus($container, type, message) {
+    const $notice = $('<div class="t-notice"></div>').addClass(`t-${type}`).text(message);
+    $container.find('.aksrt-widget-form-lazy__status').empty().append($notice);
+  }
+
   function renumberRepeaters(_event, ui) {
     const $form = $(ui?.item || this).closest('.aksrt-widget-form');
     $form.find('.aksrt-widget-repeater__rows').each(function () {
@@ -216,24 +148,10 @@
   }
 
   $(document)
-    .on('click', '[data-aksrt-transfer-action]', function () {
-      openTransferModal(String($(this).data('aksrt-transfer-action')), String($(this).data('sidebar-id')));
+    .on('click', '.widget-top', function () {
+      const $widget = $(this).closest('.widget, .customize-control-widget_form');
+      window.setTimeout(() => $widget.find('.aksrt-widget-form-lazy').each(function () { loadForm(this); }), 20);
     })
-    .on('click', '[data-aksrt-transfer-close]', closeTransferModal)
-    .on('click', '[data-transfer-tab]', function () {
-      const $modal = $(this).closest('.aksrt-widget-transfer-modal');
-      const panel = String($(this).data('transfer-tab'));
-      $modal.find('[data-transfer-tab]').removeClass('is-active');
-      $(this).addClass('is-active');
-      $modal.find('[data-transfer-panel]').prop('hidden', true);
-      $modal.find(`[data-transfer-panel="${panel}"]`).prop('hidden', false);
-    })
-    .on('click', '.aksrt-widget-customizer-remove', function (event) {
-      event.preventDefault();
-      $(this).closest('.customize-control-widget_form').find('.widget-control-remove').first().trigger('click');
-    })
-    .on('click', '.aksrt-widget-form-lazy__load', function () { loadForm($(this).closest('.aksrt-widget-form-lazy')); })
-    .on('click', '.widget.open .aksrt-widget-form-lazy, .customize-control-widget_form .aksrt-widget-form-lazy', function () { loadForm(this); })
     .on('change input', '.aksrt-widget-form input, .aksrt-widget-form select, .aksrt-widget-form textarea', function () {
 		const $form = $(this).closest('.aksrt-widget-form');
 		evaluateDependencies($form);
@@ -300,31 +218,10 @@
       const $wrap = $(this).closest('.aksrt-widget-upload');
       $wrap.find('input[type="url"]').val('').trigger('change');
       $wrap.find('img').remove();
-    })
-	.on('click', '.aksrt-widget-template-preview', function () {
-		const $form = $(this).closest('form');
-		const $output = $('.aksrt-widget-template-preview-output').first();
-		$output.prop('hidden', false).html('<p>正在生成预览…</p>');
-		$.post(config.ajaxUrl, {
-			action: 'aksrt_widgets_template_preview',
-			nonce: config.transferNonce,
-			template: $form.find('[name="template"]').val(),
-		}).done((response) => {
-			if (!response?.success || !response.data) {
-				$output.empty().append($('<p class="notice notice-error"></p>').text(response?.data?.message || config.i18n?.error || '预览加载失败，请重试。'));
-				return;
-			}
-			$output.html(response.data.html || '<p>模板为空。</p>');
-		}).fail((xhr) => {
-			const message = xhr?.responseJSON?.data?.message || config.i18n?.error || '预览加载失败，请重试。';
-			$output.empty().append($('<p class="notice notice-error"></p>').text(message));
-		});
-	});
+    });
 
   $(document).on('widget-added widget-updated', function (_event, widget) {
     $(widget).find('.aksrt-widget-form-lazy').each(function () { loadForm(this); });
-	updatePlacementWarning(widget);
-	scanWidgetAreas();
   });
 
   if (window.wp?.customize?.bind) {
@@ -332,7 +229,6 @@
       $('#customize-theme-controls').on('expanded', function (_event, section) {
         if (!section || !String(section.id || section).includes('sidebar-widgets')) return;
         window.setTimeout(function () {
-          scanWidgetAreas();
           $('.customize-control-widget_form .aksrt-widget-form-lazy').each(function () { loadForm(this); });
         }, 100);
       });
@@ -340,10 +236,6 @@
   }
 
   $(function () {
-    scanWidgetAreas();
-    $(document).on('keydown', function (event) {
-      if (event.key === 'Escape') closeTransferModal();
-    });
     $('.aksrt-widget-form').each(function () { initForm(this); });
     $('.widget.open .aksrt-widget-form-lazy').each(function () { loadForm(this); });
   });