💄 改进角色组创建页面样式

This commit is contained in:
Wisp X
2022-01-21 11:33:09 +08:00
parent 3134fc437d
commit 84e9caeb71
12 changed files with 242 additions and 108 deletions
+3
View File
@@ -13,6 +13,9 @@ final class GroupConfigKey
/** @var string 上传是否需要审查 */
const IsEnableScan = 'is_enable_scan';
/** @var string 审查配置 */
const ScanConfigs = 'scan_configs';
/** @var string 是否启用原图保护功能 */
const IsEnableOriginalProtection = 'is_enable_original_protection';
+13
View File
@@ -4,5 +4,18 @@ namespace App\Enums\Scan;
final class AliyunOption
{
/** @var string AccessKeyId */
const AccessKeyId = 'access_key_id';
/** @var string AccessKeySecret */
const AccessKeySecret = 'access_key_secret';
/** @var string RegionId */
const RegionId = 'region_id';
/** @var string 场景 */
const Scenes = 'scenes';
/** @var string 业务场景 */
const BizType = 'biz_type';
}
Generated
+29 -29
View File
@@ -2780,16 +2780,16 @@
},
{
"name": "psr/log",
"version": "3.0.0",
"version": "1.1.4",
"source": {
"type": "git",
"url": "https://github.com/php-fig/log.git",
"reference": "fe5ea303b0887d5caefd3d431c3e61ad47037001"
"reference": "d49695b909c3b7628b6289db5479a1c204601f11"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/php-fig/log/zipball/fe5ea303b0887d5caefd3d431c3e61ad47037001",
"reference": "fe5ea303b0887d5caefd3d431c3e61ad47037001",
"url": "https://api.github.com/repos/php-fig/log/zipball/d49695b909c3b7628b6289db5479a1c204601f11",
"reference": "d49695b909c3b7628b6289db5479a1c204601f11",
"shasum": "",
"mirrors": [
{
@@ -2799,17 +2799,17 @@
]
},
"require": {
"php": ">=8.0.0"
"php": ">=5.3.0"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "3.x-dev"
"dev-master": "1.1.x-dev"
}
},
"autoload": {
"psr-4": {
"Psr\\Log\\": "src"
"Psr\\Log\\": "Psr/Log/"
}
},
"notification-url": "https://packagist.org/downloads/",
@@ -2830,22 +2830,22 @@
"psr-3"
],
"support": {
"source": "https://github.com/php-fig/log/tree/3.0.0"
"source": "https://github.com/php-fig/log/tree/1.1.4"
},
"time": "2021-07-14T16:46:02+00:00"
"time": "2021-05-03T11:20:27+00:00"
},
{
"name": "psr/simple-cache",
"version": "3.0.0",
"version": "1.0.1",
"source": {
"type": "git",
"url": "https://github.com/php-fig/simple-cache.git",
"reference": "764e0b3939f5ca87cb904f570ef9be2d78a07865"
"reference": "408d5eafb83c57f6365a3ca330ff23aa4a5fa39b"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/php-fig/simple-cache/zipball/764e0b3939f5ca87cb904f570ef9be2d78a07865",
"reference": "764e0b3939f5ca87cb904f570ef9be2d78a07865",
"url": "https://api.github.com/repos/php-fig/simple-cache/zipball/408d5eafb83c57f6365a3ca330ff23aa4a5fa39b",
"reference": "408d5eafb83c57f6365a3ca330ff23aa4a5fa39b",
"shasum": "",
"mirrors": [
{
@@ -2855,12 +2855,12 @@
]
},
"require": {
"php": ">=8.0.0"
"php": ">=5.3.0"
},
"type": "library",
"extra": {
"branch-alias": {
"dev-master": "3.0.x-dev"
"dev-master": "1.0.x-dev"
}
},
"autoload": {
@@ -2875,7 +2875,7 @@
"authors": [
{
"name": "PHP-FIG",
"homepage": "https://www.php-fig.org/"
"homepage": "http://www.php-fig.org/"
}
],
"description": "Common interfaces for simple caching",
@@ -2887,9 +2887,9 @@
"simple-cache"
],
"support": {
"source": "https://github.com/php-fig/simple-cache/tree/3.0.0"
"source": "https://github.com/php-fig/simple-cache/tree/master"
},
"time": "2021-10-29T13:26:27+00:00"
"time": "2017-10-23T01:57:42+00:00"
},
{
"name": "psy/psysh",
@@ -6242,16 +6242,16 @@
},
{
"name": "laravel/sail",
"version": "v1.13.0",
"version": "v1.13.1",
"source": {
"type": "git",
"url": "https://github.com/laravel/sail.git",
"reference": "a14125e71779c99e27979431a66ea2793aa6ae50"
"reference": "b9749028732eca8080c26d01cd88a2f3549c2e3e"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/laravel/sail/zipball/a14125e71779c99e27979431a66ea2793aa6ae50",
"reference": "a14125e71779c99e27979431a66ea2793aa6ae50",
"url": "https://api.github.com/repos/laravel/sail/zipball/b9749028732eca8080c26d01cd88a2f3549c2e3e",
"reference": "b9749028732eca8080c26d01cd88a2f3549c2e3e",
"shasum": "",
"mirrors": [
{
@@ -6304,7 +6304,7 @@
"issues": "https://github.com/laravel/sail/issues",
"source": "https://github.com/laravel/sail"
},
"time": "2022-01-18T18:06:55+00:00"
"time": "2022-01-20T15:31:25+00:00"
},
{
"name": "maximebf/debugbar",
@@ -6381,16 +6381,16 @@
},
{
"name": "mockery/mockery",
"version": "1.4.4",
"version": "1.5.0",
"source": {
"type": "git",
"url": "https://github.com/mockery/mockery.git",
"reference": "e01123a0e847d52d186c5eb4b9bf58b0c6d00346"
"reference": "c10a5f6e06fc2470ab1822fa13fa2a7380f8fbac"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/mockery/mockery/zipball/e01123a0e847d52d186c5eb4b9bf58b0c6d00346",
"reference": "e01123a0e847d52d186c5eb4b9bf58b0c6d00346",
"url": "https://api.github.com/repos/mockery/mockery/zipball/c10a5f6e06fc2470ab1822fa13fa2a7380f8fbac",
"reference": "c10a5f6e06fc2470ab1822fa13fa2a7380f8fbac",
"shasum": "",
"mirrors": [
{
@@ -6453,9 +6453,9 @@
],
"support": {
"issues": "https://github.com/mockery/mockery/issues",
"source": "https://github.com/mockery/mockery/tree/1.4.4"
"source": "https://github.com/mockery/mockery/tree/1.5.0"
},
"time": "2021-09-13T15:28:59+00:00"
"time": "2022-01-20T13:18:17+00:00"
},
{
"name": "myclabs/deep-copy",
+13
View File
@@ -5,6 +5,7 @@ namespace Database\Seeders;
use App\Enums\ConfigKey;
use App\Enums\GroupConfigKey;
use App\Enums\Mail\SmtpOption;
use App\Enums\Scan\AliyunOption;
use App\Enums\Watermark\FontOption;
use App\Enums\Watermark\ImageOption;
use App\Models\Group;
@@ -50,6 +51,18 @@ class DatabaseSeeder extends Seeder
GroupConfigKey::IsEnableScan => false,
GroupConfigKey::IsEnableWatermark => false,
GroupConfigKey::IsEnableOriginalProtection => false,
GroupConfigKey::ScanConfigs => [
'driver' => 'aliyun',
'drivers' => [
'aluyun' => [
AliyunOption::AccessKeyId => '',
AliyunOption::AccessKeySecret => '',
AliyunOption::RegionId => '',
AliyunOption::Scenes => ['porn'],
AliyunOption::BizType => '',
],
],
],
GroupConfigKey::WatermarkConfigs => [
'driver' => 'font',
'drivers' => [
+3
View File
@@ -716,6 +716,9 @@ select {
.col-span-6 {
grid-column: span 6 / span 6;
}
.col-span-3 {
grid-column: span 3 / span 3;
}
.m-2 {
margin: 0.5rem;
}
+45
View File
@@ -284,4 +284,49 @@ progress::-webkit-progress-value {
border-color: white;
color: #0061ff;
}
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 30px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 3px;
background-color: white;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(23px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
+53
View File
@@ -91,3 +91,56 @@ progress::-webkit-progress-value {
}
}
}
// 开关样式
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 30px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 3px;
background-color: white;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
transform: translateX(23px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
+62 -79
View File
@@ -70,102 +70,85 @@
</div>
<div class="col-span-6">
<fieldset>
<div>
<legend class="text-base font-medium text-gray-900">是否默认</legend>
<p class="text-sm text-gray-500">设置默认后,新用户注册以后将会属于该默认角色组。</p>
</div>
<div class="mt-4 space-x-6 flex items-center">
<div class="flex items-center">
<input id="is_default_yes" name="configs[is_default]" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" value="1">
<label for="is_default_yes" class="ml-3 block text-sm font-medium text-gray-700"></label>
</div>
<div class="flex items-center">
<input id="is_default_no" name="configs[is_default]" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" value="0" checked>
<label for="is_default_no" class="ml-3 block text-sm font-medium text-gray-700"></label>
</div>
</div>
</fieldset>
<x-fieldset title="是否默认" faq="设置默认后,新用户注册以后将会属于该默认角色组。">
<x-switch id="is_default_yes" name="configs[is_default]" value="1"></x-switch>
</x-fieldset>
</div>
<div class="col-span-6">
<fieldset>
<legend class="text-base font-medium text-gray-900">允许上传的图片类型</legend>
<div class="flex flex-wrap mt-4">
@foreach($extensions as $extension)
<div class="flex items-center h-5 space-x-2 mr-4">
<input id="{{ $extension }}" name="{{ $extension }}" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded" checked>
<label for="{{ $extension }}" class="font-medium text-gray-700">{{ strtoupper($extension) }}</label>
</div>
@endforeach
</div>
</fieldset>
<x-fieldset title="允许上传的图片类型">
@foreach($extensions as $extension)
<x-fieldset-checkbox id="{{ $extension }}" name="{{ $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">
<fieldset>
<div>
<legend class="text-base font-medium text-gray-900">鉴黄审查</legend>
<p class="text-sm text-gray-500">设置上传是否需要通过鉴黄功能审查,超过设置的阈值则会被标记为不健康的图片,或直接被删除。</p>
</div>
<div class="mt-4 space-x-6 flex items-center">
<div class="flex items-center">
<input id="is_enable_review_yes" name="configs[is_enable_review]" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" value="1">
<label for="is_enable_review_yes" class="ml-3 block text-sm font-medium text-gray-700"></label>
</div>
<div class="flex items-center">
<input id="is_enable_review_no" name="configs[is_enable_review]" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" value="0" checked>
<label for="is_enable_review_no" class="ml-3 block text-sm font-medium text-gray-700"></label>
</div>
</div>
</fieldset>
<div class="col-span-6 mb-4">
<x-fieldset title="图片审核" faq="设置上传是否需要通过鉴黄功能审查,违规的图片会被标记为不健康的图片,或直接被删除。">
<x-switch id="is_enable_review_no" name="configs[is_enable_review]" value="0"></x-switch>
</x-fieldset>
</div>
<div class="col-span-6 mb-4">
<x-fieldset title="审核动作">
<x-fieldset-radio id="test" name="test" checked>标记为不健康</x-fieldset-radio>
<x-fieldset-radio id="test" name="test">直接删除</x-fieldset-radio>
</x-fieldset>
</div>
<div class="col-span-6 mb-4">
<x-fieldset title="审核驱动">
<x-fieldset-radio id="aliyun" name="aliyun" checked>阿里云</x-fieldset-radio>
</x-fieldset>
</div>
<div class="mb-4">
<div class="col-span-6 sm:col-span-3 mb-4">
<label for="configs[scan_configs][access_key_id]" class="block text-sm font-medium text-gray-700">AccessKeyId</label>
<input type="text" name="configs[scan_configs][access_key_id]" id="configs[scan_configs][access_key_id]" autocomplete="access_key_id" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="请输入 AccessKeyId">
</div>
<div class="col-span-6 sm:col-span-3 mb-4">
<label for="configs[scan_configs][access_key_secret]" class="block text-sm font-medium text-gray-700">AccessKeySecret</label>
<input type="text" name="configs[scan_configs][access_key_secret]" id="configs[scan_configs][access_key_secret]" autocomplete="access_key_id" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="请输入 AccessKeySecret">
</div>
<div class="col-span-6 sm:col-span-3 mb-4">
<label for="configs[scan_configs][biz_type]" class="block text-sm font-medium text-gray-700">场景名称</label>
<input type="text" name="configs[scan_configs][biz_type]" id="configs[scan_configs][biz_type]" autocomplete="biz_type" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="请输入业务场景名称">
</div>
<div class="col-span-6 sm:col-span-3 mb-4">
<label for="configs[scan_configs][region_id]" class="block text-sm font-medium text-gray-700">地域节点</label>
<input type="text" name="configs[scan_configs][region_id]" id="configs[scan_configs][region_id]" autocomplete="region_id" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="请输入地域节点,例如:cn-shanghai">
</div>
<div class="col-span-6 sm:col-span-3 mb-4">
<x-fieldset title="场景">
<x-fieldset-checkbox name="configs[scan_configs][scenes][]" value="porn" checked>智能鉴黄</x-fieldset-checkbox>
<x-fieldset-checkbox name="configs[scan_configs][scenes][]" value="terrorism" checked>暴恐涉政</x-fieldset-checkbox>
<x-fieldset-checkbox name="configs[scan_configs][scenes][]" value="ad" checked>图文违规</x-fieldset-checkbox>
<x-fieldset-checkbox name="configs[scan_configs][scenes][]" value="qrcode" checked>二维码</x-fieldset-checkbox>
<x-fieldset-checkbox name="configs[scan_configs][scenes][]" value="live" checked>不良场景</x-fieldset-checkbox>
<x-fieldset-checkbox name="configs[scan_configs][scenes][]" value="logo" checked>Logo</x-fieldset-checkbox>
</x-fieldset>
</div>
</div>
</div>
<div data-tab="protection" class="hidden grid grid-cols-6 gap-6">
<div class="col-span-6">
<fieldset>
<div>
<legend class="text-base font-medium text-gray-900">原图保护</legend>
<p class="text-sm text-gray-500">设置该角色组下的用户上传的图片是否应用原图保护功能,开启后图片<b>不返回直链</b></p>
</div>
<div class="mt-4 space-x-6 flex items-center">
<div class="flex items-center">
<input id="is_enable_original_protection_yes" name="configs[is_enable_original_protection]" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" value="1">
<label for="is_enable_original_protection_yes" class="ml-3 block text-sm font-medium text-gray-700"></label>
</div>
<div class="flex items-center">
<input id="is_enable_original_protection_no" name="configs[is_enable_original_protection]" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" value="0" checked>
<label for="is_enable_original_protection_no" class="ml-3 block text-sm font-medium text-gray-700"></label>
</div>
</div>
</fieldset>
<div class="col-span-6 mb-4">
<x-fieldset title="原图保护" faq="设置该角色组下的用户上传的图片是否应用原图保护功能,开启后图片<b>不返回直链</b>">
<x-switch id="is_enable_original_protection_yes" name="configs[is_enable_original_protection]" value="1"></x-switch>
</x-fieldset>
</div>
<div class="col-span-6 mt-4">
<div class="col-span-6 mb-4">
<label for="cache_ttl" class="block text-sm font-medium text-gray-700">图片缓存时间()</label>
<input type="number" name="configs[cache_ttl]" id="cache_ttl" autocomplete="cache_ttl" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" placeholder="请输入受保护图片的缓存时间,0 为不缓存">
</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">
<fieldset>
<div>
<legend class="text-base font-medium text-gray-900">开启水印</legend>
<p class="text-sm text-gray-500">请注意,水印功能仅在开启了「原图保护」功能的情况下生效。</p>
</div>
<div class="mt-4 space-x-6 flex items-center">
<div class="flex items-center">
<input id="is_enable_watermark_yes" name="configs[is_enable_watermark]" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" value="1">
<label for="is_enable_watermark_yes" class="ml-3 block text-sm font-medium text-gray-700"></label>
</div>
<div class="flex items-center">
<input id="is_enable_watermark_no" name="configs[is_enable_watermark]" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300" value="0" checked>
<label for="is_enable_watermark_no" class="ml-3 block text-sm font-medium text-gray-700"></label>
</div>
</div>
</fieldset>
<div class="col-span-6 mb-4">
<x-fieldset title="开启水印" faq="请注意,水印功能仅在开启了「原图保护」功能的情况下生效。">
<x-switch id="is_enable_watermark_yes" name="configs[is_enable_watermark]" value="1"></x-switch>
</x-fieldset>
</div>
</div>
</div>
@@ -0,0 +1,4 @@
<div class="flex items-center h-5 space-x-2 mr-4">
<input type="checkbox" {{ $attributes->merge(['name' => $name, 'class' => 'focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded']) }}>
<label {{ isset($id) ? "for=\"{$id}\"" : '' }} class="font-medium text-sm text-gray-700">{{ $slot }}</label>
</div>
@@ -0,0 +1,4 @@
<div class="flex items-center mr-4">
<input type="radio" {{ $attributes->merge(['id' => $id, 'name' => $name, 'class' => 'focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300', 'value' => $value ?? 0]) }}>
<label for="{{ $id }}" class="ml-3 block text-sm font-medium text-gray-700">{{ $slot }}</label>
</div>
@@ -0,0 +1,9 @@
<fieldset>
<legend class="text-base font-medium text-gray-900">{{ $title }}</legend>
@isset($faq)
<p class="text-sm text-gray-500">{!! $faq !!}</p>
@endisset
<div class="flex flex-wrap mt-4">
{{ $slot }}
</div>
</fieldset>
@@ -0,0 +1,4 @@
<label class="switch">
<input type="checkbox" {{ $attributes }}>
<div class="slider round"></div>
</label>