|
|
@@ -0,0 +1,224 @@
|
|
|
+<x-admin::layouts>
|
|
|
+ {{-- 页面标题 --}}
|
|
|
+ <x-slot:title>添加菜单项</x-slot:title>
|
|
|
+
|
|
|
+ {{-- 页面内容 --}}
|
|
|
+ <div class="content" style="padding: 20px;">
|
|
|
+ {{-- 页头部分 --}}
|
|
|
+ <div class="page-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #dee2e6;">
|
|
|
+ <div class="page-title">
|
|
|
+ <h1><i class="fas fa-plus-circle"></i> 添加菜单项</h1>
|
|
|
+ </div>
|
|
|
+ <div class="page-action">
|
|
|
+ <a href="{{ route('admin.dynamicmenu.index') }}" class="btn btn-secondary" style="padding: 8px 16px; background: #6c757d; color: white; text-decoration: none; border-radius: 4px;">
|
|
|
+ <i class="fas fa-arrow-left"></i> 返回列表
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- 显示错误信息 --}}
|
|
|
+ @if($errors->any())
|
|
|
+ <div class="alert alert-danger" style="background: #f8d7da; color: #721c24; padding: 12px; border-radius: 4px; margin-bottom: 20px; border: 1px solid #f5c6cb;">
|
|
|
+ <ul class="mb-0" style="margin: 0; padding-left: 20px;">
|
|
|
+ @foreach($errors->all() as $error)
|
|
|
+ <li>{{ $error }}</li>
|
|
|
+ @endforeach
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ @endif
|
|
|
+
|
|
|
+ {{-- 表单面板 --}}
|
|
|
+ <div class="panel" style="background: white; border: 1px solid #dee2e6; border-radius: 4px; margin-bottom: 20px;">
|
|
|
+ <div class="panel-header" style="padding: 12px 20px; background: #f8f9fa; border-bottom: 1px solid #dee2e6;">
|
|
|
+ <h3 style="margin: 0; font-size: 18px;">基本信息</h3>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel-body" style="padding: 20px;">
|
|
|
+ <form method="POST" action="{{ route('admin.dynamicmenu.store') }}">
|
|
|
+ @csrf
|
|
|
+
|
|
|
+ {{-- 名称 --}}
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label class="required" style="display: block; margin-bottom: 5px; font-weight: 500;">
|
|
|
+ 名称 <span style="color: red;">*</span>
|
|
|
+ </label>
|
|
|
+ <input type="text"
|
|
|
+ name="name"
|
|
|
+ class="control"
|
|
|
+ value="{{ old('name') }}"
|
|
|
+ required
|
|
|
+ placeholder="例如:仪表盘"
|
|
|
+ style="width: 100%; padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px;">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- Key --}}
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label class="required" style="display: block; margin-bottom: 5px; font-weight: 500;">
|
|
|
+ Key <span style="color: red;">*</span>
|
|
|
+ </label>
|
|
|
+ <input type="text"
|
|
|
+ name="key"
|
|
|
+ class="control"
|
|
|
+ value="{{ old('key') }}"
|
|
|
+ required
|
|
|
+ placeholder="例如:settings.dynamic-menu"
|
|
|
+ style="width: 100%; padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px;">
|
|
|
+ <small class="control-info" style="display: block; margin-top: 5px; font-size: 12px; color: #6c757d;">
|
|
|
+ <strong style="color: #dc3545;">重要提示:</strong>
|
|
|
+ 如果想让菜单显示在 Settings 下,Key 必须以 <strong style="background: #f0f0f0; padding: 2px 5px; border-radius: 3px;">settings.</strong> 开头<br>
|
|
|
+ 例如:<code>settings.dynamic-menu</code>、<code>settings.my-menu</code>、<code>settings.custom</code>
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- URL/路由 --}}
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label style="display: block; margin-bottom: 5px; font-weight: 500;">URL/路由</label>
|
|
|
+ <input type="text"
|
|
|
+ name="route"
|
|
|
+ class="control"
|
|
|
+ value="{{ old('route') }}"
|
|
|
+ placeholder="例如:admin.dashboard"
|
|
|
+ style="width: 100%; padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px;">
|
|
|
+ <small class="control-info" style="display: block; margin-top: 5px; font-size: 12px; color: #6c757d;">
|
|
|
+ 可以是相对路径、完整URL或路由名称
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- 图标 --}}
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label style="display: block; margin-bottom: 5px; font-weight: 500;">图标</label>
|
|
|
+ <input type="text"
|
|
|
+ name="icon"
|
|
|
+ class="control"
|
|
|
+ value="{{ old('icon', 'fas fa-file') }}"
|
|
|
+ placeholder="例如:fas fa-dashboard、fas fa-users等"
|
|
|
+ style="width: 100%; padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px;">
|
|
|
+ <small class="control-info" style="display: block; margin-top: 5px; font-size: 12px; color: #6c757d;">
|
|
|
+ FontAwesome图标类名,如:fas fa-home
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- 父级菜单 --}}
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label style="display: block; margin-bottom: 5px; font-weight: 500;">父级菜单</label>
|
|
|
+ <select name="parent_id" class="control" style="width: 100%; padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px;">
|
|
|
+ <option value="">作为顶级菜单</option>
|
|
|
+ @foreach($menuItems as $menuItem)
|
|
|
+ <option value="{{ $menuItem->id }}" {{ old('parent_id') == $menuItem->id ? 'selected' : '' }}>
|
|
|
+ {{ $menuItem->name }}
|
|
|
+ @if($menuItem->children && $menuItem->children->count() > 0)
|
|
|
+ (有子菜单)
|
|
|
+ @endif
|
|
|
+ </option>
|
|
|
+ @endforeach
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- 排序 --}}
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label style="display: block; margin-bottom: 5px; font-weight: 500;">排序</label>
|
|
|
+ <input type="number"
|
|
|
+ name="sort_order"
|
|
|
+ class="control"
|
|
|
+ value="{{ old('sort_order', 0) }}"
|
|
|
+ min="0"
|
|
|
+ style="width: 100%; padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px;">
|
|
|
+ <small class="control-info" style="display: block; margin-top: 5px; font-size: 12px; color: #6c757d;">
|
|
|
+ 数字越小越靠前
|
|
|
+ </small>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- 状态 --}}
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label style="display: block; margin-bottom: 5px; font-weight: 500;">状态</label>
|
|
|
+ <div>
|
|
|
+ <label class="radio-inline" style="margin-right: 20px; display: inline-flex; align-items: center;">
|
|
|
+ <input type="radio" name="status" value="1" {{ old('status', 1) == 1 ? 'checked' : '' }} style="margin-right: 5px;">
|
|
|
+ 启用
|
|
|
+ </label>
|
|
|
+ <label class="radio-inline" style="margin-right: 20px; display: inline-flex; align-items: center;">
|
|
|
+ <input type="radio" name="status" value="0" {{ old('status') == 0 ? 'checked' : '' }} style="margin-right: 5px;">
|
|
|
+ 禁用
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- 提交按钮 --}}
|
|
|
+ <div class="form-group" style="margin-top: 30px;">
|
|
|
+ <button type="submit" class="btn btn-primary" style="padding: 12px 24px; background: #007bff; color: white; border: none; border-radius: 4px; font-size: 18px; cursor: pointer; margin-right: 10px;">
|
|
|
+ <i class="fas fa-save"></i> 保存菜单项
|
|
|
+ </button>
|
|
|
+ <a href="{{ route('admin.dynamicmenu.index') }}" class="btn btn-secondary" style="padding: 12px 24px; background: #6c757d; color: white; text-decoration: none; border-radius: 4px; font-size: 18px;">
|
|
|
+ <i class="fas fa-times"></i> 取消
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {{-- 引入必要的JavaScript --}}
|
|
|
+@push('scripts')
|
|
|
+<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
|
+<script>
|
|
|
+ /* $(document).ready(function() {
|
|
|
+ // 自动生成key
|
|
|
+ $('input[name="name"]').on('blur', function() {
|
|
|
+ var name = $(this).val();
|
|
|
+ var keyInput = $('input[name="key"]');
|
|
|
+
|
|
|
+ if (keyInput.val() === '') {
|
|
|
+ // 将名称转换为小写,空格替换为横线,移除特殊字符
|
|
|
+ var key = name.toLowerCase()
|
|
|
+ .replace(/\s+/g, '-')
|
|
|
+ .replace(/[^a-z0-9-]/g, '');
|
|
|
+ // 默认添加到 settings 下
|
|
|
+ keyInput.val('settings.' + key);
|
|
|
+
|
|
|
+ // 添加一个视觉提示
|
|
|
+ keyInput.css('border-color', '#28a745');
|
|
|
+ setTimeout(function() {
|
|
|
+ keyInput.css('border-color', '');
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+ // 显示成功提示
|
|
|
+ var successMsg = $('<small class="key-success" style="display: block; margin-top: 5px; font-size: 12px; color: #28a745;">' +
|
|
|
+ '✓ 已自动生成Key: settings.' + key + '</small>');
|
|
|
+ keyInput.after(successMsg);
|
|
|
+ setTimeout(function() {
|
|
|
+ $('.key-success').remove();
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 为所有表单元素添加Bagisto样式类
|
|
|
+ $('.control').addClass('form-control');
|
|
|
+
|
|
|
+ // 检查key格式
|
|
|
+ $('form').on('submit', function(e) {
|
|
|
+ var keyValue = $('input[name="key"]').val();
|
|
|
+ if (keyValue && keyValue.indexOf('settings.') !== 0) {
|
|
|
+ if (!confirm('当前Key不以"settings."开头,菜单可能不会显示在Settings下。确定要继续吗?')) {
|
|
|
+ e.preventDefault();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加提示
|
|
|
+ $('input[name="key"]').on('focus', function() {
|
|
|
+ var currentVal = $(this).val();
|
|
|
+ if (currentVal && currentVal.indexOf('settings.') !== 0) {
|
|
|
+ $(this).after(
|
|
|
+ '<small class="key-warning" style="display: block; margin-top: 5px; font-size: 12px; color: #dc3545;">' +
|
|
|
+ '⚠️ 警告:当前Key不以"settings."开头,菜单可能不会显示在Settings下</small>'
|
|
|
+ );
|
|
|
+
|
|
|
+ setTimeout(function() {
|
|
|
+ $('.key-warning').remove();
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });*/
|
|
|
+</script>
|
|
|
+@endpush
|
|
|
+</x-admin::layouts>
|