diff --git a/plugin/think-library/src/builder/form/component/PickerFieldComponent.php b/plugin/think-library/src/builder/form/component/PickerFieldComponent.php
index 41d1881b7..e221ad3bf 100644
--- a/plugin/think-library/src/builder/form/component/PickerFieldComponent.php
+++ b/plugin/think-library/src/builder/form/component/PickerFieldComponent.php
@@ -28,7 +28,7 @@ class PickerFieldComponent extends AbstractFormComponent
public function mount(FormNode $parent): FormNode
{
- $node = $parent->node('label')->class(trim(strval($this->config['class'] ?? 'relative block')));
+ $node = $parent->node('label')->class(trim(strval($this->config['class'] ?? 'block')));
foreach ((array)($this->config['attrs'] ?? []) as $name => $value) {
$node->attr(strval($name), $value);
}
@@ -51,9 +51,14 @@ class PickerFieldComponent extends AbstractFormComponent
]);
}
- $input = $node->node('input')->attrs([
+ $control = $node->div()->class(trim(strval($this->config['control_class'] ?? 'relative')));
+ foreach ((array)($this->config['control_attrs'] ?? []) as $name => $value) {
+ $control->attr(strval($name), $value);
+ }
+
+ $input = $control->node('input')->attrs([
'readonly' => null,
- 'class' => trim(strval($this->config['input_class'] ?? 'layui-input')),
+ 'class' => trim(strval($this->config['input_class'] ?? 'layui-input pr40')),
'value' => strval($this->config['value'] ?? ''),
'title' => strval($this->config['value'] ?? ''),
]);
@@ -64,7 +69,7 @@ class PickerFieldComponent extends AbstractFormComponent
foreach ((array)($this->config['input_attrs'] ?? []) as $name => $value) {
$input->attr(strval($name), $value);
}
- $icon = $node->node('span')->class(trim(strval($this->config['icon_class'] ?? 'input-right-icon layui-icon layui-icon-theme')));
+ $icon = $control->node('span')->class(trim(strval($this->config['icon_class'] ?? 'input-right-icon layui-icon layui-icon-theme')));
foreach ((array)($this->config['icon_attrs'] ?? []) as $name => $value) {
$icon->attr(strval($name), $value);
}
diff --git a/plugin/think-plugs-system/src/builder/MenuBuilder.php b/plugin/think-plugs-system/src/builder/MenuBuilder.php
index b1f45dd11..d1e258ab3 100644
--- a/plugin/think-plugs-system/src/builder/MenuBuilder.php
+++ b/plugin/think-plugs-system/src/builder/MenuBuilder.php
@@ -153,6 +153,7 @@ SCRIPT);
$form->action(strval($context['actionUrl'] ?? ''))
->attrs(['id' => 'MenuForm', 'data-table-id' => 'MenuTable'])
->class('system-menu-form');
+ $form->html('');
FormModules::section($form, [
'title' => '层级归属',
@@ -236,7 +237,7 @@ SCRIPT);
$fields = $grid->div()->class('layui-col-xs12 layui-col-md6');
$fields->fields(function ($fields) {
- $fields->text('icon', '菜单图标', 'Menu Icon', false, '可手动输入图标类名，或通过右侧图标选择器回填。', null, [
+ $status = $fields->text('icon', '菜单图标', 'Menu Icon', false, '可手动输入图标类名，或通过右侧图标选择器回填。', null, [
'placeholder' => '例如：layui-icon layui-icon-set-fill',
])->text('sort', '排序权重', 'Sort Order', false, '数值越大越靠前。', null, [
'type' => 'number',
@@ -244,7 +245,8 @@ SCRIPT);
'placeholder' => '请输入排序权重',
])->defaultValue(0)->radio('status', '使用状态', 'Status', '', true, [
'required-error' => '请选择当前菜单的启用状态。',
- ])->options([
+ ]);
+ $status->body()->class('system-menu-status-options')->end()->options([
1 => '已启用',
0 => '已禁用',
])->defaultValue('1');
@@ -255,6 +257,9 @@ SCRIPT);
'title' => '图标选择器',
'subtitle' => 'Icon Picker',
'value' => '点击打开图标选择器',
+ 'class' => 'block system-menu-icon-picker',
+ 'control_class' => 'relative',
+ 'input_class' => 'layui-input pr40',
'attrs' => ['data-open-menu-icon' => null],
'input_attrs' => [
'data-open-menu-icon' => null,
@@ -264,7 +269,7 @@ SCRIPT);
'icon_attrs' => ['data-open-menu-icon' => null],
'help' => '选择后会自动同步到“菜单图标”字段，并实时预览当前图标样式。',
]);
- $picker->div()->class('layui-form-mid color-desc')->html(sprintf(
+ $picker->div()->class('layui-form-mid color-desc system-menu-icon-preview')->html(sprintf(
'%s',
self::escape(BuilderLang::text('未设置图标'))
));
@@ -345,6 +350,55 @@ SCRIPT;
return strval(json_encode($value, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT));
}
+ private static function renderFormStyle(): string
+ {
+ return <<<'STYLE'
+#MenuForm .system-menu-icon-picker .layui-input {
+ cursor: pointer;
+ padding-right: 44px !important;
+}
+#MenuForm .system-menu-icon-picker .input-right-icon {
+ top: 1px;
+ right: 1px;
+ width: 34px;
+ height: 32px;
+ line-height: 32px;
+ box-sizing: border-box;
+ border-left: 1px solid var(--ta-border-color, #dce8e5);
+ border-radius: 0 3px 3px 0;
+}
+#MenuForm .system-menu-icon-preview {
+ min-height: 20px;
+ margin-top: 8px;
+ padding: 0 2px;
+ line-height: 20px;
+}
+#MenuForm .system-menu-icon-preview .layui-icon {
+ width: 18px;
+ text-align: center;
+}
+#MenuForm [data-field-name="status"] .system-menu-status-options {
+ height: auto !important;
+ min-height: 34px !important;
+ padding: 1px 0 1px 8px !important;
+ line-height: 32px !important;
+ align-items: center;
+ box-sizing: border-box;
+ border-color: var(--ta-border-color, #dce8e5);
+ background: var(--ta-surface-soft, #f7fbfb) !important;
+}
+#MenuForm [data-field-name="status"] .system-menu-status-options .layui-form-radio {
+ margin: 0 18px 0 0;
+ padding-right: 0;
+ line-height: 32px;
+}
+#MenuForm [data-field-name="status"] .system-menu-status-options .layui-form-radio > i {
+ margin-right: 5px;
+ font-size: 18px;
+}
+STYLE;
+ }
+
private static function renderFormScript(): string
{
return sprintf(<<<'SCRIPT'