bianjunhui
/
bagisto


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							{{-- 不继承任何布局 --}}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>添加菜单项</title>
    
    {{-- 引入必要的CSS --}}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
        }
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #dee2e6;
        }
        .page-title h1 {
            margin: 0;
            font-size: 24px;
            color: #333;
        }
        .page-action {
            display: flex;
            gap: 10px;
        }
        .btn {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 4px;
            text-decoration: none;
            cursor: pointer;
            border: 1px solid transparent;
        }
        .btn-primary {
            background-color: #007bff;
            color: white;
        }
        .btn-primary:hover {
            background-color: #0056b3;
        }
        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }
        .btn-sm {
            padding: 4px 8px;
            font-size: 14px;
        }
        .btn-lg {
            padding: 12px 24px;
            font-size: 18px;
        }
        .panel {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            margin-bottom: 20px;
        }
        .panel-header {
            padding: 12px 20px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }
        .panel-header h3 {
            margin: 0;
            font-size: 18px;
        }
        .panel-body {
            padding: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        .form-group label.required:after {
            content: " *";
            color: red;
        }
        .control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            font-size: 14px;
        }
        .control:focus {
            border-color: #80bdff;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        }
        .control-info {
            display: block;
            margin-top: 5px;
            font-size: 12px;
            color: #6c757d;
        }
        .radio-inline {
            margin-right: 20px;
            display: inline-flex;
            align-items: center;
        }
        .radio-inline input {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="page-header">
            <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">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </a>
            </div>
        </div>

        {{-- 显示错误信息 --}}
        @if($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="panel">
            <div class="panel-header">
                <h3>基本信息</h3>
            </div>
            
            <div class="panel-body">
                <form method="POST" action="{{ route('admin.dynamicmenu.store') }}">
                    @csrf
                    
                    {{-- 名称 --}}
                    <div class="form-group">
                        <label class="required">名称</label>
                        <input type="text" 
                               name="name" 
                               class="control" 
                               value="{{ old('name') }}" 
                               required
                               placeholder="例如：仪表盘">
                    </div>

                    {{-- Key --}}
                    <div class="form-group">
                        <label class="required">Key</label>
                        <input type="text" 
                               name="key" 
                               class="control" 
                               value="{{ old('key') }}" 
                               required
                               placeholder="例如：admin.dashboard">
                        <small class="control-info">用于权限验证和菜单激活状态判断</small>
                    </div>

                    {{-- URL/路由 --}}
                    <div class="form-group">
                        <label>URL/路由</label>
                        <input type="text" 
                               name="route" 
                               class="control" 
                               value="{{ old('route') }}"
                               placeholder="例如：admin.dashboard">
                        <small class="control-info">可以是相对路径、完整URL或路由名称</small>
                    </div>

                    {{-- 图标 --}}
                    <div class="form-group">
                        <label>图标</label>
                        <input type="text" 
                               name="icon" 
                               class="control" 
                               value="{{ old('icon', 'fas fa-file') }}"
                               placeholder="例如：fas fa-dashboard、fas fa-users等">
                        <small class="control-info">FontAwesome图标类名，如：fas fa-home</small>
                    </div>

                    {{-- 父级菜单 --}}
                    <div class="form-group">
                        <label>父级菜单</label>
                        <select name="parent_id" class="control">
                            <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">
                        <label>排序</label>
                        <input type="number" 
                               name="order" 
                               class="control" 
                               value="{{ old('order', 0) }}"
                               min="0">
                        <small class="control-info">数字越小越靠前</small>
                    </div>

                    {{-- 状态 --}}
                    <div class="form-group">
                        <label>状态</label>
                        <div>
                            <label class="radio-inline">
                                <input type="radio" name="status" value="1" {{ old('is_active', 1) == 1 ? 'checked' : '' }}>
                                启用
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="status" value="0" {{ old('is_active') == 0 ? 'checked' : '' }}>
                                禁用
                            </label>
                        </div>
                    </div>

                    {{-- 提交按钮 --}}
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-save"></i> 保存菜单项
                        </button>
                        <a href="{{ route('admin.dynamicmenu.index') }}" class="btn btn-secondary btn-lg">
                            <i class="fas fa-times"></i> 取消
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- 引入必要的JavaScript --}}
    <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, '');
                    keyInput.val('admin.' + key);
                }
            });
        });
    </script>
</body>
</html>