Wisp X
304 lines
26 KiB
PHP
304 lines
26 KiB
PHP
@section('title', '创建角色组')
|
|
|
|
<x-app-layout>
|
|
<div class="my-6 md:my-9">
|
|
@include('admin.group.tips')
|
|
|
|
<p class="bg-blue-500 p-2 mb-2 rounded text-sm text-white">
|
|
<i class="fas fa-exclamation-circle"></i> 角色组设置默认以后新用户注册会归属该角色组，系统只能设置一个默认角色组。设置为游客组后，未登录用户将会受游客组控制。
|
|
</p>
|
|
|
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
|
<ul id="tabs" class="flex space-x-2 text-sm">
|
|
<li class="group">
|
|
<a data-target="basic" href="javascript:void(0)" class="block rounded-t-lg px-3 py-2 bg-white group-hover:bg-white">常规配置</a>
|
|
</li>
|
|
<li class="group">
|
|
<a data-target="review" href="javascript:void(0)" class="block rounded-t-lg px-3 py-2 bg-gray-200 group-hover:bg-white">图片审核</a>
|
|
</li>
|
|
<li class="group">
|
|
<a data-target="protection" href="javascript:void(0)" class="block rounded-t-lg px-3 py-2 bg-gray-200 group-hover:bg-white">原图保护</a>
|
|
</li>
|
|
<li class="group">
|
|
<a data-target="watermark" href="javascript:void(0)" class="block rounded-t-lg px-3 py-2 bg-gray-200 group-hover:bg-white">水印配置</a>
|
|
</li>
|
|
</ul>
|
|
<form action="{{ route('admin.group.create') }}" method="POST">
|
|
<div class="overflow-hidden rounded-md rounded-l-none">
|
|
<div class="px-4 py-5 bg-white sm:p-6">
|
|
<div data-tab="basic" class="grid grid-cols-6 gap-6">
|
|
<div class="col-span-6">
|
|
<label for="name" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>组名称</label>
|
|
<x-input type="text" name="name" id="name" autocomplete="name" placeholder="请输入组名称" />
|
|
</div>
|
|
|
|
<div class="col-span-6">
|
|
<label for="maximum_file_size" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>最大文件大小(KB)</label>
|
|
<x-input type="number" name="configs[maximum_file_size]" id="maximum_file_size" autocomplete="maximum_file_size" placeholder="请输入上传文件的最大限制，单位kb" value="{{ $default->get('maximum_file_size') }}" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-3">
|
|
<label for="concurrent_upload_num" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>并发上传限制</label>
|
|
<x-input type="number" name="configs[concurrent_upload_num]" id="concurrent_upload_num" autocomplete="concurrent_upload_num" placeholder="请输入并发上传数量" value="{{ $default->get('concurrent_upload_num') }}" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-3">
|
|
<label for="limit_per_minute" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>每分钟上传限制</label>
|
|
<x-input type="number" name="configs[limit_per_minute]" id="limit_per_minute" autocomplete="limit_per_minute" placeholder="请输入每分钟可以上传的图片数量" value="{{ $default->get('limit_per_minute') }}" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-3">
|
|
<label for="limit_per_hour" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>每小时上传限制</label>
|
|
<x-input type="number" name="configs[limit_per_hour]" id="limit_per_hour" autocomplete="limit_per_hour" placeholder="请输入每小时可以上传的图片数量" value="{{ $default->get('limit_per_hour') }}" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-3">
|
|
<label for="limit_per_day" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>每天上传限制</label>
|
|
<x-input type="number" name="configs[limit_per_day]" id="limit_per_day" autocomplete="limit_per_day" placeholder="请输入每天可以上传的图片数量" value="{{ $default->get('limit_per_day') }}" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-3">
|
|
<label for="limit_per_week" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>每周上传限制</label>
|
|
<x-input type="number" name="configs[limit_per_week]" id="limit_per_week" autocomplete="limit_per_week" placeholder="请输入每周可以上传的图片数量" value="{{ $default->get('limit_per_week') }}" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-3">
|
|
<label for="limit_per_month" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>每月上传限制</label>
|
|
<x-input type="number" name="configs[limit_per_month]" id="limit_per_month" autocomplete="limit_per_month" placeholder="请输入每月可以上传的图片数量" value="{{ $default->get('limit_per_month') }}" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-3">
|
|
<label for="path_naming_rule" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>路径命名规则</label>
|
|
<x-input type="text" name="configs[path_naming_rule]" id="path_naming_rule" autocomplete="path_naming_rule" placeholder="请输入路径命名规则" value="{{ $default->get('path_naming_rule') }}" />
|
|
<a href="javascript:void(0)" class="mt-1 text-sm text-indigo-600" id="rename-rules"><i class="fas fa-pencil-alt text-xs"></i> 命名规则对照表</a>
|
|
@include('admin.group.rules')
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-3">
|
|
<label for="file_naming_rule" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>文件命名规则</label>
|
|
<x-input type="text" name="configs[file_naming_rule]" id="file_naming_rule" autocomplete="file_naming_rule" placeholder="请输入文件命名规则" value="{{ $default->get('file_naming_rule') }}" />
|
|
</div>
|
|
|
|
<div class="col-span-6">
|
|
<x-fieldset title="是否默认" faq="设置默认后，新用户注册以后将会属于该默认角色组，且默认组只能有一个。">
|
|
<x-switch id="is_default" name="is_default" value="1"></x-switch>
|
|
</x-fieldset>
|
|
</div>
|
|
|
|
<div class="col-span-6">
|
|
<x-fieldset title="是否为游客组" faq="设置为游客组后，未登录用户受该组控制，且游客组只能有一个。">
|
|
<x-switch id="is_guest" name="is_guest" value="1"></x-switch>
|
|
</x-fieldset>
|
|
</div>
|
|
|
|
<div class="col-span-6">
|
|
<x-fieldset title="允许上传的图片类型">
|
|
@foreach($default->get('accepted_file_suffixes') as $extension)
|
|
<x-fieldset-checkbox id="configs[accepted_file_suffixes]_{{ $extension }}" name="configs[accepted_file_suffixes][]" value="{{ $extension }}" checked>
|
|
{{ strtoupper($extension) }}
|
|
</x-fieldset-checkbox>
|
|
@endforeach
|
|
</x-fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-tab="review" class="hidden grid grid-cols-6 gap-6">
|
|
<div class="col-span-6 mb-4">
|
|
<x-fieldset title="图片审核" faq="设置上传是否需要应用第三方审查，违规的图片会被标记为不健康的图片，或直接被删除。">
|
|
<x-switch id="configs[is_enable_scan]" name="configs[is_enable_scan]" value="1"></x-switch>
|
|
</x-fieldset>
|
|
</div>
|
|
<div class="col-span-6 mb-4">
|
|
<x-fieldset title="审核动作">
|
|
<x-fieldset-radio id="configs[scanned_action]_mark" name="configs[scanned_action]" value="mark" checked>标记为不健康</x-fieldset-radio>
|
|
<x-fieldset-radio id="configs[scanned_action]_delete" name="configs[scanned_action]" value="delete">直接删除</x-fieldset-radio>
|
|
</x-fieldset>
|
|
</div>
|
|
<div class="col-span-6 mb-4">
|
|
<x-fieldset title="审核驱动">
|
|
<x-fieldset-radio id="configs[scan_configs][driver]" name="configs[scan_configs][driver]" data-select="scan" value="aliyun" checked>阿里云</x-fieldset-radio>
|
|
</x-fieldset>
|
|
</div>
|
|
<div class="hidden mb-4" data-scan-driver="aliyun">
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[scan_configs][drivers][aliyun][access_key_id]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>AccessKeyId</label>
|
|
<x-input type="text" name="configs[scan_configs][drivers][aliyun][access_key_id]" id="configs[scan_configs][drivers][aliyun][access_key_id]" autocomplete="access_key_id" placeholder="请输入 AccessKeyId" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[scan_configs][drivers][aliyun][access_key_secret]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>AccessKeySecret</label>
|
|
<x-input type="password" name="configs[scan_configs][drivers][aliyun][access_key_secret]" id="configs[scan_configs][drivers][aliyun][access_key_secret]" autocomplete="access_key_id" placeholder="请输入 AccessKeySecret" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[scan_configs][drivers][aliyun][biz_type]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>场景名称</label>
|
|
<x-input type="text" name="configs[scan_configs][drivers][aliyun][biz_type]" id="configs[scan_configs][drivers][aliyun][biz_type]" autocomplete="biz_type" placeholder="请输入业务场景名称" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[scan_configs][drivers][aliyun][region_id]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>地域节点</label>
|
|
<x-input type="text" name="configs[scan_configs][drivers][aliyun][region_id]" id="configs[scan_configs][drivers][aliyun][region_id]" autocomplete="region_id" placeholder="请输入地域节点，例如：cn-shanghai" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<x-fieldset title="审核场景">
|
|
@foreach($scenes as $key => $scene)
|
|
<x-fieldset-checkbox id="configs[scan_configs][drivers][aliyun][scenes][]_{{ $key }}" name="configs[scan_configs][drivers][aliyun][scenes][]" value="{{ $key }}">{{ $scene }}</x-fieldset-checkbox>
|
|
@endforeach
|
|
</x-fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div data-tab="protection" class="hidden grid grid-cols-6 gap-6">
|
|
<div class="col-span-6 mb-4">
|
|
<x-fieldset title="原图保护" faq="设置该角色组下的用户上传的图片是否应用原图保护功能，开启后图片<b>不返回直链</b>">
|
|
<x-switch id="configs[is_enable_original_protection]" name="configs[is_enable_original_protection]" value="1"></x-switch>
|
|
</x-fieldset>
|
|
</div>
|
|
|
|
<div class="col-span-6 mb-4">
|
|
<label for="configs[image_cache_ttl]" class="block text-sm font-medium text-gray-700">图片缓存时间(秒)</label>
|
|
<x-input type="number" name="configs[image_cache_ttl]" id="configs[image_cache_ttl]" autocomplete="image_cache_ttl" placeholder="请输入受保护图片的缓存时间，不填或填0表示不缓存" value="" />
|
|
</div>
|
|
</div>
|
|
|
|
<div data-tab="watermark" class="hidden grid grid-cols-6 gap-6">
|
|
<p class="mb-3 text-red-600 text-sm"><i class="fas fa-exclamation"></i> 开启水印功能前请注意考虑图片版权问题。</p>
|
|
<div class="col-span-6 mb-4">
|
|
<x-fieldset title="开启水印" faq="请注意，水印功能仅在开启了「原图保护」功能的情况下生效。">
|
|
<x-switch id="configs[is_enable_watermark]" name="configs[is_enable_watermark]" value="1"></x-switch>
|
|
</x-fieldset>
|
|
<div class="col-span-6 mt-4 mb-4">
|
|
<x-fieldset title="水印类型">
|
|
<x-fieldset-radio id="configs[watermark_configs][driver]_font" name="configs[watermark_configs][driver]" data-select="watermark" value="font" checked>文字水印</x-fieldset-radio>
|
|
<x-fieldset-radio id="configs[watermark_configs][driver]_image" name="configs[watermark_configs][driver]" data-select="watermark" value="image">图片水印</x-fieldset-radio>
|
|
</x-fieldset>
|
|
</div>
|
|
<div class="mb-4 hidden" data-watermark-driver="font">
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][font][font]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>字体文件</label>
|
|
<x-input type="text" name="configs[watermark_configs][drivers][font][font]" id="configs[watermark_configs][drivers][font][font]" autocomplete="text" placeholder="请输入字体文件路径，例如：fonts/lsky.ttf" />
|
|
<small class="text-yellow-500">请将字体文件放置 {{ storage_path('app/public') }} 目录下</small>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][font][position]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>水印位置</label>
|
|
<x-select id="configs[watermark_configs][drivers][font][position]" name="configs[watermark_configs][drivers][font][position]" autocomplete="position">
|
|
@foreach($positions as $key => $position)
|
|
<option value="{{ $key }}">{{ $position }}</option>
|
|
@endforeach
|
|
</x-select>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][font][text]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>水印文字</label>
|
|
<x-input type="text" name="configs[watermark_configs][drivers][font][text]" id="configs[watermark_configs][drivers][font][text]" autocomplete="text" placeholder="请输入水印文字" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][font][color]" class="block text-sm font-medium text-gray-700">字体颜色</label>
|
|
<x-input type="text" name="configs[watermark_configs][drivers][font][color]" id="configs[watermark_configs][drivers][font][color]" autocomplete="color" placeholder="请输入字体颜色，例如：#ffffff" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][font][size]" class="block text-sm font-medium text-gray-700">字体大小</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][font][size]" id="configs[watermark_configs][drivers][font][size]" autocomplete="size" placeholder="请输入字体大小，默认 14" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][font][angle]" class="block text-sm font-medium text-gray-700">旋转角度</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][font][angle]" id="configs[watermark_configs][drivers][font][angle]" autocomplete="angle" placeholder="请输入旋转角度，默认 0，可以为" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][font][x]" class="block text-sm font-medium text-gray-700">X轴偏移量</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][font][x]" id="configs[watermark_configs][drivers][font][x]" autocomplete="x" placeholder="X轴偏移量" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][font][y]" class="block text-sm font-medium text-gray-700">Y轴偏移量</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][font][y]" id="configs[watermark_configs][drivers][font][y]" autocomplete="y" placeholder="Y轴偏移量" />
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 hidden" data-watermark-driver="image">
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][image][image]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>水印图片</label>
|
|
<x-input type="text" name="configs[watermark_configs][drivers][image][image]" id="configs[watermark_configs][drivers][image][image]" autocomplete="image" placeholder="请输入水印路径，例如：images/lsky.png" />
|
|
<small class="text-yellow-500">请将水印图片放置 {{ public_path() }} 目录下</small>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][image][position]" class="block text-sm font-medium text-gray-700"><span class="text-red-600">*</span>水印位置</label>
|
|
<x-select id="configs[watermark_configs][drivers][image][position]" name="configs[watermark_configs][drivers][image][position]" autocomplete="position">
|
|
@foreach($positions as $key => $position)
|
|
<option value="{{ $key }}">{{ $position }}</option>
|
|
@endforeach
|
|
</x-select>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][image][width]" class="block text-sm font-medium text-gray-700">图片宽度</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][image][width]" id="configs[watermark_configs][drivers][image][width]" autocomplete="width" placeholder="请输入水印图片宽度" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][image][height]" class="block text-sm font-medium text-gray-700">图片高度</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][image][height]" id="configs[watermark_configs][drivers][image][height]" autocomplete="height" placeholder="请输入水印图片高度" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][image][opacity]" class="block text-sm font-medium text-gray-700">不透明度</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][image][opacity]" id="configs[watermark_configs][drivers][image][opacity]" autocomplete="opacity" placeholder="请输入不透明度，取值 0 - 100" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][image][rotate]" class="block text-sm font-medium text-gray-700">旋转角度</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][image][rotate]" id="configs[watermark_configs][drivers][image][rotate]" autocomplete="rotate" placeholder="请输入旋转角度，默认 0" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][image][x]" class="block text-sm font-medium text-gray-700">X轴偏移量</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][image][x]" id="configs[watermark_configs][drivers][image][x]" autocomplete="x" placeholder="X轴偏移量" />
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-3 mb-4">
|
|
<label for="configs[watermark_configs][drivers][image][y]" class="block text-sm font-medium text-gray-700">Y轴偏移量</label>
|
|
<x-input type="number" name="configs[watermark_configs][drivers][image][y]" id="configs[watermark_configs][drivers][image][y]" autocomplete="y" placeholder="Y轴偏移量" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
|
<x-button type="button" class="bg-gray-500" onclick="history.go(-1)">取消</x-button>
|
|
<x-button>确认创建</x-button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// tabs select
|
|
$('[data-target]').click(function () {
|
|
$('[data-tab]').hide();
|
|
$('[data-target]').removeClass('bg-white').addClass('bg-gray-200');
|
|
$(`[data-tab=${$(this).data('target')}]`).show();
|
|
$(this).removeClass('bg-gray-200').addClass('bg-white');
|
|
});
|
|
|
|
// 设置选中驱动
|
|
let setSelected = function () {
|
|
$('[data-select]').each(function () {
|
|
$(`[data-${$(this).data('select')}-driver=${$(this).val()}]`)[this.checked ? 'show' : 'hide']();
|
|
});
|
|
};
|
|
|
|
setSelected();
|
|
|
|
$('[data-select]').click(function () {
|
|
setSelected();
|
|
});
|
|
|
|
$('form').submit(function (e) {
|
|
e.preventDefault();
|
|
axios.post(this.action, $(this).serialize()).then(response => {
|
|
if (response.data.status) {
|
|
toastr.success(response.data.message);
|
|
setTimeout(function () {
|
|
window.location.href = '{{ route('admin.groups') }}';
|
|
}, 3000);
|
|
} else {
|
|
toastr.error(response.data.message);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
@endpush
|
|
|
|
</x-app-layout>
|