feat(install): optimize installation page and add .env configuration support

- Update installation page layout and styling
- Add support for reading database configuration from .env file
- Improve error handling and user feedback during installation process
- Refactor JavaScript code for better readability and performance

.example.env

@@ -1,5 +1,8 @@
 APP_DEBUG=true
 
+# 后台系统日志开关
+APP_ADMIN_SYSTEM_LOG=true
+
 DEFAULT_TIMEZONE=Asia/Shanghai
 
 DB_TYPE=mysql

README.md

@@ -2,7 +2,7 @@
 <img alt="log" src="/public/static/common/images/logo-8.png" />
 
 <p>
-<img src="https://img.shields.io/badge/php-%3E=8.0.0-brightgreen.svg?style=for-the-badge&logo=php&colorB=ff69b4" alt="php">
+<img src="https://img.shields.io/badge/php-%3E=8.1.0-brightgreen.svg?style=for-the-badge&logo=php&colorB=ff69b4" alt="php">
 <img src="https://img.shields.io/badge/mysql-%3E=5.7-brightgreen.svg?style=for-the-badge&logo=mysql&colorB=blue" alt="MySQL">
 <img src="https://img.shields.io/badge/thinkphp-%3E=8.0.0-brightgreen.svg?style=for-the-badge&logo=thinkphp" alt="ThinkPHP">
 <img src="https://img.shields.io/badge/layui-%3E=2.9.0-brightgreen.svg?style=for-the-badge&logo=layui&colorB=orange" alt="layui">
@@ -21,9 +21,11 @@
 
 ## 项目介绍
 
-> `EasyAdmin8` 在 [`EasyAdmin`](https://gitee.com/zhongshaofa/easyadmin) 的基础上更新 ThinkPHP 框架到 8.0 ，PHP 最低版本要求不低于 8.0
+> `EasyAdmin8` 在 [`EasyAdmin`](https://gitee.com/zhongshaofa/easyadmin) 的基础上更新 ThinkPHP 框架到 8.0+ ，PHP 最低版本要求不低于 8.1
+> 
+> 2025年起 `PHP` 版本要求提升到 `8.1+`, 如果需要 `8.0` 到分支 `v8.0` 中下载
 >
-> ThinkPHP v8.0 和 Layui v2.9.x 的快速开发的后台管理系统。
+> ThinkPHP v8.0+ 和 Layui v2.9.x 的快速开发的后台管理系统。
 >
 > 项目地址：[http://easyadmin8.top](http://easyadmin8.top)
 >
@@ -58,7 +60,7 @@ if [ -f /usr/bin/curl ];then curl -sSO https://easyadmin8.top/auto-install-EasyA
 
   git clone https://gitee.com/EasyAdmin8/EasyAdmin8
 
-2.安装依赖包（确保 PHP 版本 >= 8.0）
+2.安装依赖包（确保 PHP 版本 >= 8.1）
 
   在根目录下 composer install ，如果有报错信息可以使用命令 composer install --ignore-platform-reqs
   

app/admin/controller/mall/Cate.php

@@ -8,11 +8,7 @@ use app\admin\service\annotation\ControllerAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
 use think\App;
 
-/**
- * Class Admin
- * @package app\admin\controller\system
- * @ControllerAnnotation(title="商品分类管理")
- */
+#[ControllerAnnotation(title: '商品分类管理')]
 class Cate extends AdminController
 {
 

app/admin/controller/mall/Goods.php

@@ -9,22 +9,14 @@ use app\admin\service\annotation\ControllerAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
 use app\Request;
 use think\App;
-use think\db\exception\DbException;
 use think\response\Json;
 
-/**
- * Class Goods
- * @package app\admin\controller\mall
- * @ControllerAnnotation(title="商城商品管理")
- */
+#[ControllerAnnotation(title: '商城商品管理')]
 class Goods extends AdminController
 {
 
-    /**
-     * 过滤不需要生成的权限节点 默认 CURD 中会自动生成部分节点 可以在此处过滤
-     * @var array[]
-     */
-    protected array $ignoreNode = ['export'];
+    #[NodeAnnotation(ignore: ['export'])] // 过滤不需要生成的权限节点 默认 CURD 中会自动生成部分节点 可以在此处过滤
+    protected array $ignoreNode;
 
     public function __construct(App $app)
     {
@@ -33,10 +25,7 @@ class Goods extends AdminController
         $this->assign('cate', (new MallCate())->column('title', 'id'));
     }
 
-    /**
-     * @NodeAnnotation(title="列表")
-     * @throws DbException
-     */
+    #[NodeAnnotation(title: '列表', auth: true)]
     public function index(Request $request): Json|string
     {
         if ($request->isAjax()) {
@@ -55,9 +44,7 @@ class Goods extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="入库")
-     */
+    #[NodeAnnotation(title: '入库', auth: true)]
     public function stock(Request $request, $id): string
     {
         $row = $this->model->find($id);

app/admin/controller/system/Admin.php

@@ -10,14 +10,9 @@ use app\admin\service\annotation\ControllerAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
 use app\Request;
 use think\App;
-use think\db\exception\DbException;
 use think\response\Json;
 
-/**
- * Class Admin
- * @package app\admin\controller\system
- * @ControllerAnnotation(title="管理员管理")
- */
+#[ControllerAnnotation(title: '管理员管理')]
 class Admin extends AdminController
 {
 
@@ -33,10 +28,7 @@ class Admin extends AdminController
         $this->assign('auth_list', $this->model->getAuthList());
     }
 
-    /**
-     * @NodeAnnotation(title="列表")
-     * @throws DbException
-     */
+    #[NodeAnnotation(title: '列表', auth: true)]
     public function index(Request $request): Json|string
     {
         if ($request->isAjax()) {
@@ -64,9 +56,7 @@ class Admin extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="添加")
-     */
+    #[NodeAnnotation(title: '添加', auth: true)]
     public function add(Request $request): string
     {
         if ($request->isPost()) {
@@ -87,9 +77,7 @@ class Admin extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="编辑")
-     */
+    #[NodeAnnotation(title: '编辑', auth: true)]
     public function edit(Request $request, $id = 0): string
     {
         $row = $this->model->find($id);
@@ -116,9 +104,7 @@ class Admin extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="编辑")
-     */
+    #[NodeAnnotation(title: '设置密码', auth: true)]
     public function password(Request $request, $id): string
     {
         $row = $this->model->find($id);
@@ -147,9 +133,7 @@ class Admin extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="删除")
-     */
+    #[NodeAnnotation(title: '删除', auth: true)]
     public function delete(Request $request): void
     {
         $this->checkPostRequest();
@@ -170,9 +154,7 @@ class Admin extends AdminController
         $save ? $this->success('删除成功') : $this->error('删除失败');
     }
 
-    /**
-     * @NodeAnnotation(title="属性修改")
-     */
+    #[NodeAnnotation(title: '属性修改', auth: true)]
     public function modify(Request $request): void
     {
         $this->checkPostRequest();

app/admin/controller/system/Auth.php

@@ -11,11 +11,7 @@ use app\admin\service\annotation\NodeAnnotation;
 use app\Request;
 use think\App;
 
-/**
- * @ControllerAnnotation(title="角色权限管理")
- * Class Auth
- * @package app\admin\controller\system
- */
+#[ControllerAnnotation(title: '角色权限管理', auth: true)]
 class Auth extends AdminController
 {
 
@@ -30,9 +26,7 @@ class Auth extends AdminController
         $this->model = new SystemAuth();
     }
 
-    /**
-     * @NodeAnnotation(title="授权")
-     */
+    #[NodeAnnotation(title: '授权', auth: true)]
     public function authorize(Request $request, $id): string
     {
         $row = $this->model->find($id);
@@ -45,9 +39,7 @@ class Auth extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="授权保存")
-     */
+    #[NodeAnnotation(title: '授权保存', auth: true)]
     public function saveAuthorize(Request $request): void
     {
         $this->checkPostRequest();

app/admin/controller/system/Config.php

@@ -9,14 +9,9 @@ use app\admin\service\annotation\ControllerAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
 use app\Request;
 use think\App;
-use think\facade\Cache;
 use think\response\Json;
 
-/**
- * Class Config
- * @package app\admin\controller\system
- * @ControllerAnnotation(title="系统配置管理")
- */
+#[ControllerAnnotation(title: '系统配置管理')]
 class Config extends AdminController
 {
 
@@ -28,17 +23,13 @@ class Config extends AdminController
         $this->assign('editor_types', config('admin.editor_types'));
     }
 
-    /**
-     * @NodeAnnotation(title="列表")
-     */
+    #[NodeAnnotation(title: '列表', auth: true)]
     public function index(Request $request): Json|string
     {
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="保存")
-     */
+    #[NodeAnnotation(title: '保存', auth: true)]
     public function save(Request $request): void
     {
         $this->checkPostRequest();

app/admin/controller/system/CurdGenerate.php

@@ -3,7 +3,6 @@
 namespace app\admin\controller\system;
 
 use app\admin\service\curd\BuildCurd;
-use app\admin\service\curd\exceptions\TableException;
 use app\common\controller\AdminController;
 use app\admin\service\annotation\ControllerAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
@@ -15,24 +14,16 @@ use think\facade\Db;
 use think\helper\Str;
 use think\response\Json;
 
-/**
- * @ControllerAnnotation(title="CURD可视化管理")
- * @package app\admin\controller\system
- */
+#[ControllerAnnotation(title: 'CURD可视化管理')]
 class CurdGenerate extends AdminController
 {
-    /**
-     * @NodeAnnotation(title="列表")
-     */
+    #[NodeAnnotation(title: '列表', auth: true)]
     public function index(Request $request): Json|string
     {
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="操作")
-     * @throws TableException
-     */
+    #[NodeAnnotation(title: '操作', auth: true)]
     public function save(Request $request, string $type = ''): ?Json
     {
         if (!$request->isAjax()) $this->error();

app/admin/controller/system/Log.php

@@ -3,6 +3,7 @@
 namespace app\admin\controller\system;
 
 use app\admin\model\SystemLog;
+use app\admin\service\annotation\MiddlewareAnnotation;
 use app\admin\service\tool\CommonTool;
 use app\common\controller\AdminController;
 use app\admin\service\annotation\ControllerAnnotation;
@@ -15,24 +16,16 @@ use think\db\exception\PDOException;
 use think\facade\Db;
 use think\response\Json;
 
-/**
- * @ControllerAnnotation(title="操作日志管理")
- * Class Auth
- * @package app\admin\controller\system
- */
+#[ControllerAnnotation(title: '操作日志管理')]
 class Log extends AdminController
 {
-    protected array $ignoreLog = ['record'];
-
     public function __construct(App $app)
     {
         parent::__construct($app);
         $this->model = new SystemLog();
     }
 
-    /**
-     * @NodeAnnotation(title="列表")
-     */
+    #[NodeAnnotation(title: '列表', auth: true)]
     public function index(Request $request): Json|string
     {
         if ($request->isAjax()) {
@@ -60,9 +53,7 @@ class Log extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="导出")
-     */
+    #[NodeAnnotation(title: '导出', auth: true)]
     public function export(): bool
     {
         if (env('EASYADMIN.IS_DEMO', false)) {
@@ -96,9 +87,8 @@ class Log extends AdminController
         return Excel::exportData($list, $header, $fileName, 'xlsx');
     }
 
-    /**
-     * @NodeAnnotation(title="框架日志")
-     */
+    #[MiddlewareAnnotation(ignore: MiddlewareAnnotation::IGNORE_LOG)]
+    #[NodeAnnotation(title: '框架日志', auth: true, ignore: NodeAnnotation::IGNORE_NODE)]
     public function record(): Json|string
     {
         return (new \Wolfcode\PhpLogviewer\thinkphp\LogViewer())->fetch();

app/admin/controller/system/Menu.php

@@ -11,14 +11,9 @@ use app\admin\service\annotation\NodeAnnotation;
 use app\common\controller\AdminController;
 use app\Request;
 use think\App;
-use think\db\exception\DbException;
 use think\response\Json;
 
-/**
- * Class Menu
- * @package app\admin\controller\system
- * @ControllerAnnotation(title="菜单管理",auth=true)
- */
+#[ControllerAnnotation(title: '菜单管理')]
 class Menu extends AdminController
 {
 
@@ -33,10 +28,7 @@ class Menu extends AdminController
         $this->model = new SystemMenu();
     }
 
-    /**
-     * @NodeAnnotation(title="列表")
-     * @throws DbException
-     */
+    #[NodeAnnotation(title: '列表', auth: true)]
     public function index(Request $request): Json|string
     {
         if ($request->isAjax()) {
@@ -56,9 +48,7 @@ class Menu extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="添加")
-     */
+    #[NodeAnnotation(title: '添加', auth: true)]
     public function add(Request $request): string
     {
         $id     = $request->param('id');
@@ -92,9 +82,7 @@ class Menu extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="编辑")
-     */
+    #[NodeAnnotation(title: '编辑', auth: true)]
     public function edit(Request $request, $id = 0): string
     {
         $row = $this->model->find($id);
@@ -129,9 +117,7 @@ class Menu extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="删除")
-     */
+    #[NodeAnnotation(title: '删除', auth: true)]
     public function delete(Request $request): void
     {
         $this->checkPostRequest();
@@ -151,9 +137,7 @@ class Menu extends AdminController
         }
     }
 
-    /**
-     * @NodeAnnotation(title="属性修改")
-     */
+    #[NodeAnnotation(title: '属性修改', auth: true)]
     public function modify(Request $request): void
     {
         $this->checkPostRequest();
@@ -190,9 +174,7 @@ class Menu extends AdminController
         $this->success('保存成功');
     }
 
-    /**
-     * @NodeAnnotation(title="添加菜单提示")
-     */
+    #[NodeAnnotation(title: '添加菜单提示', auth: true)]
     public function getMenuTips(): Json
     {
         $node = input('get.keywords');

app/admin/controller/system/Node.php

@@ -10,14 +10,9 @@ use app\admin\service\annotation\NodeAnnotation;
 use app\admin\service\NodeService;
 use app\Request;
 use think\App;
-use think\db\exception\DbException;
 use think\response\Json;
 
-/**
- * @ControllerAnnotation(title="系统节点管理")
- * Class Node
- * @package app\admin\controller\system
- */
+#[ControllerAnnotation(title: '系统节点管理')]
 class Node extends AdminController
 {
 
@@ -27,10 +22,7 @@ class Node extends AdminController
         $this->model = new SystemNode();
     }
 
-    /**
-     * @NodeAnnotation(title="列表")
-     * @throws DbException
-     */
+    #[NodeAnnotation(title: '列表', auth: true)]
     public function index(Request $request): Json|string
     {
         if ($request->isAjax()) {
@@ -52,9 +44,7 @@ class Node extends AdminController
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="系统节点更新")
-     */
+    #[NodeAnnotation(title: '系统节点更新', auth: true)]
     public function refreshNode($force = 0): void
     {
 
@@ -94,9 +84,7 @@ class Node extends AdminController
         $this->success('节点更新成功');
     }
 
-    /**
-     * @NodeAnnotation(title="清除失效节点")
-     */
+    #[NodeAnnotation(title: '清除失效节点', auth: true)]
     public function clearNode(): void
     {
         $this->checkPostRequest();

app/admin/controller/system/Quick.php

@@ -9,11 +9,7 @@ use app\admin\service\annotation\ControllerAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
 use think\App;
 
-/**
- * @ControllerAnnotation(title="快捷入口管理")
- * Class Quick
- * @package app\admin\controller\system
- */
+#[ControllerAnnotation(title: '快捷入口管理')]
 class Quick extends AdminController
 {
 

app/admin/controller/system/Uploadfile.php

@@ -8,10 +8,7 @@ use app\admin\service\annotation\ControllerAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
 use think\App;
 
-/**
- * @ControllerAnnotation(title="上传文件管理")
- * @package app\admin\controller\system
- */
+#[ControllerAnnotation(title: '上传文件管理')]
 class Uploadfile extends AdminController
 {
 

app/admin/middleware/SystemLog.php

@@ -3,14 +3,12 @@
 namespace app\admin\middleware;
 
 use app\admin\service\annotation\ControllerAnnotation;
+use app\admin\service\annotation\MiddlewareAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
 use app\admin\service\SystemLogService;
 use app\common\traits\JumpTrait;
 use app\Request;
-use ReflectionClass;
 use Closure;
-use Doctrine\Common\Annotations\AnnotationReader;
-use Doctrine\Common\Annotations\DocParser;
 use ReflectionException;
 
 class SystemLog
@@ -34,7 +32,8 @@ class SystemLog
     public function handle(Request $request, Closure $next)
     {
         $response = $next($request);
-        $params   = $request->param();
+        if (!env('APP_ADMIN_SYSTEM_LOG', true)) return $response;
+        $params = $request->param();
         if (isset($params['s'])) unset($params['s']);
         foreach ($params as $key => $val) {
             in_array($key, $this->sensitiveParams) && $params[$key] = "***********";
@@ -58,17 +57,25 @@ class SystemLog
                     $_controller = ucfirst($pathInfoExp[1] ?? '');
                     $className   = $_controller ? "app\admin\controller\\{$_name}\\{$_controller}" : "app\admin\controller\\{$_name}";
                     if ($_name && $_action) {
-                        $reflectionClass = new \ReflectionClass($className);
-                        $properties      = $reflectionClass->getDefaultProperties();
-                        $ignoreLog       = $properties['ignoreLog'] ?? [];
-                        if (in_array($_action, $ignoreLog)) return $response;
-                        $parser = new DocParser();
-                        $parser->setIgnoreNotImportedAnnotations(true);
-                        $reader               = new AnnotationReader($parser);
-                        $controllerAnnotation = $reader->getClassAnnotation($reflectionClass, ControllerAnnotation::class);
-                        $reflectionAction     = $reflectionClass->getMethod($_action);
-                        $nodeAnnotation       = $reader->getMethodAnnotation($reflectionAction, NodeAnnotation::class);
-                        $title                = $controllerAnnotation->title . ' - ' . $nodeAnnotation->title;
+                        $reflectionMethod = new \ReflectionMethod($className, $_action);
+                        $attributes       = $reflectionMethod->getAttributes(MiddlewareAnnotation::class);
+                        foreach ($attributes as $attribute) {
+                            $annotation = $attribute->newInstance();
+                            $_ignore    = (array)$annotation->ignore;
+                            if (in_array('log', array_map('strtolower', $_ignore))) return $response;
+                        }
+                        $controllerTitle      = $nodeTitle = '';
+                        $controllerAttributes = (new \ReflectionClass($className))->getAttributes(ControllerAnnotation::class);
+                        $actionAttributes     = $reflectionMethod->getAttributes(NodeAnnotation::class);
+                        foreach ($controllerAttributes as $controllerAttribute) {
+                            $controllerAnnotation = $controllerAttribute->newInstance();
+                            $controllerTitle      = $controllerAnnotation->title ?? '';
+                        }
+                        foreach ($actionAttributes as $actionAttribute) {
+                            $actionAnnotation = $actionAttribute->newInstance();
+                            $nodeTitle        = $actionAnnotation->title ?? '';
+                        }
+                        $title = $controllerTitle . ' - ' . $nodeTitle;
                     }
                 }catch (\Throwable $exception) {
                 }

app/admin/service/annotation/ControllerAnnotation.php

@@ -2,38 +2,20 @@
 
 namespace app\admin\service\annotation;
 
-use Doctrine\Common\Annotations\Annotation\Attributes;
-use Doctrine\Common\Annotations\Annotation\Required;
-use Doctrine\Common\Annotations\Annotation\Target;
+use Attribute;
 
 /**
- * Class ControllerAnnotation
- *
- * @Annotation
- * @Target("CLASS")
- * @Attributes({
- *     @Attribute("title", type="string"),
- * })
- *
- * @since 2.0
+ * controller 节点注解类
  */
+#[Attribute]
 final class ControllerAnnotation
 {
-
     /**
-     * Route group prefix for the controller
-     *
-     * @Required()
-     *
-     * @var string
+     * @param string $title
+     * @param bool $auth 是否需要权限
+     * @param string|array $ignore
      */
-    public $title = '';
-
-    /**
-     * 是否开启权限控制
-     * @Enum({true,false})
-     * @var bool
-     */
-    public $auth = true;
-
+    public function __construct(public string $title = '', public bool $auth = true, public string|array $ignore = '')
+    {
+    }
 }

app/admin/service/annotation/MiddlewareAnnotation.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace app\admin\service\annotation;
+
+use Attribute;
+
+#[Attribute(Attribute::IS_REPEATABLE | Attribute::TARGET_METHOD)]
+final class MiddlewareAnnotation
+{
+    /** 过滤日志 */
+    const IGNORE_LOG = 'LOG';
+
+    public function __construct(public string $type = '', public string|array $ignore = '')
+    {
+    }
+}

app/admin/service/annotation/NodeAnnotation.php

@@ -2,32 +2,24 @@
 
 namespace app\admin\service\annotation;
 
-use Doctrine\Common\Annotations\Annotation\Attributes;
+use Attribute;
 
 /**
- * 创建节点注解类
- *
- * @Annotation
- * @Target({"METHOD","CLASS"})
- * @Attributes({
- *   @Attribute("time", type = "int")
- * })
+ * action 节点注解类
  */
+#[Attribute(Attribute::IS_REPEATABLE | Attribute::TARGET_METHOD| Attribute::TARGET_PROPERTY)]
 final class NodeAnnotation
 {
+    /** 过滤节点 */
+    const IGNORE_NODE = 'NODE';
 
     /**
-     * 节点名称
-     * @Required()
-     * @var string
+     * @param string $title
+     * @param bool $auth 是否需要权限
+     * @param string|array $ignore
      */
-    public string $title;
-
-    /**
-     * 是否开启权限控制
-     * @Enum({true,false})
-     * @var bool
-     */
-    public bool $auth = true;
+    public function __construct(public string $title = '', public bool $auth = true, public string|array $ignore = '')
+    {
+    }
 
 }

app/admin/service/auth/Node.php

@@ -68,20 +68,22 @@ class Node
                 // 遍历读取所有方法的注释的参数信息
                 foreach ($methods as $method) {
 
-                    // 忽略的节点
-                    $properties = $reflectionClass->getDefaultProperties();
-                    $ignoreNode = $properties['ignoreNode'] ?? [];
-                    if (!empty($ignoreNode)) if (in_array($method->name, $ignoreNode)) continue;
+                    // 忽略掉不需要的节点
+                    $property           = $reflectionClass->getProperty('ignoreNode');
+                    $propertyAttributes = $property->getAttributes(NodeAnnotation::class);
+                    if (!empty($propertyAttributes[0])) {
+                        $propertyAttribute = $propertyAttributes[0]->newInstance();
+                        if (in_array($method->name, $propertyAttribute->ignore)) continue;
+                    }
 
-                    // 读取NodeAnnotation的注解
-                    $nodeAnnotation = $reader->getMethodAnnotation($method, NodeAnnotation::class);
-                    if (!empty($nodeAnnotation)) {
-                        $actionTitle  = !empty($nodeAnnotation->title) ? $nodeAnnotation->title : null;
-                        $actionAuth   = !empty($nodeAnnotation->auth) ? $nodeAnnotation->auth : false;
+                    $attributes = $reflectionClass->getMethod($method->name)->getAttributes(NodeAnnotation::class);
+                    foreach ($attributes as $attribute) {
+                        $annotation = $attribute->newInstance();
+                        if (!empty($annotation->ignore)) if (strtolower($annotation->ignore) == 'node') continue;
                         $actionList[] = [
                             'node'    => $controllerFormat . '/' . $method->name,
-                            'title'   => $actionTitle,
-                            'is_auth' => $actionAuth,
+                            'title'   => $annotation->title ?? null,
+                            'is_auth' => $annotation->auth ?? false,
                             'type'    => 2,
                         ];
                     }
@@ -89,16 +91,17 @@ class Node
                 // 方法非空才读取控制器注解
                 if (!empty($actionList)) {
                     // 读取Controller的注解
-                    $controllerAnnotation = $reader->getClassAnnotation($reflectionClass, ControllerAnnotation::class);
-                    $controllerTitle      = !empty($controllerAnnotation->title) ? $controllerAnnotation->title : null;
-                    $controllerAuth       = !empty($controllerAnnotation->auth) ? $controllerAnnotation->auth : false;
-                    $nodeList[]           = [
-                        'node'    => $controllerFormat,
-                        'title'   => $controllerTitle,
-                        'is_auth' => $controllerAuth,
-                        'type'    => 1,
-                    ];
-                    $nodeList             = array_merge($nodeList, $actionList);
+                    $attributes = $reflectionClass->getAttributes(ControllerAnnotation::class);
+                    foreach ($attributes as $attribute) {
+                        $controllerAnnotation = $attribute->newInstance();
+                        $nodeList[]           = [
+                            'node'    => $controllerFormat,
+                            'title'   => $controllerAnnotation->title ?? null,
+                            'is_auth' => $controllerAnnotation->auth ?? false,
+                            'type'    => 1,
+                        ];
+                    }
+                    $nodeList = array_merge($nodeList, $actionList);
                 }
 
             }

app/admin/service/curd/BuildCurd.php

@@ -300,7 +300,7 @@ class BuildCurd
                 }
             }
             $this->tableComment = $this->table;
-        }catch (Exception $e) {
+        } catch (Exception $e) {
             throw new TableException($e->getMessage());
         }
 
@@ -308,11 +308,11 @@ class BuildCurd
         $nodeArray = explode('_', $this->table);
         if (count($nodeArray) == 1) {
             $this->controllerFilename = ucfirst($nodeArray[0]);
-        }else {
+        } else {
             foreach ($nodeArray as $k => $v) {
                 if ($k == 0) {
                     $this->controllerFilename = "{$v}{$this->DS}";
-                }else {
+                } else {
                     $this->controllerFilename .= ucfirst($v);
                 }
             }
@@ -396,7 +396,7 @@ class BuildCurd
             }
             $this->relationArray[$relationTable] = $relation;
             $this->selectFields[]                = $foreignKey;
-        }catch (Exception $e) {
+        } catch (Exception $e) {
             throw new TableException($e->getMessage());
         }
         return $this;
@@ -652,7 +652,6 @@ class BuildCurd
             if (in_array($key, ['describe', 'content', 'details'])) {
                 $this->editorFields[] = $key;
             }
-
         }
         return $this;
     }
@@ -706,7 +705,7 @@ class BuildCurd
                         }
                     }
                     !empty($formatDefine) && $colum['define'] = $formatDefine;
-                }else {
+                } else {
                     $colum['define'] = $define;
                 }
             }
@@ -730,7 +729,8 @@ class BuildCurd
             $this->getTemplate("controller{$this->DS}select"),
             [
                 'name' => $name,
-            ]);
+            ]
+        );
         return $selectCode;
     }
 
@@ -754,7 +754,8 @@ class BuildCurd
             [
                 'name'   => $name,
                 'values' => $values,
-            ]);
+            ]
+        );
         return $selectCode;
     }
 
@@ -775,7 +776,8 @@ class BuildCurd
                 'name'     => "notes['$field']",
                 'relation' => $relation,
                 'values'   => $field,
-            ]);
+            ]
+        );
         return $selectCode;
     }
 
@@ -794,7 +796,8 @@ class BuildCurd
             [
                 'name'   => "notes['$field']",
                 'select' => $select,
-            ]);
+            ]
+        );
     }
 
     /**
@@ -813,7 +816,8 @@ class BuildCurd
                 'field'  => $field,
                 'name'   => "notes['$field']",
                 'select' => $select,
-            ]);
+            ]
+        );
     }
 
     /**
@@ -832,7 +836,8 @@ class BuildCurd
                 'field'  => $field,
                 'name'   => "notes['$field']",
                 'select' => $select,
-            ]);
+            ]
+        );
     }
 
     /**
@@ -945,7 +950,6 @@ class BuildCurd
                 $this->tableColumns[$field]['formType'] = 'select';
                 continue;
             }
-
         }
 
         // 关联表
@@ -1018,7 +1022,6 @@ class BuildCurd
         }
 
         return $this;
-
     }
 
     /**
@@ -1031,7 +1034,7 @@ class BuildCurd
         $constructRelation = '';
         if (empty($this->relationArray)) {
             $controllerIndexMethod = '';
-        }else {
+        } else {
             $relationCode = '';
             foreach ($this->relationArray as $key => $val) {
                 $relation     = CommonTool::lineToHump($key);
@@ -1044,7 +1047,8 @@ class BuildCurd
                 $this->getTemplate("controller{$this->DS}indexMethod"),
                 [
                     'relationIndexMethod' => $relationCode,
-                ]);
+                ]
+            );
         }
         $selectList = '';
         //        foreach ($this->relationArray as $relation) {
@@ -1071,7 +1075,8 @@ class BuildCurd
                 'indexMethod'          => $controllerIndexMethod,
                 'selectList'           => $selectList,
                 'constructRelation'    => $constructRelation,
-            ]);
+            ]
+        );
         $this->fileList[$controllerFile] = $controllerValue;
         return $this;
     }
@@ -1129,7 +1134,8 @@ class BuildCurd
                 'relationList'   => $relationList,
                 //                'selectList'     => $selectList,
                 'selectArrays'   => CommonTool::replaceArrayString(var_export($selectArrays, true)),
-            ]);
+            ]
+        );
 
 
         $this->fileList[$modelFile] = $modelValue;
@@ -1165,7 +1171,8 @@ class BuildCurd
                     'relationList'   => '',
                     'selectList'     => '',
                     'selectArrays'   => "[]",
-                ]);
+                ]
+            );
             $this->fileList[$relationModelFile] = $relationModelValue;
         }
         return $this;
@@ -1184,7 +1191,8 @@ class BuildCurd
             [
                 'controllerUrl' => $this->controllerUrl,
                 'notesScript'   => $this->formatNotesScript(),
-            ]);
+            ]
+        );
         $this->fileList[$viewIndexFile] = $viewIndexValue;
 
         // 添加页面
@@ -1202,42 +1210,44 @@ class BuildCurd
             // 根据formType去获取具体模板
             if ($val['formType'] == 'image') {
                 $templateFile = "view{$this->DS}module{$this->DS}image";
-            }elseif ($val['formType'] == 'images') {
+            } elseif ($val['formType'] == 'images') {
                 $templateFile = "view{$this->DS}module{$this->DS}images";
                 $define       = $val['define'] ?? '|';
-            }elseif ($val['formType'] == 'file') {
+            } elseif ($val['formType'] == 'file') {
                 $templateFile = "view{$this->DS}module{$this->DS}file";
-            }elseif ($val['formType'] == 'files') {
+            } elseif ($val['formType'] == 'files') {
                 $templateFile = "view{$this->DS}module{$this->DS}files";
                 $define       = $val['define'] ?? '|';
-            }elseif ($val['formType'] == 'editor') {
+            } elseif ($val['formType'] == 'editor') {
                 $templateFile   = "view{$this->DS}module{$this->DS}editor";
                 $val['default'] = '""';
-            }elseif ($val['formType'] == 'date') {
+            } elseif ($val['formType'] == 'date') {
                 $templateFile = "view{$this->DS}module{$this->DS}date";
                 $define       = 'date';
-            }elseif ($val['formType'] == 'datetime') {
+            } elseif ($val['formType'] == 'datetime') {
                 $templateFile = "view{$this->DS}module{$this->DS}date";
                 $define       = 'datetime';
-            }elseif ($val['formType'] == 'radio') {
+            } elseif ($val['formType'] == 'radio') {
                 $templateFile = "view{$this->DS}module{$this->DS}radio";
                 if (!empty($val['define'])) {
                     $define = $this->buildRadioView($field, '{in name="k" value="' . $val['default'] . '"}checked=""{/in}');
                 }
-            }elseif ($val['formType'] == 'checkbox') {
+            } elseif ($val['formType'] == 'checkbox') {
                 $templateFile = "view{$this->DS}module{$this->DS}checkbox";
                 if (!empty($val['define'])) {
                     $define = $this->buildCheckboxView($field, '{in name="k" value="' . $val['default'] . '"}checked=""{/in}');
                 }
-            }elseif ($val['formType'] == 'select') {
+            } elseif ($val['formType'] == 'select') {
                 $templateFile = "view{$this->DS}module{$this->DS}select";
                 if (isset($val['bindRelation'])) {
                     $define = $this->buildOptionView($val['bindRelation']);
-                }elseif (!empty($val['define'])) {
+                } elseif (!empty($val['define'])) {
                     $define = $this->buildOptionView($field);
                 }
-            }elseif ($field == 'remark' || $val['formType'] == 'textarea') {
+            } elseif ($field == 'remark' || $val['formType'] == 'textarea') {
                 $templateFile = "view{$this->DS}module{$this->DS}textarea";
+            } elseif ($field == 'sort') {
+                $templateFile = "view{$this->DS}module{$this->DS}sort";
             }
             $addFormList .= CommonTool::replaceTemplate(
                 $this->getTemplate($templateFile),
@@ -1247,13 +1257,15 @@ class BuildCurd
                     'required' => $this->buildRequiredHtml($val['required']),
                     'value'    => $val['default'],
                     'define'   => $define,
-                ]);
+                ]
+            );
         }
         $viewAddValue                 = CommonTool::replaceTemplate(
             $this->getTemplate("view{$this->DS}form"),
             [
                 'formList' => $addFormList,
-            ]);
+            ]
+        );
         $this->fileList[$viewAddFile] = $viewAddValue;
 
 
@@ -1274,41 +1286,43 @@ class BuildCurd
             // 根据formType去获取具体模板
             if ($val['formType'] == 'image') {
                 $templateFile = "view{$this->DS}module{$this->DS}image";
-            }elseif ($val['formType'] == 'images') {
+            } elseif ($val['formType'] == 'images') {
                 $templateFile = "view{$this->DS}module{$this->DS}images";
-            }elseif ($val['formType'] == 'file') {
+            } elseif ($val['formType'] == 'file') {
                 $templateFile = "view{$this->DS}module{$this->DS}file";
-            }elseif ($val['formType'] == 'files') {
+            } elseif ($val['formType'] == 'files') {
                 $templateFile = "view{$this->DS}module{$this->DS}files";
-            }elseif ($val['formType'] == 'editor') {
+            } elseif ($val['formType'] == 'editor') {
                 $templateFile = "view{$this->DS}module{$this->DS}editor";
                 $value        = '$row["' . $field . '"]';
-            }elseif ($val['formType'] == 'date') {
+            } elseif ($val['formType'] == 'date') {
                 $templateFile = "view{$this->DS}module{$this->DS}date";
                 $define       = 'date';
-            }elseif ($val['formType'] == 'datetime') {
+            } elseif ($val['formType'] == 'datetime') {
                 $templateFile = "view{$this->DS}module{$this->DS}date";
                 $define       = 'datetime';
-            }elseif ($val['formType'] == 'radio') {
+            } elseif ($val['formType'] == 'radio') {
                 $templateFile = "view{$this->DS}module{$this->DS}radio";
                 if (!empty($val['define'])) {
                     $define = $this->buildRadioView($field, '{in name="k" value="$row.' . $field . '"}checked=""{/in}');
                 }
-            }elseif ($val['formType'] == 'checkbox') {
+            } elseif ($val['formType'] == 'checkbox') {
                 $templateFile = "view{$this->DS}module{$this->DS}checkbox";
                 if (!empty($val['define'])) {
                     $define = $this->buildCheckboxView($field, '{in name="k" value="$row.' . $field . '"}checked=""{/in}');
                 }
-            }elseif ($val['formType'] == 'select') {
+            } elseif ($val['formType'] == 'select') {
                 $templateFile = "view{$this->DS}module{$this->DS}select";
                 if (isset($val['bindRelation'])) {
                     $define = $this->buildOptionView($val['bindRelation'], '{in name="k" value="$row.' . $field . '"}selected=""{/in}');
-                }elseif (!empty($val['define'])) {
+                } elseif (!empty($val['define'])) {
                     $define = $this->buildOptionView($field, '{in name="k" value="$row.' . $field . '"}selected=""{/in}');
                 }
-            }elseif ($field == 'remark' || $val['formType'] == 'textarea') {
+            } elseif ($field == 'remark' || $val['formType'] == 'textarea') {
                 $templateFile = "view{$this->DS}module{$this->DS}textarea";
                 $value        = '{$row.' . $field . '|raw|default=\'\'}';
+            } elseif ($field == 'sort') {
+                $templateFile = "view{$this->DS}module{$this->DS}sort";
             }
             $editFormList .= CommonTool::replaceTemplate(
                 $this->getTemplate($templateFile),
@@ -1318,13 +1332,15 @@ class BuildCurd
                     'required' => $this->buildRequiredHtml($val['required']),
                     'value'    => $value,
                     'define'   => $define,
-                ]);
+                ]
+            );
         }
         $viewEditValue                 = CommonTool::replaceTemplate(
             $this->getTemplate("view{$this->DS}form"),
             [
                 'formList' => $editFormList,
-            ]);
+            ]
+        );
         $this->fileList[$viewEditFile] = $viewEditValue;
 
         return $this;
@@ -1345,31 +1361,31 @@ class BuildCurd
 
             if ($val['formType'] == 'image') {
                 $templateValue = "{field: '{$field}', title: '{$val['comment']}', templet: ea.table.image}";
-            }elseif ($val['formType'] == 'images') {
+            } elseif ($val['formType'] == 'images') {
                 continue;
-            }elseif ($val['formType'] == 'file') {
+            } elseif ($val['formType'] == 'file') {
                 $templateValue = "{field: '{$field}', title: '{$val['comment']}', templet: ea.table.url}";
-            }elseif ($val['formType'] == 'files') {
+            } elseif ($val['formType'] == 'files') {
                 continue;
-            }elseif ($val['formType'] == 'editor') {
+            } elseif ($val['formType'] == 'editor') {
                 continue;
-            }elseif (in_array($field, $this->switchFields)) {
+            } elseif (in_array($field, $this->switchFields)) {
                 if (!empty($val['define'])) {
                     $templateValue = "{field: '{$field}', search: 'select', selectList: notes?.{$field} || {}, title: '{$val['comment']}', templet: ea.table.switch}";
-                }else {
+                } else {
                     $templateValue = "{field: '{$field}', title: '{$val['comment']}', templet: ea.table.switch}";
                 }
-            }elseif (in_array($val['formType'], ['select', 'checkbox', 'radio', 'switch'])) {
+            } elseif (in_array($val['formType'], ['select', 'checkbox', 'radio', 'switch'])) {
                 if (!empty($val['define'])) {
                     $templateValue = "{field: '{$field}', search: 'select', selectList: notes?.{$field} || {}, title: '{$val['comment']}'}";
-                }else {
+                } else {
                     $templateValue = "{field: '{$field}', title: '{$val['comment']}'}";
                 }
-            }elseif ($field == 'remark') {
+            } elseif ($field == 'remark') {
                 $templateValue = "{field: '{$field}', title: '{$val['comment']}', templet: ea.table.text}";
-            }elseif (in_array($field, $this->sortFields)) {
+            } elseif (in_array($field, $this->sortFields)) {
                 $templateValue = "{field: '{$field}', title: '{$val['comment']}', edit: 'text'}";
-            }else {
+            } else {
                 $templateValue = "{field: '{$field}', title: '{$val['comment']}'}";
             }
 
@@ -1382,23 +1398,23 @@ class BuildCurd
             foreach ($tableVal['tableColumns'] as $field => $val) {
                 if ($val['formType'] == 'image') {
                     $templateValue = "{field: '{$table}.{$field}', title: '{$val['comment']}', templet: ea.table.image}";
-                }elseif ($val['formType'] == 'images') {
+                } elseif ($val['formType'] == 'images') {
                     continue;
-                }elseif ($val['formType'] == 'file') {
+                } elseif ($val['formType'] == 'file') {
                     $templateValue = "{field: '{$table}.{$field}', title: '{$val['comment']}', templet: ea.table.url}";
-                }elseif ($val['formType'] == 'files') {
+                } elseif ($val['formType'] == 'files') {
                     continue;
-                }elseif ($val['formType'] == 'editor') {
+                } elseif ($val['formType'] == 'editor') {
                     continue;
-                }elseif ($val['formType'] == 'select') {
+                } elseif ($val['formType'] == 'select') {
                     $templateValue = "{field: '{$table}.{$field}', title: '{$val['comment']}'}";
-                }elseif ($field == 'remark') {
+                } elseif ($field == 'remark') {
                     $templateValue = "{field: '{$table}.{$field}', title: '{$val['comment']}', templet: ea.table.text}";
-                }elseif (in_array($field, $this->switchFields)) {
+                } elseif (in_array($field, $this->switchFields)) {
                     $templateValue = "{field: '{$table}.{$field}', title: '{$val['comment']}', templet: ea.table.switch}";
-                }elseif (in_array($field, $this->sortFields)) {
+                } elseif (in_array($field, $this->sortFields)) {
                     $templateValue = "{field: '{$table}.{$field}', title: '{$val['comment']}', edit: 'text'}";
-                }else {
+                } else {
                     $templateValue = "{field: '{$table}.{$field}', title: '{$val['comment']}'}";
                 }
 
@@ -1413,7 +1429,8 @@ class BuildCurd
             [
                 'controllerUrl' => $this->controllerUrl,
                 'indexCols'     => $indexCols,
-            ]);
+            ]
+        );
         $this->fileList[$jsFile] = $jsValue;
         return $this;
     }
@@ -1538,4 +1555,4 @@ class BuildCurd
     {
         return '    let notes = JSON.parse(\'{$notes|json_encode=256|raw}\');';
     }
-}
+}

app/admin/service/curd/templates/controller/controller.code

@@ -7,9 +7,7 @@ use app\admin\service\annotation\ControllerAnnotation;
 use app\admin\service\annotation\NodeAnnotation;
 use think\App;
 
-/**
- * @ControllerAnnotation(title="{{controllerAnnotation}}")
- */
+#[ControllerAnnotation(title: '{{controllerAnnotation}}')]
 class {{controllerName}} extends AdminController
 {
 

app/admin/service/curd/templates/view/module/sort.code

@@ -0,0 +1,7 @@
+
+        <div class="layui-form-item">
+            <label class="layui-form-label">{{comment}}</label>
+            <div class="layui-input-block">
+                <input type="number" name="{{field}}" class="layui-input" lay-affix="number" {{required}} placeholder="请输入{{comment}}" value="{{value}}">
+            </div>
+        </div>

app/admin/traits/Curd.php

@@ -17,9 +17,7 @@ use think\response\Json;
 trait Curd
 {
 
-    /**
-     * @NodeAnnotation(title="列表")
-     */
+    #[NodeAnnotation(title: '列表', auth: true)]
     public function index(Request $request): Json|string
     {
         if ($request->isAjax()) {
@@ -40,9 +38,7 @@ trait Curd
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="添加")
-     */
+    #[NodeAnnotation(title: '添加', auth: true)]
     public function add(Request $request): string
     {
         if ($request->isPost()) {
@@ -61,9 +57,7 @@ trait Curd
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="编辑")
-     */
+    #[NodeAnnotation(title: '编辑', auth: true)]
     public function edit(Request $request, $id = 0): string
     {
         $row = $this->model->find($id);
@@ -85,9 +79,7 @@ trait Curd
         return $this->fetch();
     }
 
-    /**
-     * @NodeAnnotation(title="删除")
-     */
+    #[NodeAnnotation(title: '删除', auth: true)]
     public function delete(Request $request): void
     {
         // 如果不是id作为主键 请在对应的控制器中覆盖重写
@@ -103,9 +95,7 @@ trait Curd
         $save ? $this->success('删除成功') : $this->error('删除失败');
     }
 
-    /**
-     * @NodeAnnotation(title="导出")
-     */
+    #[NodeAnnotation(title: '导出', auth: true)]
     public function export()
     {
         if (env('EASYADMIN.IS_DEMO', false)) {
@@ -133,9 +123,7 @@ trait Curd
         return Excel::exportData($list, $header, $fileName, 'xlsx');
     }
 
-    /**
-     * @NodeAnnotation(title="属性修改")
-     */
+    #[NodeAnnotation(title: '属性修改', auth: true)]
     public function modify(Request $request): void
     {
         $this->checkPostRequest();

app/admin/view/index/index.html

@@ -26,15 +26,6 @@
                 </ul>
 
                 <ul class="layui-nav layui-layout-right">
-                    <!--                    <li class="layui-nav-item" lay-unselect>-->
-                    <!--                        <div class="layui-form ws-header-theme" lay-filter="header-theme">-->
-                    <!--                            <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">-->
-                    <!--                            <div lay-checkbox>-->
-                    <!--                                <i class="layui-icon layui-icon-moon"></i> |-->
-                    <!--                                <i class="layui-icon layui-icon-light"></i>-->
-                    <!--                            </div>-->
-                    <!--                        </div>-->
-                    <!--                    </li>-->
                     <li class="layui-nav-item" lay-unselect>
                         <a href="http://easyadmin8.top" target="_blank"><i class="fa fa-home"></i></a>
                     </li>
@@ -47,6 +38,15 @@
                     <li class="layui-nav-item mobile layui-hide-xs" lay-unselect>
                         <a href="javascript:;" data-check-screen="full"><i class="fa fa-arrows-alt"></i></a>
                     </li>
+                    <li class="layui-nav-item" lay-unselect>
+                        <div class="layui-form ws-header-theme" lay-filter="header-theme">
+                            <input type="checkbox" name="theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
+                            <div lay-checkbox>
+                                <i class="layui-icon layui-icon-moon"></i> |
+                                <i class="layui-icon layui-icon-light"></i>
+                            </div>
+                        </div>
+                    </li>
                     <li class="layui-nav-item layuimini-setting">
                         <a href="javascript:;">
                             <img src="{:session('admin.head_img')}" class="layui-nav-img" width="50" height="50">

app/admin/view/index/welcome.html

@@ -180,7 +180,7 @@
                                 <td>Github</td>
                                 <td>
                                     <a href="https://github.com/wolf-leo/easyAdmin8" target="_blank">
-                                        <i class="layui-icon layui-icon-github layui-font-20 layui-font-cyan layui-text"></i>
+                                        <i class="layui-icon layui-icon-github layui-font-20 layui-font-gray layui-text"></i>
                                     </a>
                                 </td>
                             </tr>
@@ -192,7 +192,7 @@
                 <div class="layui-card">
                     <div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i>作者心语</div>
                     <div class="layui-card-body layui-text">
-                        <p class="layui-font-cyan">
+                        <p>
                             本模板基于layui2.9.x以及font-awesome-4.7.0进行实现。
                             <a class="layui-btn layui-btn-xs layui-btn-danger" style="vertical-align: baseline;" target="_blank" href="http://layui.dev/docs">layui文档</a>
                         </p>

app/admin/view/layout/default.html

@@ -6,6 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="icon" href="{:sysConfig('site', 'site_ico')}" type="image/x-icon">
     <!--[if lt IE 9]>
     <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
     <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
@@ -26,7 +27,6 @@
             EDITOR_TYPE: "{$adminEditor|default='wangEditor'}",
         };
     </script>
-    <script src="/static/plugs/xmSelect/xm-select.js" charset="utf-8"></script>
     <script src="/static/plugs/layui-v2.x/layui.js" charset="utf-8"></script>
     <script src="/static/plugs/require-2.3.6/require.js" charset="utf-8"></script>
     <script src="/static/config-admin.js?v={$version}" charset="utf-8"></script>

app/admin/view/mall/cate/add.html

@@ -22,7 +22,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">分类排序</label>
             <div class="layui-input-block">
-                <input type="number" name="sort" class="layui-input" placeholder="请输入分类排序" value="0">
+                <input type="number" name="sort" class="layui-input" lay-affix="number" placeholder="请输入分类排序" value="0">
             </div>
         </div>
 

app/admin/view/mall/cate/edit.html

@@ -22,7 +22,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">分类排序</label>
             <div class="layui-input-block">
-                <input type="number" name="sort" class="layui-input" placeholder="请输入分类排序" value="{$row.sort|default=''}">
+                <input type="number" name="sort" class="layui-input" lay-affix="number" placeholder="请输入分类排序" value="{$row.sort|default=''}">
             </div>
         </div>
 

app/admin/view/mall/goods/add.html

@@ -78,7 +78,7 @@
                 <div class="layui-form-item">
                     <label class="layui-form-label">分类排序</label>
                     <div class="layui-input-block">
-                        <input type="number" name="sort" class="layui-input" placeholder="请输入分类排序" value="0">
+                        <input type="number" name="sort" class="layui-input" lay-affix="number" placeholder="请输入分类排序" value="0">
                     </div>
                 </div>
 

app/admin/view/mall/goods/edit.html

@@ -78,7 +78,7 @@
                 <div class="layui-form-item">
                     <label class="layui-form-label">分类排序</label>
                     <div class="layui-input-block">
-                        <input type="number" name="sort" class="layui-input" placeholder="请输入分类排序" value="{$row.sort|default=''}">
+                        <input type="number" name="sort" class="layui-input" lay-affix="number" placeholder="请输入分类排序" value="{$row.sort|default=''}">
                     </div>
                 </div>
 

app/admin/view/mall/goods/stock.html

@@ -25,7 +25,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">入库数量</label>
             <div class="layui-input-block">
-                <input type="number" name="stock" class="layui-input" lay-verify="required" placeholder="请输入入库数量" value="0">
+                <input type="number" name="stock" class="layui-input" lay-affix="number" lay-verify="required" placeholder="请输入入库数量" value="0">
             </div>
         </div>
 

app/admin/view/system/menu/add.html

@@ -53,7 +53,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">菜单排序</label>
             <div class="layui-input-block">
-                <input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="0" class="layui-input">
+                <input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="0" class="layui-input" lay-affix="number">
             </div>
         </div>
 

app/admin/view/system/menu/edit.html

@@ -53,7 +53,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">菜单排序</label>
             <div class="layui-input-block">
-                <input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="{$row.sort|default=''}" class="layui-input">
+                <input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="{$row.sort|default=''}" class="layui-input" lay-affix="number">
             </div>
         </div>
 

app/admin/view/system/quick/add.html

@@ -31,7 +31,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">菜单排序</label>
             <div class="layui-input-block">
-                <input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="0" class="layui-input">
+                <input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="0" class="layui-input" lay-affix="number">
             </div>
         </div>
 

app/admin/view/system/quick/edit.html

@@ -31,7 +31,7 @@
         <div class="layui-form-item">
             <label class="layui-form-label">菜单排序</label>
             <div class="layui-input-block">
-                <input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="{$row.sort|default=''}" class="layui-input">
+                <input type="number" name="sort" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" value="{$row.sort|default=''}" class="layui-input" lay-affix="number">
             </div>
         </div>
 

app/common/controller/AdminController.php

@@ -44,6 +44,12 @@ class AdminController extends BaseController
         'title',
     ];
 
+    /**
+     * 过滤节点更新
+     * @var array
+     */
+    protected array $ignoreNode = [];
+
     /**
      * 不导出的字段信息
      * @var array

app/index/controller/Install.php

@@ -22,8 +22,8 @@ class Install extends BaseController
             // $this->redirect('/');
             $isInstall = true;
             $errorInfo = '已安装系统，如需重新安装请删除文件：/config/install/lock/install.lock，或者删除 /install 路由';
-        }elseif (version_compare(phpversion(), '8.0.0', '<')) {
-            $errorInfo = 'PHP版本不能小于8.0.0';
+        }elseif (version_compare(phpversion(), '8.1.0', '<')) {
+            $errorInfo = 'PHP版本不能小于8.1.0';
         }elseif (!extension_loaded("PDO")) {
             $errorInfo = '当前未开启PDO，无法进行安装';
         }
@@ -31,8 +31,16 @@ class Install extends BaseController
             $errorInfo = '.env 文件不存在，请先配置 .env 文件';
         }
         if (!$request->isAjax()) {
+            $envInfo     = [
+                'DB_HOST'   => $isInstall ? '' : env('DB_HOST', '127.0.0.1'),
+                'DB_NAME'   => $isInstall ? '' : env('DB_NAME', 'easyadmin8'),
+                'DB_USER'   => $isInstall ? '' : env('DB_USER', 'root'),
+                'DB_PASS'   => $isInstall ? '' : env('DB_PASS', 'root'),
+                'DB_PORT'   => $isInstall ? '' : env('DB_PORT', 3306),
+                'DB_PREFIX' => $isInstall ? '' : env('DB_PREFIX', 'ea8_'),
+            ];
             $currentHost = '://';
-            $result      = compact('errorInfo', 'currentHost', 'isInstall');
+            $result      = compact('errorInfo', 'currentHost', 'isInstall', 'envInfo');
             return view('index/install/index', $result);
         }
         if ($errorInfo) $this->error($errorInfo);

composer.json

@@ -20,7 +20,7 @@
         }
     ],
     "require": {
-        "php": ">=8.0.0",
+        "php": ">=8.1.0",
         "topthink/framework": "^8.0",
         "topthink/think-orm": "^3.0",
         "topthink/think-multi-app": "^1.1.0",
@@ -30,15 +30,15 @@
         "aliyuncs/oss-sdk-php": "^2.6",
         "qcloud/cos-sdk-v5": "^2.6",
         "jianyan74/php-excel": "^1.0.2",
-        "doctrine/annotations": "^1.13",
+        "doctrine/annotations": "^2.0.0",
         "phpoffice/phpspreadsheet": "^1.28",
         "myclabs/php-enum": "^1.8",
-        "ext-json": "*",
-        "qiniu/php-sdk": "v7.11.0",
-        "ext-mysqli": "*",
-        "ext-pdo": "*",
+        "qiniu/php-sdk": "^7.11.0",
         "wolf-leo/phplogviewer": "^0.11.3",
-        "wolfcode/authenticator": "^0.0.6"
+        "wolfcode/authenticator": "^0.0.6",
+        "ext-json": "*",
+        "ext-mysqli": "*",
+        "ext-pdo": "*"
     },
     "require-dev": {
         "symfony/var-dumper": ">=4.2",

config/install/sql/install.sql

@@ -235,11 +235,11 @@ VALUES ('64', 'oss_domain', 'upload', '填你的', '阿里云oss访问域名', '
 INSERT INTO `ea_system_config`
 VALUES ('65', 'logo_title', 'site', 'EasyAdmin', 'LOGO标题', '0', null, null);
 INSERT INTO `ea_system_config`
-VALUES ('66', 'logo_image', 'site', '/favicon.ico', 'logo图片', '0', null, null);
+VALUES ('66', 'logo_image', 'site', '/static/common/images/logo-1.png', 'logo图片', '0', null, null);
 INSERT INTO `ea_system_config`
 VALUES ('68', 'site_name', 'site', 'EasyAdmin后台系统', '站点名称', '0', null, null);
 INSERT INTO `ea_system_config`
-VALUES ('69', 'site_ico', 'site', '填你的', '浏览器图标', '0', null, null);
+VALUES ('69', 'site_ico', 'site', '/favicon.ico', '浏览器图标', '0', null, null);
 INSERT INTO `ea_system_config`
 VALUES ('70', 'site_copyright', 'site', '填你的', '版权信息', '0', null, null);
 INSERT INTO `ea_system_config`

log.md

@@ -1,2 +1,3 @@
+> 2025年01月01日 `PHP` 要求升级到 `8.1+`
 >
 > 2024年05月 更新 `EasyAdmin8` 重置版，多处语法、写法进行变更

public/static/admin/css/color.css

@@ -0,0 +1,59 @@
+.green {
+    color: #11c26d !important;
+}
+
+.red {
+    color: #ff4c52 !important;
+}
+
+.cyan {
+    color: #0bb2d4 !important;
+}
+
+.purple {
+    color: #9463f7 !important;
+}
+
+.blue {
+    color: #3e8ef7 !important;
+}
+
+.orange {
+    color: #eb6709 !important;
+}
+
+.indigo {
+    color: #6610f2 !important;
+}
+
+.pink {
+    color: #e83e8c !important;
+}
+
+.teal {
+    color: #20c997 !important;
+}
+
+.white {
+    color: #fff !important;
+}
+
+.gray {
+    color: #6c757d !important;
+}
+
+.gray-dark {
+    color: #343a40 !important;
+}
+
+.secondary {
+    color: #6c757d !important;
+}
+
+.yellow {
+    color: rgb(255, 214, 102) !important;
+}
+
+.magenta {
+    color: #eb2f96 !important;
+}

public/static/admin/css/login.css

@@ -1,3 +1,6 @@
+body {
+    background: #333333;
+}
 
 .demo {
     padding-top: 20px;
@@ -170,7 +173,6 @@
 }
 
 .container {
-    background: #333333;
     position: static;
     font-size: 12px;
     height: 100%;

public/static/admin/css/public.css

@@ -1,21 +1,23 @@
 @import url("../../plugs/layui-v2.x/css/layui.css");
 @import url("../../plugs/font-awesome-4.7.0/css/font-awesome.min.css");
+@import url("../css/color.css");
+@import url("../css/themes/index.css");
 @import url("../css/iconfont.css");
 
-html, body {
-    height: 100%;
-    background: #f2f2f2;
-}
-
-html.dark, body {
-    height: 100%;
-    background: var(--lay-color-bg-1);
+html,
+body {
+    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .ws-header-theme .layui-form-switch {
     vertical-align: baseline;
 }
 
+.ws-header-theme .layui-form-onswitch {
+    background: #333333;
+    border: 1px solid rgba(255, 255, 255, .7);
+}
+
 .layuimini-container {
     min-height: 250px;
     padding: 15px;
@@ -58,10 +60,8 @@ html.dark, body {
 }
 
 .hr-line {
-    color: #fff;
     height: 1px;
     margin: 30px 0;
-    background-color: #fff;
     border-top: 1px dashed #e7eaec;
 }
 
@@ -84,7 +84,6 @@ html.dark, body {
     margin: 0;
     border: 1px solid #e6e6e6;
     padding: 10px 20px 5px 20px;
-    color: #6b6b6b;
 }
 
 /**数据表格-搜索表单样式*/
@@ -134,10 +133,17 @@ html.dark, body {
     color: #a29c9c;
 }
 
-.layui-form-item xm-select {
+.tableSearch-xmSelect xm-select {
     min-height: 30px !important;
     line-height: 30px !important;
     margin: 0 !important;
+    background-color: var(--lay-color-fill-2);
+}
+
+.elem-style-dark .tableSearch-xmSelect xm-select {
+    background-color: var(--lay-color-fill-2);
+    color: var(--lay-color-text-2);
+    border-color: var(--lay-color-border-1) !important;
 }
 
 /** 按钮背景色 */
@@ -265,7 +271,6 @@ table样式
 
 .layuimini-container .layui-table-box .layui-table-header th {
     font-weight: bold !important;
-    color: #565656 !important;
 }
 
 /**
@@ -340,7 +345,7 @@ table样式
 弹出层样式
  */
 .layui-layer-easy .layui-layer-title {
-    background: #2c3e50 !important;
+    background: var(--lay-color-bg-5);
     color: #fff !important;
     border-bottom: none;
 }
@@ -363,7 +368,6 @@ table样式
 .layui-layer-easy .layui-layer-btn {
     text-align: center !important;
     padding: 10px !important;
-    background: #ecf0f1;
     overflow: hidden;
 }
 

public/static/admin/css/themes/_dark.scss

@@ -0,0 +1,802 @@
+// 通常用于背景色
+$black-color :rgb(2, 17, 20);
+// 通常用于字体颜色
+$main-color :rgb(126, 252, 246);
+// 通常用于边框
+$less-main-color:rgb(6, 216, 215);
+
+$plus-main-color:rgb(0, 125, 124);
+
+// 通常用于激活状态,通常跟背景色搭配
+$cover-color :rgba(62, 251, 251, 0.05);
+// 更强的激活状态,适合做选项操作时使用
+$active-color :rgba(62, 251, 251, 0.5);
+
+
+$red-color :rgb(255, 0, 0);
+$yellow-color:rgb(255, 255, 153);
+$green-color :rgb(0, 255, 0);
+
+& {
+  background-color: $black-color;
+  color: $main-color;
+}
+
+.layuimini-main {
+  background-color: $black-color;
+}
+
+.layuimini-container {
+  background-color: $black-color;
+}
+
+.layuimini-container .layui-table-tool {
+  background-color: $black-color;
+}
+
+$box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
+
+.layui-btn {
+
+  &.layui-btn-lg {
+
+    padding-right: 25px;
+  }
+
+  clip-path : $box-shape;
+  padding-right : 10px;
+  position : relative;
+  background-color: transparent;
+  border : 1px solid;
+  color : rgb(126, 252, 246);
+  text-shadow : rgb(126, 252, 246) 0px 0px 1px;
+  background-color: rgb(126, 252, 246);
+
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    z-index: -1;
+    clip-path: $box-shape;
+    width: 100%;
+    height: 100%;
+    left: -0.5px;
+    top: -0.5px;
+    background-color: $black-color;
+  }
+
+  &:hover::after {
+    content: '';
+    display: block;
+    position: absolute;
+    z-index: -1;
+    clip-path: $box-shape;
+    width: 100%;
+    height: 100%;
+    left: -0.5px;
+    top: -0.5px;
+    background-color: rgba(126, 252, 246, 0.2);
+  }
+
+  &.layui-btn-disabled {
+    &::after {
+      // todo:实现按钮禁用样式
+    }
+  }
+
+  &.layui-btn-success {
+    text-shadow: rgb(0, 255, 0) 0px 0px 1px;
+    color: rgb(0, 255, 0);
+    background-color: rgba(0, 255, 0);
+    border: unset;
+
+    &:hover::after {
+      background-color: rgba(0, 255, 0, 0.2);
+    }
+  }
+
+  &.layui-btn-danger {
+    text-shadow: rgb(255, 0, 0) 0px 0px 1px;
+    color: rgb(255, 0, 0);
+    background-color: rgb(255, 0, 0);
+    border: unset;
+
+    &:hover::after {
+      background-color: rgba(255, 0, 0, 0.2);
+    }
+  }
+
+  &.layuimini-btn-primary {
+    text-shadow: rgb(255, 255, 153) 0px 0px 1px;
+    color: rgb(255, 255, 153);
+    background-color: rgb(255, 255, 153);
+    border: unset;
+
+    &:hover::after {
+      background-color: rgba(255, 255, 153, 0.2);
+    }
+
+  }
+
+  &.layui-btn-primary {
+    border: unset;
+  }
+
+  &.layui-btn-normal {
+    color: $black-color;
+    background-color: $main-color;
+    border: unset;
+
+    &::before {
+      background-color: $main-color;
+    }
+
+    &:hover::after {
+      background-color: $main-color;
+    }
+  }
+}
+
+.layui-table {
+  background: $black-color;
+  color: $main-color;
+
+
+  tr {
+    background-color: $cover-color;
+  }
+
+  td {
+    border-color: $less-main-color;
+  }
+
+}
+
+.layui-table-header {
+  background-color: $black-color;
+}
+
+.layuimini-container .layui-table-box {
+  border-color: $less-main-color;
+}
+
+.layuimini-container .layui-table-box .layui-table-header th {
+  color: $main-color !important;
+}
+
+.layui-table-tool .layui-inline[lay-event] {
+  color: $main-color;
+  border: none;
+  position: relative;
+
+  &::after {
+    border-color: $main-color;
+    border-width: 1px;
+    border-style: solid;
+    clip-path: $box-shape;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(100% - 1px);
+    height: calc(100% - 1px);
+    content: '';
+    display: block;
+  }
+}
+
+.layui-table tbody tr:hover {
+  background-color: rgba(126, 252, 246, 0.1);
+}
+
+.layuimini-main {
+  border-color: $less-main-color;
+}
+
+.layui-table-header {
+  border-color: $less-main-color;
+}
+
+
+
+.color-content>ul>li>a>div>span:nth-child(2) {
+  background-color: $black-color !important;
+}
+
+.layuimini-color .elem-content li {
+  clip-path: $box-shape;
+}
+
+.layuimini-color .elem-content li.layui-this {
+  background-color: $main-color;
+  color: $black-color !important;
+  border-color: $less-main-color;
+}
+
+.layuimini-color .more-menu-item {
+  color: $main-color;
+
+  &:hover {
+    background-color: rgba(62, 251, 251, 0.05);
+  }
+}
+
+.layui-layout-admin .layui-header {
+  background-color: $cover-color !important;
+}
+
+.layuimini-tab .layui-tab-title {
+  background-color: $cover-color !important;
+  border-color: $less-main-color;
+
+}
+
+.layuimini-tab .layui-tab-title span {
+  color: $active-color;
+}
+
+.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover,
+.layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
+  color: $black-color !important;
+}
+
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
+  color: $main-color !important;
+}
+
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item {
+  background-color: $active-color;
+
+}
+
+
+.layui-layout-admin .layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
+.layuimini-tool i:hover {
+  background-color: $main-color !important;
+}
+
+.layuimini-tab .layui-tab-control>li {
+  background-color: $black-color;
+  border-color: $less-main-color;
+}
+
+.layuimini-tab .layui-tab-title li {
+  border-color: $less-main-color;
+}
+
+.layui-flow-more a *,
+.layui-laypage input,
+.layui-table-view select[lay-ignore] {
+  border-color: $less-main-color;
+  background-color: $black-color;
+  color: $main-color;
+}
+
+.layui-laypage button,
+.layui-laypage input {
+  border-color: $less-main-color;
+  background-color: $black-color;
+  color: $main-color;
+
+}
+
+.layuimini-container .layui-form-switch {
+  border-color: $less-main-color !important;
+  background-color: $black-color !important;
+
+}
+
+.layuimini-container .layui-form-onswitch {
+  background-color: $main-color !important;
+}
+
+.layuimini-container .layui-form-switch.layui-form-onswitch i {
+  background-color: $black-color !important;
+}
+.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
+  background-color: $main-color !important;
+}
+
+.layui-laypage .layui-laypage-curr em {
+  color: $black-color !important;
+}
+
+.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
+  background-color: $less-main-color;
+
+}
+
+.layui-table-view .layui-form-checkbox.layui-form-checked[lay-skin="primary"] i {
+  border-color: $main-color;
+  background-color: $main-color;
+  color: $black-color;
+}
+
+.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
+  background-color: $cover-color;
+}
+
+.layui-table-init {
+  background-color: $black-color;
+}
+
+.box-border-line {
+  position: relative;
+  border: 1px solid $less-main-color;
+  border-width: 1px;
+  $border-offset: 3px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 50px;
+    height: 20px;
+    transition: all 0.2s;
+    border: 1px solid $less-main-color;
+    top: -$border-offset;
+    left: -$border-offset;
+    border-right: none;
+    border-bottom: none;
+    pointer-events: none;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 50px;
+    height: 20px;
+    transition: all 0.2s;
+    border: 1px solid $less-main-color;
+    bottom: -$border-offset;
+    right: -$border-offset;
+    border-left: none;
+    border-top: none;
+    pointer-events: none;
+  }
+
+  &:hover {
+
+    &::after,
+    &::before {
+      width: calc(100% + $border-offset);
+      height: calc(100% + $border-offset);
+    }
+  }
+}
+
+.table-search-fieldset {
+  .layui-input-inline {
+    margin-right: 0;
+  }
+
+
+
+  .layui-form-item:not(:last-child) {
+    margin-right: 10px;
+    @extend .box-border-line;
+  }
+
+  .layui-form-label {
+    border: unset;
+  }
+}
+
+.layui-form-pane .layui-form-label {
+  background-color: $cover-color;
+  color: $main-color;
+}
+
+.layuimini-container .table-search-fieldset {
+  color: $main-color;
+  border-color: $less-main-color;
+
+}
+
+.layui-form-select,
+.layui-form-autocomplete {
+  dl {
+
+    color: $main-color;
+    background-color: $black-color;
+    border-color: $less-main-color;
+
+    dd {
+      &.layui-this {
+        background-color: $main-color !important;
+        color: $black-color;
+      }
+
+      &:hover {
+        background-color: $less-main-color !important;
+        color: $black-color;
+      }
+    }
+  }
+}
+
+.layui-iconpicker-item,
+.layui-iconpicker-item:hover {
+  border-color: $less-main-color !important;
+  color: $black-color;
+
+  .layui-iconpicker-icon:hover {
+    border-color: $less-main-color !important;
+  }
+}
+
+
+.layui-nav-child {
+  background-color: $black-color;
+  color: $main-color;
+}
+
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
+  color: $main-color !important;
+}
+
+.layui-badge,
+.layui-badge-dot,
+.layui-badge-rim {
+  background-color: $main-color;
+}
+
+.layui-nav .layui-nav-child a:hover {
+  background-color: $active-color;
+}
+
+.layui-table-tool-panel {
+  background-color: $black-color;
+}
+
+.layui-form-checkbox[lay-skin="primary"] span {
+  color: $main-color;
+}
+
+.layui-table-tool-panel li:hover {
+  background-color: $active-color;
+}
+
+.layui-side.layui-bg-black,
+.layui-side.layui-bg-black>.layuimini-menu-left>ul,
+.layuimini-menu-left-zoom>ul {
+  background-color: $black-color !important;
+
+}
+
+.layui-side {
+  border-right: 1px solid $main-color;
+}
+
+.layui-bg-blue {
+  background-color: #0000ff !important;
+}
+
+.layui-bg-orange {
+  background-color: $yellow-color !important;
+  color: $black-color !important;
+}
+
+.layui-bg-green {
+  background-color: $green-color !important;
+  color: $black-color !important;
+}
+
+.layui-table-hover {
+  background-color: $cover-color;
+}
+
+.layui-table-grid-down {
+  background-color: $black-color;
+  color: $main-color;
+  border-color: unset;
+}
+
+.layui-table-tips-main {
+  background-color: $main-color;
+  color: $black-color;
+}
+
+.layui-layout-admin .layui-header .layuimini-tool i {
+  color: $main-color;
+}
+
+.color-red {
+  color: $red-color !important;
+}
+
+.layuimini-tab .layui-tab-title .layui-this span {
+  color: $main-color;
+}
+
+.layui-card {
+
+  background-color: $cover-color;
+  border-radius: 0;
+
+  @extend .box-border-line;
+
+  .layui-card-header {
+    color: $main-color;
+  }
+}
+
+.layui-text {
+  color: $main-color;
+}
+
+
+.layuimini-qiuck-module {
+  cursor: pointer;
+
+  a i {
+    background-color: $cover-color;
+    color: $active-color;
+  }
+
+  a cite {
+    color: $active-color;
+  }
+
+
+  &:hover {
+    a i {
+      background-color: $active-color;
+      color: $main-color;
+    }
+
+    a cite {
+      color: $main-color;
+    }
+
+  }
+}
+
+.layui-bg-number {
+  background-color: $cover-color;
+}
+
+.layui-input,
+.layui-select,
+.layui-textarea,
+.city-picker-span,
+.main-input {
+  background-color: $cover-color;
+  color: $main-color;
+}
+
+.city-picker-span>.title>span {
+  color: $main-color;
+
+  &:hover {
+    background-color: $main-color;
+    color: $black-color;
+  }
+}
+
+.layui-form-radio:hover *,
+.layui-form-radioed,
+.layui-form-radioed>i {
+  color: $main-color;
+}
+
+.layui-form-checked[lay-skin="primary"] i {
+  border-color: $main-color !important;
+  background-color: $main-color;
+  color: $black-color;
+}
+
+.layui-input:focus,
+.layui-textarea:focus {
+  border-color: $main-color !important;
+}
+
+.layui-input:hover,
+.layui-textarea:hover {
+  border-color: $main-color !important;
+
+}
+
+.layui-badge-rim,
+.layui-border,
+.layui-colla-content,
+.layui-colla-item,
+.layui-collapse,
+.layui-elem-field,
+.layui-form-pane .layui-form-item[pane],
+.layui-form-pane .layui-form-label,
+.layui-input,
+.layui-layedit,
+.layui-layedit-tool,
+.layui-panel,
+.layui-quote-nm,
+.layui-select,
+.layui-tab-bar,
+.layui-tab-card,
+.layui-tab-title,
+.layui-tab-title .layui-this::after,
+.layui-textarea {
+  border-color: $main-color !important;
+}
+
+.form-search .layui-input-inline input,
+.form-search .layui-input-inline select {
+  border-width: 0 0 0 1px;
+}
+
+.layuimini-tab .layui-tab-tool .layui-nav-child {
+  border-color: $main-color;
+}
+
+.layui-nav .layui-nav-child a {
+  color: $main-color;
+}
+
+.layui-form-item {
+  margin-bottom: 12px;
+}
+
+.layuimini-upload .layuimini-upload-btn {
+  background-color: $black-color;
+}
+
+.layui-layer {
+  border: 1px solid $main-color;
+  background-color: $black-color;
+}
+
+.layui-layer-easy .layui-layer-title {
+  background-color: $plus-main-color !important;
+  color: $main-color !important;
+}
+
+
+
+.layui-table td,
+.layui-table th,
+.layui-table-col-set,
+.layui-table-fixed-r,
+.layui-table-grid-down,
+.layui-table-header,
+.layui-table-page,
+.layui-table-tips-main,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-view,
+.layui-table[lay-skin="line"],
+.layui-table[lay-skin="row"] {
+  border-color: $less-main-color;
+}
+
+.layui-table tbody tr:hover,
+.layui-table thead tr,
+.layui-table-click,
+.layui-table-header,
+.layui-table-hover,
+.layui-table-mend,
+.layui-table-patch,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-total tr {
+  background-color: $black-color;
+}
+
+.hr-line {
+  color: $main-color;
+  border-color: $less-main-color;
+  background-color: $main-color;
+}
+
+.layui-layer-easy .layui-layer-btn {
+  background-color: $black-color;
+  border-top: 1px solid $less-main-color;
+}
+
+.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
+  background-color: $main-color;
+  border-color: $less-main-color;
+  color: $main-color !important;
+  clip-path: $box-shape;
+}
+
+.layui-layer-easy .layui-layer-btn a {
+  @extend .layui-btn
+}
+
+.layui-layer-shade {
+  background-color: #fff !important;
+}
+
+.layuimini-menu-left {
+  .layui-nav-tree .layui-nav-item {
+
+    margin: 5px;
+    width: calc(100% - 10px);
+  }
+
+  .layui-nav .layui-nav-item {
+    clip-path: $box-shape;
+    color: $main-color;
+    background-color: $active-color;
+
+    &.layui-this a {
+      background-color: $main-color !important;
+      color: $black-color !important;
+    }
+
+    &.layui-this {
+      background-color: $main-color !important;
+      color: $black-color !important;
+
+      span {
+        background-color: $main-color !important;
+        color: $black-color !important;
+
+      }
+    }
+  }
+
+  .layui-nav .layui-nav-item a:hover {
+    background-color: $active-color !important;
+  }
+
+}
+
+.layuimini-menu-left .layui-nav .layui-nav-item a,
+.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
+  color: $main-color !important;
+}
+
+.layuimini-menu-left .layui-nav-item a span {
+  color: $main-color !important;
+
+}
+
+.layuimini-menu-left .layui-nav-item:hover a span {
+  color: $black-color !important;
+
+}
+
+.layui-layout-admin .layuimini-logo {
+  background-color: $black-color !important;
+
+}
+
+.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
+  background-color: $black-color !important;
+}
+
+.layuimini-menu-left .layui-nav-tree .layui-this,
+.layuimini-menu-left .layui-nav-tree .layui-this>a,
+.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
+.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
+  background-color: $main-color !important;
+  color: $black-color !important;
+
+  .layui-left-nav {
+    color: $black-color !important;
+  }
+}
+
+
+.layui-iconpicker-icon {
+  border-color: $less-main-color !important;
+  background-color: $less-main-color !important;
+}
+
+.layui-iconpicker .layui-anim {
+  background-color: $black-color;
+}
+
+.layui-iconpicker .layui-iconpicker-list {
+  background-color: $black-color;
+}
+
+.layui-header .layui-nav .layui-nav-child dd.layui-this a,
+.layui-header .layui-nav-child dd.layui-this,
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
+  background-color: $active-color !important;
+}

public/static/admin/css/themes/_demo.scss

@@ -0,0 +1,81 @@
+.layui-btn {
+    color           : #808185 !important;
+    background-color: #cde7ff !important;
+    border          : 1px solid #d3dde6 !important;
+}
+
+.layui-layer-easy .layui-layer-title {
+    background-color: rgb(215, 215, 215) !important;
+    color           : #6C6E71 !important;
+}
+
+.layui-layer-easy .layui-layer-setwin>a::after {
+    color: #6C6E71 !important;
+}
+
+.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
+    color           : #808185 !important;
+    background-color: #cde7ff !important;
+    border          : 1px solid #d3dde6 !important;
+}
+
+.layuimini-tab .layui-tab-title .layuimini-tab-active {
+    display: none !important;
+}
+
+.layuimini-tab .layui-tab-title li {
+    padding     : 0 5px !important;
+    font-size   : 12px;
+    border-width: 1px 1px 1px 0 !important;
+    border-style: solid !important;
+
+}
+
+.layuimini-tab .layui-tab-title li.layui-this {
+    color       : #fff !important;
+    border-color: rgba(0, 0, 255, 1) !important;
+    background  : rgba(90, 173, 255, 1) !important;
+}
+
+.layuimini-tab .layui-tab-title .layui-this span {
+    color: #fff !important;
+}
+
+.layuimini-tab>.layui-tab-title li,
+.layuimini-tab>.close-box li {
+    line-height: 27px !important;
+}
+
+.layuimini-tab>.layui-tab-title,
+.layuimini-tab>.close-box {
+    height: 28px !important;
+}
+
+.layuimini-tab .layui-tab-control>li {
+    height     : 28px !important;
+    line-height: 28px !important;
+}
+
+.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
+    background-color: #6C6E71 !important;
+}
+
+.layuimini-container .layui-form-onswitch {
+    background-color: #cde7ff !important;
+    border-color    : #cde7ff !important;
+}
+
+.layuimini-container .layui-form-switch {
+
+    background-color: #6C6E71;
+    border-color    : #6C6E71;
+}
+
+.layui-table-tool .layui-inline[lay-event] {
+    border-color: transparent;
+}
+
+.layui-form-checked[lay-skin="primary"] i {
+    border-color    : #cde7ff !important;
+    background-color: #cde7ff !important;
+}

public/static/admin/css/themes/_gtk.scss

@@ -0,0 +1,708 @@
+& {
+    background-color: #f6f5f4;
+    color           : #2e3436;
+}
+
+.layuimini-container {}
+
+.layuimini-main {
+    padding: 0;
+}
+
+.layuimini-container .layui-table-box .layui-table-header th {
+    color        : #979a9b !important;
+    font-weight  : 700 !important;
+    font-weight  : bold;
+    text-shadow  : none;
+    border-color : #d7d2ce;
+    border-bottom: 1px solid;
+
+    &:not(:last-child) {
+
+        border-right: 1px solid #d7d2ce;
+    }
+}
+
+.layui-table-view .layui-table td {
+
+    border-bottom: unset;
+
+    &:not(:last-child) {
+        border-right: 1px solid #d7d2ce;
+
+    }
+}
+
+.layui-table {
+    color     : #2e3436;
+    background: #f6f5f4;
+}
+
+.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
+    line-height: 30px;
+}
+
+.layui-table tbody tr:hover,
+.layui-table thead tr,
+.layui-table-click,
+.layui-table-header,
+.layui-table-hover,
+.layui-table-mend,
+.layui-table-patch,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-total tr {
+    background-color: unset;
+}
+
+.layui-table-cell {
+    padding: 0 4px;
+}
+
+.layui-table img {
+    height: 25px !important;
+    width : auto !important;
+}
+
+.layui-btn {
+    position           : relative;
+    outline            : none;
+    overflow           : visible;
+    line-height        : 28px;
+    border-radius      : 5px;
+    transition         : all .15s cubic-bezier(.25, .46, .45, .94);
+    padding            : 4px 9px;
+    user-select        : none;
+    color              : #2e3436;
+    outline-color      : rgba(53, 132, 228, .5);
+    border             : 1px solid #cdc7c2;
+    border-bottom-color: rgb(205, 199, 194);
+    border-bottom-color: #bfb8b1;
+    background-color   : #f6f5f4;
+    box-shadow         : inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .07);
+
+    &::before {
+        content       : ' ';
+        position      : absolute;
+        pointer-events: none;
+        width         : 100%;
+        height        : 100%;
+        top           : 0px;
+        left          : 0px;
+        background    : linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
+        transition    : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+
+    &::after {
+        content       : '';
+        position      : absolute;
+        pointer-events: none;
+        z-index       : 2;
+        display       : inline-block;
+        border        : 2px solid transparent;
+        border-radius : inherit;
+        transition    : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        top           : -4px;
+        left          : -4px;
+        width         : calc(100% - -4px);
+        height        : calc(100% - -4px);
+    }
+
+    &.layui-btn-normal {
+        color           : #fff;
+        border-color    : #1b6acb #1b6acb #15539e;
+        background-color: #3c88e5;
+        box-shadow      : inset 0 1px #3181e3, 0 1px 2px rgba(0, 0, 0, .07);
+    }
+
+    &.layui-btn-danger {
+        color           : #fff;
+        border-color    : #b2161d #b2161d #851015;
+        background-color: #e41f28;
+        box-shadow      : inset 0 1px #db1a23, 0 1px 2px rgba(0, 0, 0, .07);
+    }
+
+    &.layui-btn-sm {
+        line-height: 20px;
+    }
+
+    &.layui-btn-xs {
+        line-height: 12px
+    }
+}
+
+.layuimini-container .layui-table-tool .layui-inline[lay-event] {
+    @extend .layui-btn;
+
+    line-height  : 32px;
+    min-width    : 32px;
+    min-height   : 32px;
+    padding      : 0;
+    border-radius: 9999px;
+}
+
+.layui-laydate .layui-this {
+    background-color: #3584e4 !important;
+
+}
+
+.layui-laydate-content td,
+.layui-laydate-content th {
+
+    width        : 36px;
+    height       : 36px;
+    border-radius: 100%;
+}
+
+.laydate-footer-btns span {
+    @extend .layui-btn;
+
+    line-height: 16px;
+
+    &:not(:last-child) {
+        border-right-style        : none;
+        border-top-right-radius   : 0;
+        border-bottom-right-radius: 0;
+    }
+
+    &:not(:first-child) {
+        border-top-left-radius   : 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.layui-laydate-footer span {
+    @extend .layui-btn;
+    line-height: 16px;
+}
+
+.layui-laydate-footer span.layui-laydate-preview {
+    line-height: 22px;
+}
+
+.layui-form-checked[lay-skin="primary"] i {
+    border-color    : #185fb4 !important;
+    background-color: #5094e8;
+    background-image: linear-gradient(0deg, #3987e5, #5094e8);
+}
+
+.layui-form-checkbox[lay-skin="primary"]:hover i {
+    border-color    : #185fb4;
+    background-image: linear-gradient(0deg, #5094e8, #6ba5eb);
+}
+
+.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
+    border-radius: 3px;
+}
+
+.layui-table-view .layui-form-checkbox i {
+    font-weight: bold;
+}
+
+.layui-layer-title {
+    padding                : 0 6px;
+    min-height             : 46px;
+    border                 : 1px solid #bfb8b1;
+    border-top-left-radius : 8px;
+    border-top-right-radius: 8px;
+    background             : #f1f0ee linear-gradient(0deg, #dfdcd8, #f4f2f1) !important;
+    color                  : #2e3436 !important;
+    padding-left           : 12px;
+    padding-right          : 12px;
+    font-weight            : bold;
+}
+
+.layui-layer {
+    background-color: #f6f5f4;
+}
+
+.layui-layer-easy .layui-layer-title~.layui-layer-setwin>a {
+    position     : relative;
+    outline      : none;
+    overflow     : visible;
+    border-radius: 5px;
+    transition   : all .15s cubic-bezier(.25, .46, .45, .94);
+    user-select  : none;
+
+    outline-color      : rgba(53, 132, 228, .5);
+    border             : 1px solid #cdc7c2;
+    border-bottom-color: rgb(205, 199, 194);
+    border-bottom-color: #bfb8b1;
+    background-color   : #f6f5f4;
+    box-shadow         : inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .07);
+    height             : 20px;
+    line-height        : 20px;
+    width              : 20px;
+    text-align         : center;
+    display            : inline-flex;
+    align-items        : center;
+    justify-content    : center;
+
+    &::after {
+        color: #2e3436 !important;
+    }
+}
+
+.layui-layer-setwin {
+    display    : flex;
+    align-items: center;
+}
+
+.layuimini-container .layui-form-switch.layui-form-onswitch {
+    color           : #ffffff;
+    border-color    : #185fb4;
+    background-color: #3584e4;
+    text-shadow     : 0 1px rgba(53, 132, 228, 0.5), 0 0 2px rgba(255, 255, 255, 0.6);
+}
+
+.layuimini-container .layui-form-switch {
+
+    border          : 1px solid #cdc7c2;
+    border-radius   : 20px;
+    color           : rgba(46, 52, 54, 0.2);
+    background-color: #e1dedb;
+    text-shadow     : 0 1px rgba(0, 0, 0, 0.1);
+    transition      : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.layui-form-switch {
+    height: 20px;
+    width : 40px;
+}
+
+.layui-form-switch {
+
+    padding    : 0;
+    line-height: 20px;
+}
+
+.layui-form-switch.layui-form-onswitch i {
+    top        : 0;
+    height     : 20px;
+    width      : 20px;
+    margin-left: -20px;
+
+
+}
+
+.layui-form-switch i {
+    top                : 0;
+    height             : 20px;
+    width              : 20px;
+    margin-left        : -5px;
+    border-radius      : 50%;
+    transition         : all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    color              : #2e3436;
+    outline-color      : rgba(53, 132, 228, 0.5);
+    border-color       : #cdc7c2;
+    border-bottom-color: #bfb8b1;
+    background-color   : #f6f5f4;
+    box-shadow         : inset 0 1px white, 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.07);
+}
+
+.layuimini-main {
+    background-color: unset;
+}
+
+.layui-tab-title li {
+    transition         : none;
+    padding            : 3px 12px;
+    min-height         : 30px;
+    min-width          : 65px;
+    display            : flex;
+    justify-content    : center;
+    align-items        : center;
+    white-space        : nowrap;
+    color              : #2e3436;
+    font-weight        : normal;
+    user-select        : none;
+    border             : 0;
+    border-top-style   : none;
+    border-right-style : none;
+    border-bottom-style: none;
+    border-left-style  : none;
+
+
+
+    &:hover {
+        box-shadow      : inset 0 -3px #c8c2bc;
+        background-color: #edebe9;
+    }
+
+    &.layui-this {
+        box-shadow      : inset 0 -3px #3584e4;
+        background-color: #f1f0ee;
+    }
+}
+
+.layui-tab-title {
+    display       : flex;
+    align-items   : center;
+    flex-direction: row;
+    padding-left  : 4px;
+    padding-right : 4px;
+}
+
+.layuimini-tab>.layui-tab-title li,
+.layuimini-tab>.close-box li {
+    line-height: 20px !important;
+}
+
+.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
+    display: none;
+}
+
+.layuimini-tab .layui-tab-title .layui-this span {
+    color: #2e3436 !important
+}
+
+.layuimini-tab .layui-tab-title span {
+    color: #2e3436 !important
+}
+
+.layuimini-tab .layui-tab-title .layuimini-tab-active {
+    display: none;
+}
+
+.layuimini-tab .layui-tab-title {
+    background-color: #e1dedb;
+    border-color    : #cdc7c2;
+}
+
+.layui-layer-easy .layui-layer-btn {
+    background-color: #f2f2f2;
+}
+
+.layui-layer-dialog .layui-layer-content {
+    background-color: #f2f2f2;
+
+}
+
+.layui-layer-easy .layui-layer-btn a {
+    position           : relative;
+    outline            : none;
+    overflow           : visible;
+    line-height        : 22px;
+    height             : 22px;
+    border-radius      : 5px;
+    transition         : all .15s cubic-bezier(.25, .46, .45, .94);
+    padding            : 4px 9px;
+    user-select        : none;
+    color              : #2e3436 !important;
+    outline-color      : rgba(53, 132, 228, .5);
+    border             : 1px solid #cdc7c2;
+    border-bottom-color: rgb(205, 199, 194);
+    border-bottom-color: #bfb8b1;
+    background-color   : #f6f5f4;
+    box-shadow         : inset 0 1px #fff, 0 1px 2px rgba(0, 0, 0, .07);
+
+    &::before {
+        content       : ' ';
+        position      : absolute;
+        pointer-events: none;
+        width         : 100%;
+        height        : 100%;
+        top           : 0px;
+        left          : 0px;
+        background    : linear-gradient(to top, rgba(0, 0, 0, 0.03), transparent);
+        transition    : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+
+    &::after {
+        content       : '';
+        position      : absolute;
+        pointer-events: none;
+        z-index       : 2;
+        display       : inline-block;
+        border        : 2px solid transparent;
+        border-radius : inherit;
+        transition    : all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        top           : -4px;
+        left          : -4px;
+        width         : calc(100% - -4px);
+        height        : calc(100% - -4px);
+    }
+
+
+    &.layui-layer-btn0 {
+        color           : #fff !important;
+        border-color    : #1b6acb #1b6acb #15539e;
+        background-color: #3c88e5;
+        box-shadow      : inset 0 1px #3181e3, 0 1px 2px rgba(0, 0, 0, .07);
+    }
+}
+
+.layui-tab-brief {
+
+    &>.layui-tab-title {
+
+        li {
+            @extend .layui-btn;
+
+
+            &:not(:last-child) {
+                border-right-style        : none;
+                border-top-right-radius   : 0;
+                border-bottom-right-radius: 0;
+            }
+
+            &:not(:first-child) {
+                border-top-left-radius   : 0;
+                border-bottom-left-radius: 0;
+            }
+
+            &.layui-this {
+                color           : unset;
+                color           : #2e3436;
+                border-color    : #cdc7c2;
+                background-color: #d6d1cd;
+                box-shadow      : inset 0 1px rgba(255, 255, 255, 0);
+
+                &::after {
+                    display: none;
+                }
+            }
+
+            &:hover {
+                box-shadow      : unset;
+                background-color: #edebe9;
+            }
+        }
+
+    }
+
+}
+
+.layui-form-radio:hover *,
+.layui-form-radioed,
+.layui-form-radioed>i {
+    color: #5094e8;
+}
+
+.layui-card {
+    .layui-card-header {
+        padding                : 0 6px;
+        min-height             : 46px;
+        border-width           : 1px;
+        border-style           : solid;
+        border-color           : #bfb8b1;
+        border-top-left-radius : 8px;
+        border-top-right-radius: 8px;
+        background             : #f1f0ee linear-gradient(to top, #dfdcd8, #f4f2f1);
+        box-shadow             : inset 0 1px rgba(255, 255, 255, 0.8), inset 0 -2px 2px rgba(0, 0, 0, 0.02);
+
+        .icon {
+            color: #979a9b !important;
+        }
+    }
+
+    .layui-card-body {
+        background-color: #f6f5f4;
+        border          : 1px solid #cdc7c2;
+    }
+}
+
+.layui-btn,
+.layui-input,
+.layui-select,
+.layui-textarea,
+.layui-upload-button,
+.city-picker-span {
+    border-radius: 5px;
+    border       : 1px solid #cdc7c2;
+}
+
+.layui-side.layui-bg-black,
+.layui-side.layui-bg-black>.layuimini-menu-left>ul,
+.layuimini-menu-left-zoom>ul {
+    background-color: #f6f5f4 !important;
+}
+
+.layuimini-menu-left {
+    background-color: #fbfafa;
+    border-right    : 1px solid #cdc7c2;
+
+    .layui-nav {
+
+        li {
+            &:not(:first-child) {
+                border-top: 1px solid #cdc7c2;
+            }
+
+
+            &.layui-this {
+                a {
+                    background-color: #347cd3 !important;
+                    color           : #fff !important;
+                }
+            }
+        }
+    }
+}
+
+
+.layuimini-menu-left .layui-nav .layui-this a,
+
+.layuimini-menu-left-zoom.layui-nav .layui-this a {
+    color: #2e3436 !important;
+}
+
+
+.layuimini-menu-left .layui-nav .layui-nav-item.layui-this a:hover,
+.layuimini-menu-left-zoom.layui-nav .layui-nav-item.layui-this a:hover {
+    color: #fff !important;
+}
+
+.layuimini-menu-left .layui-nav .layui-nav-item a,
+.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
+    color: #2e3436 !important;
+
+    &:hover {
+        color: #2e3436 !important;
+    }
+
+}
+
+.layuimini-menu-left .layui-nav .layui-nav-item a {
+    height     : 30px;
+    line-height: 30px;
+}
+
+.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
+    background-color: rgba(46, 52, 54, 0.05) !important;
+    border-top      : 1px solid #d7d2ce;
+
+    dd {
+        border-bottom: 1px solid #d7d2ce;
+    }
+}
+
+.layuimini-menu-left .layui-nav-tree .layui-this,
+.layuimini-menu-left .layui-nav-tree .layui-this>a,
+.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
+.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
+    background-color: #347cd3 !important;
+    color           : #fff !important;
+}
+
+.layui-layout-admin .layuimini-logo {
+    background-color: unset !important;
+}
+
+
+.layuimini-header-menu>li.layui-nav-item {
+    @extend .layui-btn;
+    margin-top : 10px;
+    height     : 30px !important;
+    line-height: 30px !important;
+
+
+    &::after {
+        background-color: transparent;
+    }
+
+    &:not(:last-child) {
+        border-right-style        : none;
+        border-top-right-radius   : 0;
+        border-bottom-right-radius: 0;
+    }
+
+    &:not(:first-child) {
+        border-top-left-radius   : 0;
+        border-bottom-left-radius: 0;
+    }
+
+    &:nth-last-child(2) {
+        border-right-style       : solid;
+        border-radius            : 5px;
+        border-top-left-radius   : 0;
+        border-bottom-left-radius: 0;
+    }
+}
+
+.layui-layout-admin .layui-header {
+    background-color: #f6f5f4 !important;
+}
+
+.layui-layer-dialog {
+    border-radius: 20px;
+}
+
+.layui-layer-iframe {
+    border-radius: 20px;
+}
+
+.layuimini-tab .layui-tab-control>li {
+    background-color: #e1dedb;
+    border-style    : solid;
+    border-color    : #cdc7c2;
+}
+
+.form-search .layui-btn {
+    height     : 32px;
+    line-height: 22px;
+}
+
+.form-search .layui-form-select dl {
+    transition             : all 80ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    background-color       : #ffffff;
+    background-clip        : padding-box;
+    border                 : 1px solid rgba(0, 0, 0, 0.23);
+    border-top-left-radius : 0;
+    border-top-right-radius: 0;
+    border-radius          : 9px;
+    border-top-left-radius : 0px;
+    border-top-right-radius: 0px;
+    box-shadow             : 0 1px 3px 2px rgba(0, 0, 0, 0.08);
+    top                    : 28px;
+}
+
+.layui-form-select dl dd,
+.layui-form-select dl dt {
+    height     : 30px;
+    line-height: 30px;
+    padding    : 0 10px;
+}
+
+.layuimini-container .layui-form-select dl dd.layui-this {
+    background-color: #3c88e5 !important;
+}
+
+.layui-table-header .layui-table {
+    margin-bottom: 0;
+}
+
+.layui-header .layui-nav .layui-nav-child dd.layui-this a,
+.layui-header .layui-nav-child dd.layui-this,
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
+    background-color: #3c88e5 !important;
+}
+
+.layuimini-mobile-show {
+    .layui-nav-more {
+        top: 4px;
+    }
+}
+
+
+.layui-layer-easy .layui-layer-setwin>span {
+    color: #2e3436;
+}
+
+.layui-layer-easy .layui-layer-setwin>span:after {
+
+    color: #2e3436;
+}
+
+.layui-layer-easy .layui-layer-setwin .layui-layer-max::after,
+.layui-layer-easy .layui-layer-setwin .layui-layer-max::before {
+    border-color: #2e3436;
+}
+
+.layui-layer-easy .layui-layer-setwin .layui-layer-min::before {
+    background-color: #2e3436;
+}

public/static/admin/css/themes/_neomorphic.scss

@@ -0,0 +1,284 @@
+$main-color:#61677C;
+
+& {
+    background-color: #EBECF0;
+}
+
+.layui-layout-admin .layui-header {
+    background-color: #EBECF0 !important;
+
+}
+
+.layuimini-container .layui-btn-success {
+
+    color: #4bb368;
+}
+
+.layuimini-container .layui-btn-danger {
+    color: #f56c6c;
+}
+
+.layuimini-container .layuimini-btn-primary {
+    color: #2c3e50;
+}
+
+.layuimini-container .layui-btn-primary {
+    color: #5f5f5f;
+}
+
+.layuimini-container .layui-btn-normal {
+    color: #1e9fff;
+}
+
+.layui-btn {
+    border: 0;
+    outline: 0;
+    border-radius: 10px;
+    background-color: #EBECF0;
+    text-shadow: 1px 1px 0 #FFF;
+    color: $main-color;
+    box-shadow: -5px -5px 20px #FFF, 5px 5px 20px #BABECC;
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+    font-weight: 600;
+
+    &:hover {
+        box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
+    }
+}
+
+
+.layui-table-tool .layui-inline[lay-event] {
+    @extend .layui-btn;
+}
+
+.layuimini-main {
+    @extend .layui-btn;
+    text-shadow: 0.5px 0.5px 0 #fff;
+}
+
+.layui-layer {
+    @extend .layui-btn;
+}
+
+.layui-layer-easy .layui-layer-title {
+    background-color: transparent !important;
+    color: $main-color !important;
+}
+
+.layui-layer-easy .layui-layer-setwin>span {
+    color: $main-color !important;
+
+    &::before {
+        border-color: $main-color !important;
+    }
+
+    &::after {
+        border-color: $main-color !important;
+    }
+
+}
+
+.layui-layer-easy .layui-layer-setwin .layui-layer-min::before {
+    background-color: $main-color !important;
+}
+
+.layui-card {
+    @extend .layui-btn;
+    text-shadow: 0.5px 0.5px 0 #fff;
+}
+
+.layuimini-container .layui-table-tool {
+    background-color: transparent;
+}
+
+.layui-table {
+    background-color: #EBECF0;
+}
+
+.panel {
+    @extend .layui-btn;
+    text-shadow: 0.5px 0.5px 0 #fff;
+}
+
+.layuimini-qiuck-module {
+    @extend .layui-btn;
+
+    i {
+        background-color: transparent
+    }
+}
+
+.layui-side.layui-bg-black,
+.layui-side.layui-bg-black>.layuimini-menu-left>ul,
+.layuimini-menu-left-zoom>ul {
+    @extend .layui-btn;
+    background-color: #EBECF0 !important;
+    border-radius: 0;
+}
+
+
+.layuimini-menu-left .layui-nav .layui-nav-item a,
+.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
+    @extend .layui-btn;
+
+    &:hover {
+        box-shadow: -2px -2px 5px #FFF, 2px 2px 5px #BABECC;
+    }
+}
+
+.layui-nav-tree .layui-nav-item {
+    margin: 10px;
+    width: calc(100% - 20px);
+}
+
+.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
+    background-color: transparent !important;
+}
+
+.layui-nav-tree .layui-nav-child dd {
+    margin: 10px;
+    width: calc(100% - 20px);
+}
+
+.layuimini-menu-left .layui-nav-tree .layui-this,
+.layuimini-menu-left .layui-nav-tree .layui-this>a,
+.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
+.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
+    background-color: inherit !important;
+}
+
+.layuimini-menu-left .layui-nav .layui-nav-item a:hover,
+.layuimini-menu-left .layui-nav .layui-this a,
+.layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover,
+.layuimini-menu-left-zoom.layui-nav .layui-this a {
+    color: $main-color !important;
+}
+
+.layui-layout-admin .layuimini-logo {
+    background-color: transparent !important;
+}
+
+.layui-header {
+    .layuimini-header-menu>.layui-nav-item {
+        @extend .layui-btn;
+        margin: 10px;
+        line-height: 40px !important;
+        height: 40px !important;
+    }
+
+    .layui-nav .layui-nav-item {
+        @extend .layui-btn;
+        margin: 10px;
+        line-height: 40px !important;
+        height: 40px !important;
+    }
+}
+
+
+.layui-btn-xs {
+    padding: 0 9px;
+}
+
+.layui-input,
+.layui-textarea {
+    border: 0;
+    outline: 0;
+    font-size: 16px;
+    border-radius: 320px;
+    padding: 16px;
+    background-color: #EBECF0;
+    text-shadow: 1px 1px 0 #FFF;
+    margin-right: 8px;
+    box-shadow: inset 2px 2px 5px #BABECC, inset -5px -5px 10px #FFF;
+    width: 100%;
+    box-sizing: border-box;
+    transition: all 0.2s ease-in-out;
+    appearance: none;
+    -webkit-appearance: none;
+}
+
+.layuimini-upload .layuimini-upload-btn {
+    background-color: transparent !important;
+}
+
+.layui-form-pane .layui-form-label {
+    background-color: transparent;
+    text-align: right;
+}
+
+.layuimini-container .layui-form-select dl dd.layui-this {
+    background-color: transparent !important;
+    color: #2c3e50
+}
+
+.layuimini-color .elem-content li.layui-this {
+    text-shadow: 0.5px 0.5px 0 #FFF;
+}
+
+.layui-form-select dl {
+    @extend .layui-btn;
+}
+
+.layui-form-checkbox {
+
+    @extend .layui-btn;
+    padding: 10px 10px 10px 24px;
+}
+
+.layui-form-checkbox>i {
+    left: 6px;
+    top: 10px;
+    text-shadow: 0.5px 0.5px 0 #fff;
+}
+
+.layui-form-checked:hover>div,
+.layui-form-checked>div {
+
+    color: #16b777;
+}
+
+.layui-tree,
+.laytable-cell-checkbox {
+
+    .layui-form-checkbox[lay-skin="primary"] {
+        padding: 13px;
+    }
+
+    .layui-form-checkbox[lay-skin="primary"]>i {
+        left: 5px;
+        top: 5px
+    }
+}
+
+.layui-tree-txt {
+    margin-left: 10px
+}
+
+.layui-form-radio {
+    @extend .layui-btn;
+
+}
+
+.layui-form-radio:hover>*,
+.layui-form-radioed,
+.layui-form-radioed>i {
+    color: #16b777;
+}
+
+.layui-table-tips-c {
+    text-shadow: 0.5px 0.5px 0 #fff;
+
+}
+
+.layuimini-tab .layui-tab-title {
+    background-color: #EBECF0;
+}
+
+.layuimini-tab .layui-tab-control>li {
+    background-color: #EBECF0;
+}

public/static/admin/css/themes/_nes.scss

@@ -0,0 +1,344 @@
+a,
+button {
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer
+}
+
+& {
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABFklEQVRYR9WXURLDIAhE6/0PbSdOtUpcd1Gnpv1KGpTHBpCE1/cXq+vrMph7dGvXZTtpfW10DCA5jrH1H0Jhs5E0hnZdCR+vb5S8Nn8mQCeS9BdSalYJqMBjAGzq59xAESN7VFVUgV8AZB/dZBR7QTFDCqGquvUBVVoEtgIwpQRzmANSFHgWQKExHdIrPeuMvQNDarXe6nC/AutgV3JW+6bgqQLeV8FekRtgV+ToDKEKnACYKsfZjjkam7a0ZpYTytwmgainpC3HvwBocgKOxqRjehoR9DFKNFYtOwCGYCszobeCbl26N6yyQ6g8X/Wex/rBPsNEV6qAMaJPMynIHQCoSqS9JSMmwef51LflTgCRszU7DvAGiV6mHWfsaVUAAAAASUVORK5CYII=), auto;
+    font-family: "ark-pixel";
+}
+
+$border-line-width:3px;
+
+.public-border {
+    border-style: solid;
+    border-width: $border-line-width;
+    border-image-slice: 2;
+    border-image-width: 2;
+    border-image-repeat: stretch;
+    border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
+    border-image-outset: 2;
+}
+
+
+
+.layui-btn {
+
+    @extend .public-border;
+    line-height: 32px;
+
+    position: relative;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    color: #212529;
+    background-color: #fff;
+    border-image-repeat: stretch;
+
+    &::after {
+        position: absolute;
+        top: -$border-line-width;
+        right: -$border-line-width;
+        bottom: -$border-line-width;
+        left: -$border-line-width;
+        content: "";
+        box-shadow: inset (-$border-line-width) (-$border-line-width) #adafbc;
+    }
+
+    &:hover {
+        color: #212529;
+        text-decoration: none;
+        background-color: #e7e7e7;
+    }
+
+    &.layui-btn-sm {
+        line-height: 100%;
+    }
+
+    &.layui-btn-xs {
+        line-height: 16px;
+    }
+
+    &.layui-btn-normal {
+        color: #fff;
+        background-color: #209cee;
+
+        &::after {
+            box-shadow: inset (-$border-line-width) (-$border-line-width) #006bb3;
+        }
+
+        &:hover {
+            background-color: #108de0;
+        }
+    }
+
+    &.layui-btn-success {
+        color: #fff;
+        background-color: #92cc41;
+
+        &::after {
+            box-shadow: inset (-$border-line-width) (-$border-line-width) #4aa52e;
+        }
+
+        &:hover {
+            background-color: #92cc41;
+        }
+    }
+
+    &.layui-btn-danger {
+        color: #fff;
+        background-color: #e76e55;
+
+        &::after {
+            box-shadow: inset (-$border-line-width) (-$border-line-width) #8c2022;
+        }
+
+        &:hover {
+            background-color: #ce372b;
+        }
+    }
+
+    &.layui-btn-warm {
+        color: #212529;
+        background-color: #f7d51d;
+
+        &::after {
+            box-shadow: inset (-$border-line-width) (-$border-line-width) #e59400;
+        }
+
+        &:hover {
+            color: #212529;
+            background-color: #f2c409;
+        }
+    }
+}
+
+.form-search .layui-btn {
+    line-height: 16px;
+    font-size: 14px;
+}
+
+
+.layuimini-container .layui-table-tool .layui-inline[lay-event] {
+    @extend .layui-btn;
+    line-height: 24px;
+}
+
+.layui-table img {
+    image-rendering: pixelated;
+}
+
+.layui-form-checkbox[lay-skin="primary"] i {
+    @extend .public-border;
+    position: relative;
+}
+
+.layui-form-checked[lay-skin="primary"] i {
+    background-color: unset;
+    color: #212529;
+    font-weight: bold;
+    font-size: 28px;
+}
+
+.layui-btn {
+    font-size: 18px;
+}
+
+.layui-btn-sm {
+    font-size: 16px;
+}
+
+.layui-btn-xs {
+    font-size: 14px;
+}
+
+.layui-nav * {
+    font-size: 16px;
+
+}
+
+.layui-tab-title li {
+    font-size: 18px;
+}
+
+.layui-nav-tree .layui-nav-item {
+    border-bottom: 3px solid #212529;
+}
+
+.layuimini-header-menu>.layui-nav-item {
+
+    @extend .public-border;
+
+    border-image-outset: 0;
+}
+
+.layui-table td,
+.layui-table th {
+    font-size: 16px;
+    border-width: 0 2px 2px 0;
+    border-style: solid;
+    border-color: #212529
+}
+
+.layui-input,
+.layui-select,
+.layui-textarea {
+    @extend .public-border;
+}
+
+.layui-form-label {
+    background-color: unset;
+    border: unset;
+    text-align: right;
+    color: #212529;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.layuimini-form>.layui-form-item>.layui-input-block tip,
+.layuimini-form>.layui-form-item>.layui-inline tip {
+    font-size: 14px;
+}
+
+.layui-layer-easy .layui-layer-title {
+    background: unset !important;
+    color: #212529 !important;
+    font-size: 16px;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.layui-layer-easy .layui-layer-btn {
+    background: unset !important;
+}
+
+.layui-layer-easy .layui-layer-btn a {
+    @extend .layui-btn;
+    color: #212529 !important;
+
+    &.layui-layer-btn0 {
+        color: #fff !important;
+        background-color: #209cee;
+
+        &::after {
+            box-shadow: inset (-$border-line-width) (-$border-line-width) #006bb3;
+        }
+
+        &:hover {
+            background-color: #108de0;
+        }
+    }
+}
+
+
+.layui-layer-dialog .layui-layer-content {
+    font-size: 16px;
+}
+
+.layui-layer-easy .layui-layer-setwin>span {
+    color: #212529;
+}
+
+.layui-layer-easy .layui-layer-setwin>span:after {
+
+    color: #212529;
+}
+
+.layui-layer-easy .layui-layer-setwin .layui-layer-max::after,
+.layui-layer-easy .layui-layer-setwin .layui-layer-max::before {
+    border-color: #212529;
+}
+
+.layui-layer-easy .layui-layer-setwin .layui-layer-min::before {
+    background-color: #212529;
+}
+
+
+.layui-layer {
+    @extend .public-border;
+
+}
+
+.layui-card {
+    @extend .public-border;
+
+    .layui-card-header {
+        font-size: 18px;
+    }
+
+}
+
+.layuimini-main {
+    @extend .public-border;
+}
+
+.layui-table-box {
+    @extend .public-border;
+    border-image-outset: 1;
+    margin-top: 5px;
+}
+
+.layuimini-container .layui-table-box .layui-table-header th {
+
+    color: #212529 !important;
+}
+
+.layui-table tbody tr:hover,
+.layui-table thead tr,
+.layui-table-click,
+.layui-table-header,
+.layui-table-hover,
+.layui-table-mend,
+.layui-table-patch,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-total tr {
+    background-color: unset;
+}
+
+.layui-table-header .layui-table {
+    margin-bottom: 0;
+}
+
+.layui-badge,
+.layui-badge-rim {
+    position: relative;
+    border-radius: 0;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        pointer-events: none;
+        box-shadow: 0 4px #209cee, 0 -4px #209cee, 4px 0 #209cee, -4px 0 #209cee;
+    }
+
+    &.layui-bg-blue {
+        background-color: #209cee;
+
+        &::after {
+            box-shadow: 0 4px #209cee, 0 -4px #209cee, 4px 0 #209cee, -4px 0 #209cee;
+
+        }
+    }
+
+    &.layui-bg-gray {
+        background-color: #92cc41;
+
+        &::after {
+            box-shadow: 0 4px #92cc41, 0 -4px #92cc41, 4px 0 #92cc41, -4px 0 #92cc41;
+
+        }
+    }
+}
+
+.layuimini-color .elem-content li {
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
+}

public/static/admin/css/themes/_sicfi.scss

@@ -0,0 +1,802 @@
+// 通常用于背景色
+$black-color :rgb(2, 17, 20);
+// 通常用于字体颜色
+$main-color :rgb(126, 252, 246);
+// 通常用于边框
+$less-main-color:rgb(6, 216, 215);
+
+$plus-main-color:rgb(0, 125, 124);
+
+// 通常用于激活状态,通常跟背景色搭配
+$cover-color :rgba(62, 251, 251, 0.05);
+// 更强的激活状态,适合做选项操作时使用
+$active-color :rgba(62, 251, 251, 0.5);
+
+
+$red-color :rgb(255, 0, 0);
+$yellow-color:rgb(255, 255, 153);
+$green-color :rgb(0, 255, 0);
+
+& {
+    background-color: $black-color;
+    color: $main-color;
+}
+
+.layuimini-main {
+    background-color: $black-color;
+}
+
+.layuimini-container {
+    background-color: $black-color;
+}
+
+.layuimini-container .layui-table-tool {
+    background-color: $black-color;
+}
+
+$box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 0);
+
+.layui-btn {
+
+    &.layui-btn-lg {
+
+        padding-right: 25px;
+    }
+
+    clip-path : $box-shape;
+    padding-right : 10px;
+    position : relative;
+    background-color: transparent;
+    border : 1px solid;
+    color : rgb(126, 252, 246);
+    text-shadow : rgb(126, 252, 246) 0px 0px 1px;
+    background-color: rgb(126, 252, 246);
+
+
+    &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        z-index: -1;
+        clip-path: $box-shape;
+        width: 100%;
+        height: 100%;
+        left: -0.5px;
+        top: -0.5px;
+        background-color: $black-color;
+    }
+
+    &:hover::after {
+        content: '';
+        display: block;
+        position: absolute;
+        z-index: -1;
+        clip-path: $box-shape;
+        width: 100%;
+        height: 100%;
+        left: -0.5px;
+        top: -0.5px;
+        background-color: rgba(126, 252, 246, 0.2);
+    }
+
+    &.layui-btn-disabled {
+        &::after {
+            // todo:实现按钮禁用样式
+        }
+    }
+
+    &.layui-btn-success {
+        text-shadow: rgb(0, 255, 0) 0px 0px 1px;
+        color: rgb(0, 255, 0);
+        background-color: rgba(0, 255, 0);
+        border: unset;
+
+        &:hover::after {
+            background-color: rgba(0, 255, 0, 0.2);
+        }
+    }
+
+    &.layui-btn-danger {
+        text-shadow: rgb(255, 0, 0) 0px 0px 1px;
+        color: rgb(255, 0, 0);
+        background-color: rgb(255, 0, 0);
+        border: unset;
+
+        &:hover::after {
+            background-color: rgba(255, 0, 0, 0.2);
+        }
+    }
+
+    &.layuimini-btn-primary {
+        text-shadow: rgb(255, 255, 153) 0px 0px 1px;
+        color: rgb(255, 255, 153);
+        background-color: rgb(255, 255, 153);
+        border: unset;
+
+        &:hover::after {
+            background-color: rgba(255, 255, 153, 0.2);
+        }
+
+    }
+
+    &.layui-btn-primary {
+        border: unset;
+    }
+
+    &.layui-btn-normal {
+        color: $black-color;
+        background-color: $main-color;
+        border: unset;
+
+        &::before {
+            background-color: $main-color;
+        }
+
+        &:hover::after {
+            background-color: $main-color;
+        }
+    }
+}
+
+.layui-table {
+    background: $black-color;
+    color: $main-color;
+
+
+    tr {
+        background-color: $cover-color;
+    }
+
+    td {
+        border-color: $less-main-color;
+    }
+
+}
+
+.layui-table-header {
+    background-color: $black-color;
+}
+
+.layuimini-container .layui-table-box {
+    border-color: $less-main-color;
+}
+
+.layuimini-container .layui-table-box .layui-table-header th {
+    color: $main-color !important;
+}
+
+.layui-table-tool .layui-inline[lay-event] {
+    color: $main-color;
+    border: none;
+    position: relative;
+
+    &::after {
+        border-color: $main-color;
+        border-width: 1px;
+        border-style: solid;
+        clip-path: $box-shape;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: calc(100% - 1px);
+        height: calc(100% - 1px);
+        content: '';
+        display: block;
+    }
+}
+
+.layui-table tbody tr:hover {
+    background-color: rgba(126, 252, 246, 0.1);
+}
+
+.layuimini-main {
+    border-color: $less-main-color;
+}
+
+.layui-table-header {
+    border-color: $less-main-color;
+}
+
+
+
+.color-content>ul>li>a>div>span:nth-child(2) {
+    background-color: $black-color !important;
+}
+
+.layuimini-color .elem-content li {
+    clip-path: $box-shape;
+}
+
+.layuimini-color .elem-content li.layui-this {
+    background-color: $main-color;
+    color: $black-color !important;
+    border-color: $less-main-color;
+}
+
+.layuimini-color .more-menu-item {
+    color: $main-color;
+
+    &:hover {
+        background-color: rgba(62, 251, 251, 0.05);
+    }
+}
+
+.layui-layout-admin .layui-header {
+    background-color: $cover-color !important;
+}
+
+.layuimini-tab .layui-tab-title {
+    background-color: $cover-color !important;
+    border-color: $less-main-color;
+
+}
+
+.layuimini-tab .layui-tab-title span {
+    color: $active-color;
+}
+
+.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover,
+.layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
+    color: $black-color !important;
+}
+
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
+    color: $main-color !important;
+}
+
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item {
+    background-color: $active-color;
+
+}
+
+
+.layui-layout-admin .layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
+.layuimini-tool i:hover {
+    background-color: $main-color !important;
+}
+
+.layuimini-tab .layui-tab-control>li {
+    background-color: $black-color;
+    border-color: $less-main-color;
+}
+
+.layuimini-tab .layui-tab-title li {
+    border-color: $less-main-color;
+}
+
+.layui-flow-more a *,
+.layui-laypage input,
+.layui-table-view select[lay-ignore] {
+    border-color: $less-main-color;
+    background-color: $black-color;
+    color: $main-color;
+}
+
+.layui-laypage button,
+.layui-laypage input {
+    border-color: $less-main-color;
+    background-color: $black-color;
+    color: $main-color;
+
+}
+
+.layuimini-container .layui-form-switch {
+    border-color: $less-main-color !important;
+    background-color: $black-color !important;
+
+}
+
+.layuimini-container .layui-form-onswitch {
+    background-color: $main-color !important;
+}
+
+.layuimini-container .layui-form-switch.layui-form-onswitch i {
+    background-color: $black-color !important;
+}
+.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
+    background-color: $main-color !important;
+}
+
+.layui-laypage .layui-laypage-curr em {
+    color: $black-color !important;
+}
+
+.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
+    background-color: $less-main-color;
+
+}
+
+.layui-table-view .layui-form-checkbox.layui-form-checked[lay-skin="primary"] i {
+    border-color: $main-color;
+    background-color: $main-color;
+    color: $black-color;
+}
+
+.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
+    background-color: $cover-color;
+}
+
+.layui-table-init {
+    background-color: $black-color;
+}
+
+.box-border-line {
+    position: relative;
+    border: 1px solid $less-main-color;
+    border-width: 1px;
+    $border-offset: 3px;
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 50px;
+        height: 20px;
+        transition: all 0.2s;
+        border: 1px solid $less-main-color;
+        top: -$border-offset;
+        left: -$border-offset;
+        border-right: none;
+        border-bottom: none;
+        pointer-events: none;
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 50px;
+        height: 20px;
+        transition: all 0.2s;
+        border: 1px solid $less-main-color;
+        bottom: -$border-offset;
+        right: -$border-offset;
+        border-left: none;
+        border-top: none;
+        pointer-events: none;
+    }
+
+    &:hover {
+
+        &::after,
+        &::before {
+            width: calc(100% + $border-offset);
+            height: calc(100% + $border-offset);
+        }
+    }
+}
+
+.table-search-fieldset {
+    .layui-input-inline {
+        margin-right: 0;
+    }
+
+
+
+    .layui-form-item:not(:last-child) {
+        margin-right: 10px;
+        @extend .box-border-line;
+    }
+
+    .layui-form-label {
+        border: unset;
+    }
+}
+
+.layui-form-pane .layui-form-label {
+    background-color: $cover-color;
+    color: $main-color;
+}
+
+.layuimini-container .table-search-fieldset {
+    color: $main-color;
+    border-color: $less-main-color;
+
+}
+
+.layui-form-select,
+.layui-form-autocomplete {
+    dl {
+
+        color: $main-color;
+        background-color: $black-color;
+        border-color: $less-main-color;
+
+        dd {
+            &.layui-this {
+                background-color: $main-color !important;
+                color: $black-color;
+            }
+
+            &:hover {
+                background-color: $less-main-color !important;
+                color: $black-color;
+            }
+        }
+    }
+}
+
+.layui-iconpicker-item,
+.layui-iconpicker-item:hover {
+    border-color: $less-main-color !important;
+    color: $black-color;
+
+    .layui-iconpicker-icon:hover {
+        border-color: $less-main-color !important;
+    }
+}
+
+
+.layui-nav-child {
+    background-color: $black-color;
+    color: $main-color;
+}
+
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
+    color: $main-color !important;
+}
+
+.layui-badge,
+.layui-badge-dot,
+.layui-badge-rim {
+    background-color: $main-color;
+}
+
+.layui-nav .layui-nav-child a:hover {
+    background-color: $active-color;
+}
+
+.layui-table-tool-panel {
+    background-color: $black-color;
+}
+
+.layui-form-checkbox[lay-skin="primary"] span {
+    color: $main-color;
+}
+
+.layui-table-tool-panel li:hover {
+    background-color: $active-color;
+}
+
+.layui-side.layui-bg-black,
+.layui-side.layui-bg-black>.layuimini-menu-left>ul,
+.layuimini-menu-left-zoom>ul {
+    background-color: $black-color !important;
+
+}
+
+.layui-side {
+    border-right: 1px solid $main-color;
+}
+
+.layui-bg-blue {
+    background-color: #0000ff !important;
+}
+
+.layui-bg-orange {
+    background-color: $yellow-color !important;
+    color: $black-color !important;
+}
+
+.layui-bg-green {
+    background-color: $green-color !important;
+    color: $black-color !important;
+}
+
+.layui-table-hover {
+    background-color: $cover-color;
+}
+
+.layui-table-grid-down {
+    background-color: $black-color;
+    color: $main-color;
+    border-color: unset;
+}
+
+.layui-table-tips-main {
+    background-color: $main-color;
+    color: $black-color;
+}
+
+.layui-layout-admin .layui-header .layuimini-tool i {
+    color: $main-color;
+}
+
+.color-red {
+    color: $red-color !important;
+}
+
+.layuimini-tab .layui-tab-title .layui-this span {
+    color: $main-color;
+}
+
+.layui-card {
+
+    background-color: $cover-color;
+    border-radius: 0;
+
+    @extend .box-border-line;
+
+    .layui-card-header {
+        color: $main-color;
+    }
+}
+
+.layui-text {
+    color: $main-color;
+}
+
+
+.layuimini-qiuck-module {
+    cursor: pointer;
+
+    a i {
+        background-color: $cover-color;
+        color: $active-color;
+    }
+
+    a cite {
+        color: $active-color;
+    }
+
+
+    &:hover {
+        a i {
+            background-color: $active-color;
+            color: $main-color;
+        }
+
+        a cite {
+            color: $main-color;
+        }
+
+    }
+}
+
+.layui-bg-number {
+    background-color: $cover-color;
+}
+
+.layui-input,
+.layui-select,
+.layui-textarea,
+.city-picker-span,
+.main-input {
+    background-color: $cover-color;
+    color: $main-color;
+}
+
+.city-picker-span>.title>span {
+    color: $main-color;
+
+    &:hover {
+        background-color: $main-color;
+        color: $black-color;
+    }
+}
+
+.layui-form-radio:hover *,
+.layui-form-radioed,
+.layui-form-radioed>i {
+    color: $main-color;
+}
+
+.layui-form-checked[lay-skin="primary"] i {
+    border-color: $main-color !important;
+    background-color: $main-color;
+    color: $black-color;
+}
+
+.layui-input:focus,
+.layui-textarea:focus {
+    border-color: $main-color !important;
+}
+
+.layui-input:hover,
+.layui-textarea:hover {
+    border-color: $main-color !important;
+
+}
+
+.layui-badge-rim,
+.layui-border,
+.layui-colla-content,
+.layui-colla-item,
+.layui-collapse,
+.layui-elem-field,
+.layui-form-pane .layui-form-item[pane],
+.layui-form-pane .layui-form-label,
+.layui-input,
+.layui-layedit,
+.layui-layedit-tool,
+.layui-panel,
+.layui-quote-nm,
+.layui-select,
+.layui-tab-bar,
+.layui-tab-card,
+.layui-tab-title,
+.layui-tab-title .layui-this::after,
+.layui-textarea {
+    border-color: $main-color !important;
+}
+
+.form-search .layui-input-inline input,
+.form-search .layui-input-inline select {
+    border-width: 0 0 0 1px;
+}
+
+.layuimini-tab .layui-tab-tool .layui-nav-child {
+    border-color: $main-color;
+}
+
+.layui-nav .layui-nav-child a {
+    color: $main-color;
+}
+
+.layui-form-item {
+    margin-bottom: 12px;
+}
+
+.layuimini-upload .layuimini-upload-btn {
+    background-color: $black-color;
+}
+
+.layui-layer {
+    border: 1px solid $main-color;
+    background-color: $black-color;
+}
+
+.layui-layer-easy .layui-layer-title {
+    background-color: $plus-main-color !important;
+    color: $main-color !important;
+}
+
+
+
+.layui-table td,
+.layui-table th,
+.layui-table-col-set,
+.layui-table-fixed-r,
+.layui-table-grid-down,
+.layui-table-header,
+.layui-table-page,
+.layui-table-tips-main,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-view,
+.layui-table[lay-skin="line"],
+.layui-table[lay-skin="row"] {
+    border-color: $less-main-color;
+}
+
+.layui-table tbody tr:hover,
+.layui-table thead tr,
+.layui-table-click,
+.layui-table-header,
+.layui-table-hover,
+.layui-table-mend,
+.layui-table-patch,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-total tr {
+    background-color: $black-color;
+}
+
+.hr-line {
+    color: $main-color;
+    border-color: $less-main-color;
+    background-color: $main-color;
+}
+
+.layui-layer-easy .layui-layer-btn {
+    background-color: $black-color;
+    border-top: 1px solid $less-main-color;
+}
+
+.layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
+    background-color: $main-color;
+    border-color: $less-main-color;
+    color: $main-color !important;
+    clip-path: $box-shape;
+}
+
+.layui-layer-easy .layui-layer-btn a {
+    @extend .layui-btn
+}
+
+.layui-layer-shade {
+    background-color: #fff !important;
+}
+
+.layuimini-menu-left {
+    .layui-nav-tree .layui-nav-item {
+
+        margin: 5px;
+        width: calc(100% - 10px);
+    }
+
+    .layui-nav .layui-nav-item {
+        clip-path: $box-shape;
+        color: $main-color;
+        background-color: $active-color;
+
+        &.layui-this a {
+            background-color: $main-color !important;
+            color: $black-color !important;
+        }
+
+        &.layui-this {
+            background-color: $main-color !important;
+            color: $black-color !important;
+
+            span {
+                background-color: $main-color !important;
+                color: $black-color !important;
+
+            }
+        }
+    }
+
+    .layui-nav .layui-nav-item a:hover {
+        background-color: $active-color !important;
+    }
+
+}
+
+.layuimini-menu-left .layui-nav .layui-nav-item a,
+.layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
+    color: $main-color !important;
+}
+
+.layuimini-menu-left .layui-nav-item a span {
+    color: $main-color !important;
+
+}
+
+.layuimini-menu-left .layui-nav-item:hover a span {
+    color: $black-color !important;
+
+}
+
+.layui-layout-admin .layuimini-logo {
+    background-color: $black-color !important;
+
+}
+
+.layuimini-menu-left .layui-nav-itemed>.layui-nav-child {
+    background-color: $black-color !important;
+}
+
+.layuimini-menu-left .layui-nav-tree .layui-this,
+.layuimini-menu-left .layui-nav-tree .layui-this>a,
+.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this,
+.layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-this,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-this>a,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this,
+.layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
+    background-color: $main-color !important;
+    color: $black-color !important;
+
+    .layui-left-nav {
+        color: $black-color !important;
+    }
+}
+
+
+.layui-iconpicker-icon {
+    border-color: $less-main-color !important;
+    background-color: $less-main-color !important;
+}
+
+.layui-iconpicker .layui-anim {
+    background-color: $black-color;
+}
+
+.layui-iconpicker .layui-iconpicker-list {
+    background-color: $black-color;
+}
+
+.layui-header .layui-nav .layui-nav-child dd.layui-this a,
+.layui-header .layui-nav-child dd.layui-this,
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
+    background-color: $active-color !important;
+}

public/static/admin/css/themes/_win7.scss

@@ -0,0 +1,288 @@
+& {
+    color: #222;
+    background-color: #f0f0f0;
+}
+
+.layui-btn {
+    background: linear-gradient(180deg, #eee 45%, #ddd 0, #bbb);
+    border: 1.5px solid #888;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 1px hsla(0, 0%, 100%, .8), inset 0 1px 1px #fff;
+    box-sizing: border-box;
+    color: #222;
+
+
+    &:hover {
+        background: linear-gradient(180deg, #e5f4fd 45%, #b3e0f9 0);
+        border-color: #72a2c5;
+    }
+}
+
+.layui-layer-easy .layui-layer-btn a {
+    @extend .layui-btn;
+    color: #222 !important;
+
+    height: 26px;
+    line-height: 26px;
+    font-size: 12px;
+}
+
+.layui-layer-title {
+    background: linear-gradient(90deg, hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .2)), linear-gradient(55deg, transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .1) 50%, transparent 53%), #4580c4 !important;
+    border: 1px solid rgba(0, 0, 0, .6);
+    border-radius: 6px 6px 0 0;
+    // box-shadow   : inset 0 0 .5px .5px #fff;
+
+    height: 27px;
+    line-height: 27px;
+
+    color: #000 !important;
+    letter-spacing: 0;
+    font-size: 12px;
+    text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
+
+    padding: 0 80px 0 8px;
+
+    border: 0;
+    box-shadow: inset 0 .5px #fff;
+
+
+}
+
+.layui-layer-easy .layui-layer-title~.layui-layer-setwin {
+    height: 27px !important;
+    top: 1px;
+}
+
+.layui-layer-easy .layui-layer-title~.layui-layer-setwin>span {
+    height: 20px !important;
+    line-height: 20px !important;
+
+    background: linear-gradient(hsla(0, 0%, 100%, .3), hsla(0, 0%, 100%, .3) 45%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, hsla(0, 0%, 100%, .5)) !important;
+    border: 0;
+    border-radius: 0;
+    border-bottom-right-radius: 0px;
+    border-right: 1px solid rgba(0, 0, 0, .6);
+    box-shadow: inset 0 0 0 .5px #eee;
+    box-sizing: border-box;
+
+    padding: 0;
+    position: relative;
+
+    margin-left: 0;
+
+    min-width: 26px;
+    text-align: center;
+
+    &:hover {
+        background: radial-gradient(circle at 50% 100%, #2aceda, transparent 60%), linear-gradient(#a9d2e8 50%, #196c9b 0) !important;
+    }
+
+
+    &:last-child {
+        border: 0;
+        border-bottom-right-radius: 5px;
+
+    }
+
+    &:first-child {
+        border-bottom-left-radius: 5px;
+    }
+
+    &.layui-layer-close1 {
+        background-color: #d04a37 !important;
+        min-width: 45px !important;
+
+
+        &:hover {
+            filter: contrast(1.3);
+            background-image: linear-gradient(hsla(0, 0%, 100%, .3), hsla(0, 0%, 100%, .3) 45%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .1) 75%, hsla(0, 0%, 100%, .5)) !important;
+        }
+    }
+
+}
+
+.layui-layer-dialog {
+    border-radius: 20px;
+}
+
+.layui-layer-iframe {
+    border-radius: 20px;
+}
+
+.layui-layer:not(.layui-layer-loading) {
+
+    .layui-layer-content {
+        background: #f0f0f0;
+        border: 1px solid rgba(0, 0, 0, .6);
+        box-shadow: 0 -1px 1px .5px #fff;
+        margin: 0 6px 0 6px;
+        padding: 6px;
+        border-bottom-width: 0;
+    }
+
+    &::before {
+        background: linear-gradient(transparent 20%, hsla(0, 0%, 100%, .7) 40%, transparent 41%), linear-gradient(90deg, hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .2)), linear-gradient(55deg, transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .1) 50%, transparent 53%), #4580c4;
+        border-radius: 6px;
+        content: "";
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: -1;
+
+    }
+
+    &.layui-layer-iframe {
+
+        &::before {
+            height: calc(100% + 20px);
+        }
+    }
+}
+
+.layui-layer-easy .layui-layer-btn {
+    background: #f0f0f0;
+    border: 1px solid rgba(0, 0, 0, .6);
+    box-shadow: 0 0 1px .5px #fff;
+    margin: 0 6px 6px;
+    padding: 6px;
+    border-top: 0;
+    text-align: right !important;
+}
+
+.layui-card {
+
+    border: 1px solid rgba(0, 0, 0, .6);
+    border-radius: 6px;
+    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .6);
+    font: 9pt Segoe UI, sans-serif;
+    position: relative;
+    z-index: 0;
+
+    &::before {
+        background: linear-gradient(transparent 20%, hsla(0, 0%, 100%, .7) 40%, transparent 41%), linear-gradient(90deg, hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .2)), linear-gradient(55deg, transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .1) 50%, transparent 53%), #4580c4;
+        border-radius: 6px;
+        content: "";
+        height: 100%;
+        position: absolute;
+        width: 100%;
+        z-index: -1;
+    }
+
+
+    .layui-card-header {
+        align-items: center;
+        background: linear-gradient(90deg, hsla(0, 0%, 100%, .4), rgba(0, 0, 0, .1), hsla(0, 0%, 100%, .2)), linear-gradient(55deg, transparent, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .1) 50%, transparent 53%), #4580c4;
+        border-radius: 6px 6px 0 0;
+        font: 9pt Segoe UI, sans-serif;
+        justify-content: space-between;
+        padding: 6px;
+        border: 0;
+        box-shadow: inset 0 .5px #fff;
+        height: 15px;
+
+        color: #000;
+        letter-spacing: 0;
+        line-height: 15px;
+        text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
+
+    }
+
+    .layui-card-body {
+        background: #f0f0f0;
+        border: 1px solid rgba(0, 0, 0, .6);
+        box-shadow: 0 0 1px .5px #fff;
+        margin: 0 6px 6px;
+        padding: 6px;
+    }
+}
+
+
+
+.layui-tab-brief>.layui-tab-title .layui-this {
+    color: #222;
+}
+
+.layuimini-tab .layui-tab-control>li {
+    height: 27px !important;
+    line-height: 27px !important;
+}
+
+.layui-form-checkbox[lay-skin="primary"] i {
+    background: #ddd;
+    border: 1px solid #888;
+    box-shadow: inset 0 0 0 1.5px #eee, inset 0 2px 4px #888, inset -2px -3px 4px #fff;
+    box-sizing: border-box;
+    content: "";
+    display: inline-block;
+    height: 13px;
+    margin-right: 6px;
+    width: 13px;
+    color: transparent;
+}
+
+.layui-form-checked[lay-skin="primary"] i {
+    color: #16638f;
+    border-color: #888;
+    display: block;
+    font-weight: 700;
+    position: absolute;
+
+    &::before {
+        font-size: 14px;
+    }
+
+}
+
+.layui-form-radio:hover *,
+.layui-form-radioed,
+.layui-form-radioed>i {
+    color: #16638f;
+}
+
+.layui-input {
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-top-color: rgb(204, 204, 204);
+    border-radius: 2px;
+    border-top-color: #888;
+    box-sizing: border-box;
+    font: 9pt Segoe UI, sans-serif;
+    padding: 3px 4px 5px;
+}
+
+.layui-input,
+.layui-select,
+.layui-textarea {
+    height: unset
+}
+
+.layui-form-label {
+    padding: 3px 15px;
+    font: 9pt Segoe UI, sans-serif;
+}
+
+
+.layuimini-form>.layui-form-item .required::after {
+    top: 2px;
+}
+
+.form-search .layui-input-inline input,
+.form-search .layui-input-inline select {
+    height: unset;
+    line-height: unset;
+}
+
+.form-search .layui-form-label {
+    height: unset;
+    background: unset;
+    text-align: right;
+    border: unset;
+}
+
+.layuimini-upload-btn {
+    .layui-btn {
+        height: 25px;
+        line-height: 25px;
+    }
+}

public/static/admin/css/themes/default.css

@@ -0,0 +1,95 @@
+/*头部右侧背景色 headerRightBg */
+.layui-layout-admin .layui-header {
+    background-color: #ffffff !important;
+}
+
+/*头部右侧选中背景色 headerRightBgThis */
+.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
+    background-color: #e4e4e4 !important;
+}
+
+/*头部右侧字体颜色 headerRightColor */
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
+    color: rgba(107, 107, 107, 0.7);
+}
+
+/**头部右侧下拉字体颜色 headerRightChildColor */
+.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
+    color: rgba(107, 107, 107, 0.7) !important;
+}
+
+/*头部右侧鼠标选中 headerRightColorThis */
+.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
+    color: #565656 !important;
+}
+
+/*头部右侧更多下拉颜色 headerRightNavMore */
+.layui-header .layui-nav .layui-nav-more {
+    border-top-color: rgba(160, 160, 160, 0.7) !important;
+}
+
+/*头部右侧更多下拉颜色 headerRightNavMore */
+.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {
+    border-color: transparent transparent rgba(160, 160, 160, 0.7) !important;
+}
+
+/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */
+.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
+    background-color: #1E9FFF !important;
+    color: #ffffff !important;
+}
+
+/*头部缩放按钮样式 headerRightToolColor */
+.layui-layout-admin .layui-header .layuimini-tool i {
+    color: #565656;
+}
+
+/*logo背景颜色 headerLogoBg */
+.layui-layout-admin .layuimini-logo {
+    background-color: #192027 !important;
+}
+
+/*logo字体颜色 headerLogoColor */
+.layui-layout-admin .layuimini-logo h1 {
+    color: rgb(191, 187, 187);
+}
+
+/*左侧菜单更多下拉样式 leftMenuNavMore */
+.layuimini-menu-left .layui-nav .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-more {
+    border-top-color: rgb(191, 187, 187);
+}
+
+/*左侧菜单更多下拉样式 leftMenuNavMore */
+.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {
+    border-color: transparent transparent rgb(191, 187, 187) !important;
+}
+
+/*左侧菜单背景 leftMenuBg */
+.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {
+    background-color: #28333E !important;
+}
+
+/*左侧菜单选中背景 leftMenuBgThis */
+.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
+    background-color: #1E9FFF !important
+}
+
+/*左侧菜单子菜单背景 leftMenuChildBg */
+.layuimini-menu-left .layui-nav-itemed > .layui-nav-child {
+    background-color: #0c0f13 !important;
+}
+
+/*左侧菜单字体颜色 leftMenuColor */
+.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
+    color: rgb(191, 187, 187) !important;
+}
+
+/*左侧菜单选中字体颜色 leftMenuColorThis */
+.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {
+    color: #ffffff !important;
+}
+
+/**tab选项卡选中颜色 tabActiveColor */
+.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
+    background-color: #1e9fff;
+}

public/static/admin/css/themes/index.scss

@@ -0,0 +1,41 @@
+.elem-style-normal {
+    @import 'normal';
+}
+
+.elem-style-demo {
+    @import 'demo';
+}
+
+.elem-style-sicfi {
+    @import 'sicfi';
+}
+
+.elem-style-gtk {
+    @import 'gtk';
+}
+
+.elem-style-nes {
+    @import 'nes';
+
+}
+
+.elem-style-win7 {
+    @import 'win7';
+}
+.elem-style-neomorphic {
+    @import 'neomorphic';
+}
+.elem-style-dark {
+    @import 'dark';
+}
+
+@font-face {
+    font-family: "ark-pixel";
+    src        : url('./nes/ark-pixel-font-12px/ark-pixel-12px-zh_cn.ttf') format('truetype'),
+        url('./nes/ark-pixel-font-12px/ark-pixel-12px-zh_hk.ttf') format('truetype'),
+        url('./nes/ark-pixel-font-12px/ark-pixel-12px-zh_tr.ttf') format('truetype'),
+        url('./nes/ark-pixel-font-12px/ark-pixel-12px-zh_tw.ttf') format('truetype'),
+        url('./nes/ark-pixel-font-12px/ark-pixel-12px-ja.ttf') format('truetype'),
+        url('./nes/ark-pixel-font-12px/ark-pixel-12px-ko.ttf') format('truetype'),
+        url('./nes/ark-pixel-font-12px/ark-pixel-12px-latin.ttf') format('truetype');
+}

public/static/admin/css/themes/nes/ark-pixel-font-12px/OFL.txt

@@ -0,0 +1,94 @@
+Copyright (c) 2021, TakWolf (https://ark-pixel-font.takwolf.com),
+with Reserved Font Name 'Ark Pixel'.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

public/static/admin/css/welcome.css

@@ -48,7 +48,6 @@
     position: relative;
     top: 2px;
     display: block;
-    color: #666;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -58,6 +57,8 @@
 .welcome-module {
     width: 100%;
     height: 210px;
+    max-height: 210px;
+    overflow: hidden;
 }
 
 .panel {

public/static/admin/js/index.js

@@ -1,4 +1,4 @@
-define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTab", "swiper"], function ($, ea, echarts, undefined, miniAdmin, miniTab) {
+define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTheme", "miniTab", "swiper"], function ($, ea, echarts, undefined, miniAdmin, miniTheme, miniTab) {
 
     return {
         index: function () {
@@ -25,28 +25,6 @@ define(["jquery", "easy-admin", "echarts", "echarts-theme", "miniAdmin", "miniTa
                     })
                 });
             });
-            layui.form.on('switch(header-theme-mode)', function (data) {
-                let dark_mode = this.checked
-                let that = $('iframe').contents()
-                if (dark_mode) {
-                    $('#layuicss-theme-dark').attr({
-                        rel: "stylesheet",
-                        type: "text/css",
-                        href: "/static/admin/css/layui-theme-dark.css"
-                    })
-                        .appendTo("head");
-                    that.find("html").addClass('dark')
-                    $('html').addClass('dark')
-                } else {
-                    $('#layuicss-theme-dark').attr({
-                        rel: "stylesheet",
-                        type: "text/css",
-                        href: ""
-                    })
-                    that.find("html").removeClass('dark')
-                    $('html').removeClass('dark')
-                }
-            });
         },
         welcome: function () {
             miniTab.listen();

public/static/admin/js/login.js

@@ -7,7 +7,7 @@ define(["jquery", "easy-admin"], function ($, ea) {
             }
             $(function () {
                 if (backgroundUrl) {
-                    $('.container').css('background', 'url(' + backgroundUrl + ') 0% 0% / cover no-repeat')
+                    $('body').css('background', 'url(' + backgroundUrl + ') 0% 0% / cover no-repeat')
                 }
                 $('.bind-password').on('click', function () {
                     if ($(this).hasClass('icon-5')) {

public/static/common/css/install.css

@@ -1,31 +1,37 @@
-body{
+body {
     text-align: center;
 }
-h1{
+
+h1 {
     margin-top: 20px;
 }
-h1 img{
+
+h1 img {
     width: 120px;
     height: 120px;
 }
+
 h2 {
     font-size: 28px;
     font-weight: normal;
     color: #3C5675;
     margin-bottom: 0
 }
-.content{
+
+.content {
     margin-top: 20px;
 }
-.content p{
+
+.content p {
     margin: 20px;
 }
-.content form{
-    margin:0 auto;
+
+.content form {
     width: 500px;
-    margin-bottom: 20px;
+    margin: 0 auto 20px;
 }
-.content form .bg{
+
+.content form .bg {
     margin-top: 20px;
     background-color: #fff;
     border: 1px solid #fff;
@@ -33,51 +39,68 @@ h2 {
     padding: 14px 14px;
     box-shadow: 0 0 8px #cccccc;
 }
-.content form .layui-form-item:last-child{
-    margin-bottom:0!important;
+
+.content form .bg .layui-card {
+    background-color: #fafafa;
+    color: #ff8080;
+    font-size: 15px;
+    font-weight: bold;
 }
-.content form .layui-btn{
+
+.content form .layui-form-item:last-child {
+    margin-bottom: 0 !important;
+}
+
+.content form .layui-btn {
     margin-top: 20px;
 }
-.content .layui-elem-field legend{
+
+.content .layui-elem-field legend {
     font-size: 16px;
     color: #8a8a8a;
 }
-.content .tips{
+
+.content .tips {
     float: left;
     margin-top: 5px;
     margin-bottom: 5px;
     font-size: 12px;
     color: #eca6a6
 }
-.content .admin-tips{
+
+.content .admin-tips {
     float: left;
     margin-top: 5px;
     margin-bottom: 5px;
     font-size: 12px;
     color: #eca6a6
 }
-.content .desc{
+
+.content .desc {
     font-size: 16px;
     color: #4E5465;
     margin-bottom: 30px;
 }
-.content .desc a{
+
+.content .desc a {
     color: #07adeb;
     margin-right: 10px;
 }
-.content .desc a:first-child{
+
+.content .desc a:first-child {
     margin-left: 10px;
 }
-.error{
+
+.error {
     background: #D83E3E;
     color: #fff;
     padding: 15px 20px;
     border-radius: 5px;
     margin-bottom: 20px;
 }
-@media screen and (max-width:768px) {
-    .content form{
+
+@media screen and (max-width: 768px) {
+    .content form {
         width: 95%;
     }
 }

public/static/config-admin.js

@@ -20,8 +20,10 @@ require.config({
         "tableSelect": ["plugs/lay-module/tableSelect/tableSelect"],
         "iconPickerFa": ["plugs/lay-module/iconPicker/iconPickerFa"],
         "autocomplete": ["plugs/lay-module/autocomplete/autocomplete"],
+        "xmSelect": ["plugs/xmSelect/xm-select"],
         "vue": ["plugs/vue-2.6.10/vue.min"],
         "swiper": ["plugs/swiper/swiper-bundle.min"],
+        "colorMode": ["plugs/colorMode/colorMode"],
     }
 });
 

public/static/plugs/colorMode/colorMode.js

@@ -0,0 +1,186 @@
+// @ts-ignore
+define(['jquery'], function (colorMode) {
+  // 'use strict';
+
+  /** @type {jQuery}*/
+  var $ = layui.jquery;
+
+  var MOD_NAME = 'colorMode';
+  var defaultWindow = window;
+  var document = defaultWindow.document;
+
+  var colorMode = {
+    /**
+     * @typedef {object} initOptions
+     * @prop {string} [selector="html"] - 应用于目标元素的 CSS 选择器
+     * @prop {string} [attribute="class"] - 应用于目标元素的 HTML 属性
+     * @prop {string} [initialValue='auto'] - 初始颜色模式
+     * @prop {Object.<string, string>} [modes]- 颜色模式。value 为添加到 HTML 属性上的值
+     * @prop {(mode: string, defaultHandler: (window?: Window) => void) => void} [onChanged] - 用于处理更新的自定义处理程序，指定时，默认行为将被覆盖。
+     * @prop {Storage} [storage=localStorage] - 将数据持久化到 localStorage/sessionStorage 的键。传递 `null` 以禁用持久性
+     * @prop {string | null} [storageKey='color-scheme'] - 持久化使用的 key
+     * @prop {boolean} [disableTransition=true] - 禁用切换时的过渡 {@link https://paco.me/writing/disable-theme-transitions}
+     *
+     */
+
+    /**
+     *
+     * @param {initOptions} options
+     * @returns {{mode: () => string; setMode: (mode: string, window?: Window) => void; }}
+     */
+    init: function (options) {
+      var defaults = {
+        selector: 'html',
+        attribute: 'class',
+        initialValue: 'auto',
+        modes: {
+          auto: '',
+          light: 'light',
+          dark: 'dark',
+        },
+        storage: localStorage,
+        storageKey: 'color-scheme',
+        disableTransition: true,
+      };
+
+      var opts = $.extend(true, {}, defaults, options);
+
+      // 当前颜色模式
+      var state;
+      // 系统颜色模式
+      var system;
+      // 初始化 storage
+      var store =
+        opts.storageKey == null
+          ? opts.initialValue
+          : (function () {
+              var v = opts.storage.getItem(opts.storageKey);
+              if (!v) {
+                opts.storage.setItem(opts.storageKey, opts.initialValue);
+                return opts.initialValue;
+              }
+              return v;
+            })();
+
+      /**
+       * 更新 HTML 属性值
+       * @param {String} selector
+       * @param {String} attribute
+       * @param {String} value
+       * @param {Window} win
+       */
+      var updateHTMLAttrs = function (selector, attribute, value, win) {
+        win = win || defaultWindow;
+        var document = win.document;
+        var el = typeof selector === 'string' ? document.querySelector(selector) : undefined;
+        if (!el) return;
+
+        /**@type HTMLStyleElement */
+        var style;
+
+        if (opts.disableTransition) {
+          style = document.createElement('style');
+          style.appendChild(
+            document.createTextNode(
+              '*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}'
+            )
+          );
+          document.head.appendChild(style);
+        }
+
+        if (attribute === 'class') {
+          var current = value.split(/\s/g);
+          $.each(opts.modes, function (_, modeval) {
+            $.each((modeval || '').split(/\s/g), function (_, v) {
+              if (!v) return;
+              if (current.indexOf(v) !== -1) {
+                el.classList.add(v);
+              } else {
+                el.classList.remove(v);
+              }
+            });
+          });
+        } else {
+          el.setAttribute(attribute, value);
+        }
+
+        if (opts.disableTransition) {
+          // 调用 getComputedStyle 强制浏览器重绘
+          // @ts-expect-error 未使用的变量
+          var _ = window.getComputedStyle(style).opacity;
+          document.head.removeChild(style);
+        }
+      };
+
+      /**
+       * 更新状态
+       * @param {String} mode - 颜色模式
+       */
+      var updateState = function (mode) {
+        store = opts.storageKey == null ? mode : opts.storage.getItem(opts.storageKey);
+        state = store === 'auto' ? system : store;
+      };
+
+      var prefersColorScheme = function () {
+        var isSupported = window && 'matchMedia' in window && typeof window.matchMedia === 'function';
+        if (!isSupported) {
+          system = 'light';
+          onChanged(system);
+          return;
+        }
+        var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        var update = function () {
+          var preferredDark = darkThemeMediaQuery.matches;
+          system = preferredDark ? 'dark' : 'light';
+          onChanged(system);
+        };
+        update();
+        if ('addEventListener' in darkThemeMediaQuery) {
+          darkThemeMediaQuery.addEventListener('change', update);
+        } else {
+          // @ts-ignore 已弃用
+          darkThemeMediaQuery.addListener(update);
+        }
+      };
+
+      prefersColorScheme();
+
+      function defaultOnChanged(win) {
+        updateHTMLAttrs(opts.selector, opts.attribute, opts.modes[state], win);
+      }
+
+      function onChanged(mode, win) {
+        updateState(mode);
+        if (opts.onChanged) {
+          opts.onChanged(state, defaultOnChanged);
+        } else {
+          defaultOnChanged(win);
+        }
+      }
+
+      return {
+        status:system,
+        setMode: function (mode, win) {
+          if (opts.storageKey) {
+            opts.storage.setItem(opts.storageKey, mode);
+          }
+          onChanged(mode, win);
+        },
+        mode: function () {
+          return state;
+        },
+      };
+    },
+    addStyle: function (id, cssStr) {
+      var el = /** @type {HTMLStyleElement} */ (document.getElementById(id) || document.createElement('style'));
+      if (!el.isConnected) {
+        el.type = 'text/css';
+        el.id = id;
+        document.head.appendChild(el);
+      }
+      el.textContent = cssStr;
+    },
+  };
+
+  return colorMode;
+});

public/static/plugs/easy-admin/easy-admin.js

@@ -1,4 +1,15 @@
-define(["jquery", "tableSelect"], function ($, tableSelect) {
+define(["jquery", "tableSelect", "miniTheme", "xmSelect"], function ($, tableSelect, miniTheme, xmSelect) {
+
+    //切换日夜模式
+    window.onInitElemStyle = function () {
+        miniTheme.renderElemStyle();
+        $('iframe').each(function (index, iframe) {
+            if (typeof iframe.contentWindow.onInitElemStyle == "function") {
+                iframe.contentWindow.onInitElemStyle();
+            }
+        });
+    };
+    window.onInitElemStyle();
 
     var form = layui.form,
         layer = layui.layer,

public/static/plugs/lay-module/layuimini/layuimini.css

@@ -607,7 +607,6 @@
 }
 
 .layuimini-color .more-menu-item {
-    color: #595959;
     height: 50px;
     line-height: 50px;
     font-size: 16px;
@@ -617,10 +616,6 @@
     display: block;
 }
 
-.layuimini-color .more-menu-item:hover {
-    background-color: whitesmoke;
-}
-
 .layuimini-color .more-menu-item:after {
     color: #8c8c8c;
     right: 16px;

public/static/plugs/lay-module/layuimini/miniAdmin.js

@@ -6,7 +6,7 @@
  */
 
 
-define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, miniTheme, miniTab) {
+define(["jquery", "miniMenu", "miniTheme", "miniTab", "colorMode"], function ($, miniMenu, miniTheme, miniTab, colorMode) {
 
     var $ = layui.$,
         layer = layui.layer,
@@ -104,7 +104,7 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
          * @param clearUrl
          */
         renderClear: function (clearUrl) {
-            $('.layuimini-clear').attr('data-href',clearUrl);
+            $('.layuimini-clear').attr('data-href', clearUrl);
         },
 
         /**
@@ -171,7 +171,7 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
                 el.msExitFullscreen();
             } else if (el.oRequestFullscreen) {
                 el.oCancelFullScreen();
-            }else if (el.mozCancelFullScreen) {
+            } else if (el.mozCancelFullScreen) {
                 el.mozCancelFullScreen();
             } else if (el.webkitCancelFullScreen) {
                 el.webkitCancelFullScreen();
@@ -243,6 +243,92 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
          */
         listen: function () {
 
+            layui.form.on('switch(header-theme-mode)', function (data) {
+                let checked = data.elem.checked;
+                let mode = checked ? 'dark' : 'light';
+                changeTheme(mode);
+            });
+
+            /**
+             * 浅色和暗色主题切换
+             */
+            const theme = colorMode.init({
+                onChanged(mode, defaultHandler) {
+                    const isAppearanceTransition =
+                        document.startViewTransition && !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+                    const isDark = mode === 'dark';
+                    //跟随windows系统主题色的变化而变化，但没法保存选择的元素风格
+                    // var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+                    // var preferredDark = darkThemeMediaQuery.matches;
+                    // var currMode = preferredDark ? 'dark' : 'light';
+                    // changeTheme(currMode);
+                    $('#change-theme').attr('class', `layui-icon layui-icon-${isDark ? 'moon' : 'light'}`);
+
+                    if (!isAppearanceTransition) {
+                        defaultHandler();
+                    } else {
+                        rippleViewTransition(isDark, function () {
+                            // 动画需要
+                            document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
+                            defaultHandler();
+                        });
+                    }
+                },
+            });
+
+            //切换特效
+            function rippleViewTransition(isDark, callback) {
+                // 移植自 https://github.com/vuejs/vitepress/pull/2347
+                // 支持 Chrome 111+
+                const x = event.clientX;
+                const y = event.clientY;
+                const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+                const transition = document.startViewTransition(function () {
+                    callback && callback();
+                });
+                transition.ready.then(function () {
+                    var clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
+                    document.documentElement.animate(
+                        {
+                            clipPath: isDark ? clipPath : [...clipPath].reverse(),
+                        },
+                        {
+                            duration: 300,
+                            easing: 'ease-in',
+                            pseudoElement: isDark ? '::view-transition-new(root)' : '::view-transition-old(root)',
+                        }
+                    );
+                });
+            }
+
+            //改变主题
+            function changeTheme(mode) {
+                switch (mode) {
+                    case 'dark':
+                        localStorage.setItem('layuiminiBgColorId', '1');
+                        localStorage.setItem('layuiminiElemStyleName', 'dark');
+                        changeBgColor(1);
+                        break;
+                    case 'light':
+                        localStorage.setItem('layuiminiBgColorId', '0');
+                        localStorage.setItem('layuiminiElemStyleName', 'normal');
+                        changeBgColor(0);
+                        break
+                }
+                window.onInitElemStyle()
+            }
+
+            //改变配色
+            function changeBgColor(id) {
+                $('.layuimini-color .color-content ul .layui-this').attr('class', '');
+                $(this).attr('class', 'layui-this');
+                localStorage.setItem('layuiminiBgColorId', id);
+                miniTheme.render({
+                    bgColorDefault: id,
+                    listen: false,
+                });
+            }
+
             /**
              * 清理
              */
@@ -289,14 +375,14 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
                     tips = $(this).prop("innerHTML"),
                     isShow = $('.layuimini-tool i').attr('data-side-fold');
                 if (isShow == 0 && tips) {
-                    tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
+                    tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>" + tips + "</li></ul>";
                     window.openTips = layer.tips(tips, $(this), {
                         tips: [2, '#2f4056'],
                         time: 300000,
-                        skin:"popup-tips",
-                        success:function (el) {
-                            var left = $(el).position().left - 10 ;
-                            $(el).css({ left:left });
+                        skin: "popup-tips",
+                        success: function (el) {
+                            var left = $(el).position().left - 10;
+                            $(el).css({left: left});
                             element.render();
                         }
                     });
@@ -345,6 +431,5 @@ define(["jquery", "miniMenu", "miniTheme", "miniTab"], function ($, miniMenu, mi
     };
 
 
-
     return miniAdmin;
 });

public/static/plugs/lay-module/layuimini/miniTheme.js

@@ -41,20 +41,20 @@ define(["jquery"], function ($) {
                     headerRightBg: '#23262e', //头部右侧背景色
                     headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
                     headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
-                    headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
-                    headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
+                    headerRightChildColor: 'rgba(255,255,255,.7)', //头部右侧下拉字体颜色,
+                    headerRightColorThis: 'rgba(255,255,255,.7)', //头部右侧鼠标选中,
                     headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
                     headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
-                    headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
+                    headerRightNavMoreColor: 'rgba(255,255,255,.7)', //头部右侧更多下拉列表字体色,
                     headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
                     headerLogoBg: '#0c0c0c', //logo背景颜色,
-                    headerLogoColor: '#ffffff', //logo字体颜色,
+                    headerLogoColor: 'rgba(255,255,255,.7)', //logo字体颜色,
                     leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
                     leftMenuBg: '#23262e', //左侧菜单背景,
-                    leftMenuBgThis: '#737373', //左侧菜单选中背景,
-                    leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
-                    leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
-                    leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
+                    leftMenuBgThis: '#484849', //左侧菜单选中背景,
+                    leftMenuChildBg: '#23262e', //左侧菜单子菜单背景,
+                    leftMenuColor: 'rgba(255,255,255,.9)', //左侧菜单字体颜色,
+                    leftMenuColorThis: 'rgba(255,255,255,.7)', //左侧菜单选中字体颜色,
                     tabActiveColor: '#23262e', //tab选项卡选中颜色,
                 },
                 {
@@ -272,7 +272,7 @@ define(["jquery"], function ($) {
         render: function (options) {
             options.bgColorDefault = options.bgColorDefault || false;
             options.listen = options.listen || false;
-            var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
+            var bgcolorId = localStorage.getItem('layuiminiBgColorId');
             if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
                 bgcolorId = options.bgColorDefault;
             }
@@ -280,6 +280,21 @@ define(["jquery"], function ($) {
             if (options.listen) miniTheme.listen(options);
         },
 
+        renderElemStyle(elemStyleDefault) {
+            elemStyleDefault = elemStyleDefault || 'light';
+            let elemStyleName = localStorage.getItem('layuiminiElemStyleName');
+            if (!elemStyleName) elemStyleName = elemStyleDefault;
+            let themeModeEle = $('input[name=theme-mode]')
+            if (themeModeEle.length > 0) {
+                if (elemStyleName == 'dark') {
+                    themeModeEle.prop('checked', true);
+                } else {
+                    themeModeEle.prop('checked', false);
+                }
+                layui.form.render('checkbox', 'header-theme-mode');
+            }
+            miniTheme.buildBodyElemStyle(elemStyleName);
+        },
         /**
          * 构建主题样式
          * @param bgcolorId
@@ -386,7 +401,85 @@ define(["jquery"], function ($) {
                 '}\n';
             $('#layuimini-bg-color').html(styleHtml);
         },
+        configElemStyle() {
+            var listElemStyle = [
+                {
+                    title: '标准',
+                    className: 'normal'
+                },
+                {
+                    title: '原型',
+                    className: 'demo',
+                    defaultColorConfig: '12'
+                },
+                {
+                    title: '科幻',
+                    className: 'sicfi'
+                },
+                {
+                    title: 'GTK',
+                    className: 'gtk'
+                },
+                {
+                    title: '像素',
+                    className: 'nes',
+                    defaultColorConfig: '12'
+                },
+                {
+                    title: 'WIN7',
+                    className: 'win7',
+                    defaultColorConfig: '12'
+                },
+                {
+                    title: '拟物',
+                    className: 'neomorphic',
 
+                },
+                {
+                    title: '暗黑',
+                    className: 'dark',
+                    defaultColorConfig: '1'
+
+                },
+            ]
+            return listElemStyle;
+        },
+        buildBodyElemStyle(className) {
+
+            var listElemStyle = miniTheme.configElemStyle()
+
+            $.each(listElemStyle, function (index, item) {
+                var classNameReal = 'elem-style-' + item.className;
+                if ($('body').hasClass(classNameReal)) {
+                    $('body').removeClass(classNameReal);
+                }
+            })
+
+            $('body').addClass('elem-style-' + className)
+        },
+        buildElemStyleHtml(options) {
+            var elemStyleName = localStorage.getItem('layuiminiElemStyleName');
+            if (!elemStyleName) elemStyleName = options.elemStyleDefault;
+            var listElemStyle = miniTheme.configElemStyle()
+            var html = '';
+            $.each(listElemStyle, function (key, val) {
+
+                if (typeof val.defaultColorConfig == 'undefined') {
+                    val.defaultColorConfig = '0'
+                }
+
+                if (val.className === elemStyleName) {
+                    html += '<li class="layui-this style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n';
+                } else {
+                    html += '<li id="' + val.className + '" class="style-item"  data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n';
+                }
+                html +=
+                    val.title +
+
+                    '</li>';
+            });
+            return html;
+        },
         /**
          * 构建主题选择html
          * @param options
@@ -394,7 +487,7 @@ define(["jquery"], function ($) {
          */
         buildBgColorHtml: function (options) {
             options.bgColorDefault = options.bgColorDefault || 0;
-            var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
+            var bgcolorId = parseInt(localStorage.getItem('layuiminiBgColorId'));
             if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
             var bgColorConfig = miniTheme.config();
             var html = '';
@@ -457,12 +550,29 @@ define(["jquery"], function ($) {
                 var bgcolorId = $(this).attr('data-select-bgcolor');
                 $('.layuimini-color .color-content ul .layui-this').attr('class', '');
                 $(this).attr('class', 'layui-this');
-                sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
+                localStorage.setItem('layuiminiBgColorId', bgcolorId);
                 miniTheme.render({
                     bgColorDefault: bgcolorId,
                     listen: false,
                 });
             });
+            $('body').on('click', '[data-select-style]', function () {
+                var elemStyleName = $(this).attr('data-select-style');
+
+                $(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
+
+                var defaultColorConfig = $(this).attr('data-default-color-config');
+
+                if (defaultColorConfig && defaultColorConfig.length > 0) {
+                    localStorage.setItem('layuiminiBgColorId', defaultColorConfig);
+
+                }
+
+                localStorage.setItem('layuiminiElemStyleName', elemStyleName);
+                miniTheme.render({
+                    listen: false,
+                });
+            });
         }
     };
 

public/static/plugs/xmSelect/xm-select.js

@@ -212,7 +212,10 @@
                     var n = t.b[e];
                     n && n.calcPosition && n.calcPosition()
                 }))
-            }))), "object" === ("undefined" == typeof exports ? "undefined" : _typeof(exports)) ? e.exports = t.c : "function" == typeof define && n(221) ? define(xmSelect) : window.layui && layui.define && layui.define((function (e) {
+            }))), "object" === ("undefined" == typeof exports ? "undefined" : _typeof(exports)) ? e.exports = t.c : "function" == typeof define && n(221)
+                ? define(function () {
+                    return t.c
+                }) : window.layui && layui.define && layui.define((function (e) {
                 e("xmSelect", t.c)
             })), window.xmSelect = t.c
         }.call(this, n(215)(e))

view/index/install/index.html

@@ -6,8 +6,8 @@
     <meta name="renderer" content="webkit">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-    <link rel="stylesheet" href="/static/plugs/layui-v2.x/css/layui.css?v={:time()}" media="all">
-    <link rel="stylesheet" href="/static/common/css/insatll.css?v={:time()}" media="all">
+    <link rel="stylesheet" href="/static/plugs/layui-v2.x/css/layui.css" media="all">
+    <link rel="stylesheet" href="/static/common/css/install.css?v={:time()}" media="all">
 </head>
 <body>
 <h1><img src="/static/common/images/logo-1.png" alt="" style="width: 100px;height: 100px;"></h1>
@@ -32,45 +32,50 @@
         </div>
         {/if}
         <div class="bg">
+            <div class="layui-card">
+                <div class="layui-card-body">
+                    自动读取 .env 配置，不需要手动创建数据库
+                </div>
+            </div>
             <div class="layui-form-item">
                 <label class="layui-form-label">数据库地址</label>
                 <div class="layui-input-block">
-                    <input class="layui-input" name="hostname" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库地址" placeholder="请输入数据库地址" value="127.0.0.1">
+                    <input class="layui-input" name="hostname" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库地址" placeholder="请输入数据库地址" value="{$envInfo.DB_HOST}">
                 </div>
             </div>
 
             <div class="layui-form-item">
                 <label class="layui-form-label">数据库端口</label>
                 <div class="layui-input-block">
-                    <input class="layui-input" name="hostport" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库端口" placeholder="请输入数据库端口" value="3306">
+                    <input class="layui-input" name="hostport" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库端口" placeholder="请输入数据库端口" value="{$envInfo.DB_PORT}">
                 </div>
             </div>
 
             <div class="layui-form-item">
                 <label class="layui-form-label">数据库名称</label>
                 <div class="layui-input-block">
-                    <input class="layui-input" name="database" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库名称" placeholder="请输入数据库名称" value="easyadmin8">
+                    <input class="layui-input" name="database" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库名称" placeholder="请输入数据库名称" value="{$envInfo.DB_NAME}">
                 </div>
             </div>
 
             <div class="layui-form-item">
                 <label class="layui-form-label">数据表前缀</label>
                 <div class="layui-input-block">
-                    <input class="layui-input" name="prefix" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据表前缀" placeholder="请输入数据表前缀" value="ea8_">
+                    <input class="layui-input" name="prefix" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据表前缀" placeholder="请输入数据表前缀" value="{$envInfo.DB_PREFIX}">
                 </div>
             </div>
 
             <div class="layui-form-item">
                 <label class="layui-form-label">数据库账号</label>
                 <div class="layui-input-block">
-                    <input class="layui-input" name="db_username" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库账号" placeholder="请输入数据库账号" value="root">
+                    <input class="layui-input" name="db_username" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库账号" placeholder="请输入数据库账号" value="{$envInfo.DB_USER}">
                 </div>
             </div>
 
             <div class="layui-form-item">
                 <label class="layui-form-label">数据库密码</label>
                 <div class="layui-input-block">
-                    <input type="password" class="layui-input" name="db_password" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库密码" placeholder="请输入数据库密码">
+                    <input type="text" class="layui-input" name="db_password" autocomplete="off" lay-verify="required" lay-reqtext="请输入数据库密码" placeholder="请输入数据库密码" value="{$envInfo.DB_PASS}">
                 </div>
             </div>
 
@@ -111,11 +116,11 @@
         </div>
     </form>
 </div>
-<script src="static/plugs/layui-v2.x/layui.js?v={:time()}" charset="utf-8"></script>
+<script src="static/plugs/layui-v2.x/layui.js" charset="utf-8"></script>
 <script>
     let isInstall = '{$isInstall? 1 : 0}'
     layui.use(['form', 'layer'], function () {
-        var $ = layui.jquery,
+        let $ = layui.jquery,
             form = layui.form,
             layer = layui.layer;
         if (isInstall > 0) {
@@ -129,7 +134,7 @@
             })
         }
         $("#admin_url").bind("input propertychange", function () {
-            var val = $(this).val();
+            let val = $(this).val();
             $("#admin_name").text(val);
         });
 
@@ -137,8 +142,8 @@
             if ($(this).hasClass('layui-btn-disabled')) {
                 return false;
             }
-            var _data = data.field;
-            var loading = layer.msg('正在安装...', {
+            let _data = data.field;
+            let loading = layer.msg('正在安装...', {
                 icon: 16,
                 shade: 0.2,
                 time: false
@@ -157,7 +162,7 @@
                             window.location.href = '/admin';
                         });
                     } else {
-                        layer.msg(data.msg, {icon: 2});
+                        layer.msg(data.msg, {icon: 2, shade: 0.2, time: 3000, shadeClose: true});
                     }
                 },
                 error: function (xhr, textstatus, thrown) {