|
|
@@ -1,35 +1,276 @@
|
|
|
-@extends('admin::layouts.master')
|
|
|
-
|
|
|
-@section('page_title')
|
|
|
- 添加菜单项
|
|
|
-@stop
|
|
|
-
|
|
|
-@section('content-wrapper')
|
|
|
- <div class="content full-page">
|
|
|
+{{-- 不继承任何布局 --}}
|
|
|
+<!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>添加菜单项</h1>
|
|
|
+ <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>
|
|
|
- <div class="page-content">
|
|
|
- <form method="POST" action="{{ route('admin.dynamicmenu.store') }}">
|
|
|
- @csrf
|
|
|
- <div class="form-group">
|
|
|
- <label>名称</label>
|
|
|
- <input type="text" name="name" class="control" required>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label>Key</label>
|
|
|
- <input type="text" name="key" class="control" required>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <label>路由</label>
|
|
|
- <input type="text" name="route" class="control" required>
|
|
|
- </div>
|
|
|
- <div class="form-group">
|
|
|
- <button type="submit" class="btn btn-lg btn-primary">保存</button>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
+
|
|
|
+ {{-- 显示错误信息 --}}
|
|
|
+ @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>
|
|
|
-@stop
|
|
|
+
|
|
|
+ {{-- 引入必要的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>
|
