|
|
@@ -1,132 +1,16 @@
|
|
|
-{{-- 不继承任何布局 --}}
|
|
|
-<!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">
|
|
|
+<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">
|
|
|
+ <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>
|
|
|
@@ -134,8 +18,8 @@
|
|
|
|
|
|
{{-- 显示错误信息 --}}
|
|
|
@if($errors->any())
|
|
|
- <div class="alert alert-danger">
|
|
|
- <ul class="mb-0">
|
|
|
+ <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
|
|
|
@@ -143,64 +27,79 @@
|
|
|
</div>
|
|
|
@endif
|
|
|
|
|
|
- <div class="panel">
|
|
|
- <div class="panel-header">
|
|
|
- <h3>基本信息</h3>
|
|
|
+ {{-- 表单面板 --}}
|
|
|
+ <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">
|
|
|
+ <div class="panel-body" style="padding: 20px;">
|
|
|
<form method="POST" action="{{ route('admin.dynamicmenu.store') }}">
|
|
|
@csrf
|
|
|
|
|
|
{{-- 名称 --}}
|
|
|
- <div class="form-group">
|
|
|
- <label class="required">名称</label>
|
|
|
+ <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="例如:仪表盘">
|
|
|
+ placeholder="例如:仪表盘"
|
|
|
+ style="width: 100%; padding: 8px 12px; border: 1px solid #dee2e6; border-radius: 4px; font-size: 14px;">
|
|
|
</div>
|
|
|
|
|
|
{{-- Key --}}
|
|
|
- <div class="form-group">
|
|
|
- <label class="required">Key</label>
|
|
|
+ <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="例如:admin.dashboard">
|
|
|
- <small class="control-info">用于权限验证和菜单激活状态判断</small>
|
|
|
+ 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;">
|
|
|
+ 用于权限验证和菜单激活状态判断
|
|
|
+ </small>
|
|
|
</div>
|
|
|
|
|
|
{{-- URL/路由 --}}
|
|
|
- <div class="form-group">
|
|
|
- <label>URL/路由</label>
|
|
|
+ <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">
|
|
|
- <small class="control-info">可以是相对路径、完整URL或路由名称</small>
|
|
|
+ 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">
|
|
|
- <label>图标</label>
|
|
|
+ <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等">
|
|
|
- <small class="control-info">FontAwesome图标类名,如:fas fa-home</small>
|
|
|
+ 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">
|
|
|
- <label>父级菜单</label>
|
|
|
- <select name="parent_id" class="control">
|
|
|
+ <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' : '' }}>
|
|
|
@@ -214,37 +113,40 @@
|
|
|
</div>
|
|
|
|
|
|
{{-- 排序 --}}
|
|
|
- <div class="form-group">
|
|
|
- <label>排序</label>
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label style="display: block; margin-bottom: 5px; font-weight: 500;">排序</label>
|
|
|
<input type="number"
|
|
|
- name="order"
|
|
|
+ name="sort_order"
|
|
|
class="control"
|
|
|
- value="{{ old('order', 0) }}"
|
|
|
- min="0">
|
|
|
- <small class="control-info">数字越小越靠前</small>
|
|
|
+ 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">
|
|
|
- <label>状态</label>
|
|
|
+ <div class="form-group" style="margin-bottom: 20px;">
|
|
|
+ <label style="display: block; margin-bottom: 5px; font-weight: 500;">状态</label>
|
|
|
<div>
|
|
|
- <label class="radio-inline">
|
|
|
- <input type="radio" name="status" value="1" {{ old('is_active', 1) == 1 ? 'checked' : '' }}>
|
|
|
+ <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">
|
|
|
- <input type="radio" name="status" value="0" {{ old('is_active') == 0 ? 'checked' : '' }}>
|
|
|
+ <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">
|
|
|
- <button type="submit" class="btn btn-primary btn-lg">
|
|
|
+ <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 btn-lg">
|
|
|
+ <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>
|
|
|
@@ -254,8 +156,8 @@
|
|
|
</div>
|
|
|
|
|
|
{{-- 引入必要的JavaScript --}}
|
|
|
+ @push('scripts')
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
|
|
|
-
|
|
|
<script>
|
|
|
$(document).ready(function() {
|
|
|
// 自动生成key
|
|
|
@@ -270,7 +172,10 @@
|
|
|
keyInput.val('admin.' + key);
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
+ // 为所有表单元素添加Bagisto样式类
|
|
|
+ $('.control').addClass('form-control');
|
|
|
});
|
|
|
</script>
|
|
|
-</body>
|
|
|
-</html>
|
|
|
+ @endpush
|
|
|
+</x-admin::layouts>
|