diff --git a/.example.env b/.example.env
new file mode 100644
index 0000000..c27f74c
--- /dev/null
+++ b/.example.env
@@ -0,0 +1 @@
+APP_DEBUG = true

[APP]
DEFAULT_TIMEZONE = Asia/Shanghai

[DATABASE]
TYPE = mysql
HOSTNAME = 127.0.0.1
DATABASE = test
USERNAME = username
PASSWORD = password
HOSTPORT = 3306
CHARSET = utf8
DEBUG = true

[LANG]
default_lang = zh-cn
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 2b6a46e..d465120 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,9 +1,5 @@
-# ---> ThinkPHP
-# gitignore template for ThinkPHP v3.2.3
-# website: http://www.thinkphp.cn/
-
-# Logs and Cache files
-/Application/Runtime/
-
-# Common configure file
-/Application/Common/Conf/config.php
+/.idea
+/.vscode
+/vendor
+*.log
+.env
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..36f7b6f
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,42 @@
+sudo: false
+
+language: php
+
+branches:
+  only:
+    - stable
+
+cache:
+  directories:
+    - $HOME/.composer/cache
+
+before_install:
+  - composer self-update
+
+install:
+  - composer install --no-dev --no-interaction --ignore-platform-reqs
+  - zip -r --exclude='*.git*' --exclude='*.zip' --exclude='*.travis.yml' ThinkPHP_Core.zip .
+  - composer require --update-no-dev --no-interaction "topthink/think-image:^1.0"
+  - composer require --update-no-dev --no-interaction "topthink/think-migration:^1.0"
+  - composer require --update-no-dev --no-interaction "topthink/think-captcha:^1.0"
+  - composer require --update-no-dev --no-interaction "topthink/think-mongo:^1.0"
+  - composer require --update-no-dev --no-interaction "topthink/think-worker:^1.0"
+  - composer require --update-no-dev --no-interaction "topthink/think-helper:^1.0"
+  - composer require --update-no-dev --no-interaction "topthink/think-queue:^1.0"
+  - composer require --update-no-dev --no-interaction "topthink/think-angular:^1.0"
+  - composer require --dev --update-no-dev --no-interaction "topthink/think-testing:^1.0"
+  - zip -r --exclude='*.git*' --exclude='*.zip' --exclude='*.travis.yml' ThinkPHP_Full.zip .
+
+script:
+  - php think unit
+
+deploy:
+  provider: releases
+  api_key:
+    secure: TSF6bnl2JYN72UQOORAJYL+CqIryP2gHVKt6grfveQ7d9rleAEoxlq6PWxbvTI4jZ5nrPpUcBUpWIJHNgVcs+bzLFtyh5THaLqm39uCgBbrW7M8rI26L8sBh/6nsdtGgdeQrO/cLu31QoTzbwuz1WfAVoCdCkOSZeXyT/CclH99qV6RYyQYqaD2wpRjrhA5O4fSsEkiPVuk0GaOogFlrQHx+C+lHnf6pa1KxEoN1A0UxxVfGX6K4y5g4WQDO5zT4bLeubkWOXK0G51XSvACDOZVIyLdjApaOFTwamPcD3S1tfvuxRWWvsCD5ljFvb2kSmx5BIBNwN80MzuBmrGIC27XLGOxyMerwKxB6DskNUO9PflKHDPI61DRq0FTy1fv70SFMSiAtUv9aJRT41NQh9iJJ0vC8dl+xcxrWIjU1GG6+l/ZcRqVx9V1VuGQsLKndGhja7SQ+X1slHl76fRq223sMOql7MFCd0vvvxVQ2V39CcFKao/LB1aPH3VhODDEyxwx6aXoTznvC/QPepgWsHOWQzKj9ftsgDbsNiyFlXL4cu8DWUty6rQy8zT2b4O8b1xjcwSUCsy+auEjBamzQkMJFNlZAIUrukL/NbUhQU37TAbwsFyz7X0E/u/VMle/nBCNAzgkMwAUjiHM6FqrKKBRWFbPrSIixjfjkCnrMEPw=
+  file:
+    - ThinkPHP_Core.zip
+    - ThinkPHP_Full.zip
+  skip_cleanup: true
+  on:
+    tags: true
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 0000000..574a39c
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,32 @@
+
+ThinkPHP遵循Apache2开源协议发布，并提供免费使用。
+版权所有Copyright © 2006-2016 by ThinkPHP (http://thinkphp.cn)
+All rights reserved。
+ThinkPHP® 商标和著作权所有者为上海顶想信息科技有限公司。
+
+Apache Licence是著名的非盈利开源组织Apache采用的协议。
+该协议和BSD类似，鼓励代码共享和尊重原作者的著作权，
+允许代码修改，再作为开源或商业软件发布。需要满足
+的条件： 
+1． 需要给代码的用户一份Apache Licence ；
+2． 如果你修改了代码，需要在被修改的文件中说明；
+3． 在延伸的代码中（修改和有源代码衍生的代码中）需要
+带有原来代码中的协议，商标，专利声明和其他原来作者规
+定需要包含的说明；
+4． 如果再发布的产品中包含一个Notice文件，则在Notice文
+件中需要带有本协议内容。你可以在Notice中增加自己的
+许可，但不可以表现为对Apache Licence构成更改。 
+具体的协议参考：http://www.apache.org/licenses/LICENSE-2.0
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
+FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING,
+BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT
+LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGE.
diff --git a/README.md b/README.md
index 6c7552a..2c2b78e 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
-# sentos
-
+# sentos
+
 sentos以thinkphp+vue3.0+element-plus为基础开发的管理系统
\ No newline at end of file
diff --git a/app/.htaccess b/app/.htaccess
new file mode 100644
index 0000000..3418e55
--- /dev/null
+++ b/app/.htaccess
@@ -0,0 +1 @@
+deny from all
\ No newline at end of file
diff --git a/app/AppService.php b/app/AppService.php
new file mode 100644
index 0000000..96556e8
--- /dev/null
+++ b/app/AppService.php
@@ -0,0 +1,22 @@
+<?php
+declare (strict_types = 1);
+
+namespace app;
+
+use think\Service;
+
+/**
+ * 应用服务类
+ */
+class AppService extends Service
+{
+    public function register()
+    {
+        // 服务注册
+    }
+
+    public function boot()
+    {
+        // 服务启动
+    }
+}
diff --git a/app/BaseController.php b/app/BaseController.php
new file mode 100644
index 0000000..085680e
--- /dev/null
+++ b/app/BaseController.php
@@ -0,0 +1,94 @@
+<?php
+declare (strict_types = 1);
+
+namespace app;
+
+use think\App;
+use think\exception\ValidateException;
+use think\Validate;
+
+/**
+ * 控制器基础类
+ */
+abstract class BaseController
+{
+    /**
+     * Request实例
+     * @var \think\Request
+     */
+    protected $request;
+
+    /**
+     * 应用实例
+     * @var \think\App
+     */
+    protected $app;
+
+    /**
+     * 是否批量验证
+     * @var bool
+     */
+    protected $batchValidate = false;
+
+    /**
+     * 控制器中间件
+     * @var array
+     */
+    protected $middleware = [];
+
+    /**
+     * 构造方法
+     * @access public
+     * @param  App  $app  应用对象
+     */
+    public function __construct(App $app)
+    {
+        $this->app     = $app;
+        $this->request = $this->app->request;
+
+        // 控制器初始化
+        $this->initialize();
+    }
+
+    // 初始化
+    protected function initialize()
+    {}
+
+    /**
+     * 验证数据
+     * @access protected
+     * @param  array        $data     数据
+     * @param  string|array $validate 验证器名或者验证规则数组
+     * @param  array        $message  提示信息
+     * @param  bool         $batch    是否批量验证
+     * @return array|string|true
+     * @throws ValidateException
+     */
+    protected function validate(array $data, $validate, array $message = [], bool $batch = false)
+    {
+        if (is_array($validate)) {
+            $v = new Validate();
+            $v->rule($validate);
+        } else {
+            if (strpos($validate, '.')) {
+                // 支持场景
+                [$validate, $scene] = explode('.', $validate);
+            }
+            $class = false !== strpos($validate, '\\') ? $validate : $this->app->parseClass('validate', $validate);
+            $v     = new $class();
+            if (!empty($scene)) {
+                $v->scene($scene);
+            }
+        }
+
+        $v->message($message);
+
+        // 是否批量验证
+        if ($batch || $this->batchValidate) {
+            $v->batch(true);
+        }
+
+        return $v->failException(true)->check($data);
+    }
+
+}
diff --git a/app/ExceptionHandle.php b/app/ExceptionHandle.php
new file mode 100644
index 0000000..453d126
--- /dev/null
+++ b/app/ExceptionHandle.php
@@ -0,0 +1,58 @@
+<?php
+namespace app;
+
+use think\db\exception\DataNotFoundException;
+use think\db\exception\ModelNotFoundException;
+use think\exception\Handle;
+use think\exception\HttpException;
+use think\exception\HttpResponseException;
+use think\exception\ValidateException;
+use think\Response;
+use Throwable;
+
+/**
+ * 应用异常处理类
+ */
+class ExceptionHandle extends Handle
+{
+    /**
+     * 不需要记录信息（日志）的异常类列表
+     * @var array
+     */
+    protected $ignoreReport = [
+        HttpException::class,
+        HttpResponseException::class,
+        ModelNotFoundException::class,
+        DataNotFoundException::class,
+        ValidateException::class,
+    ];
+
+    /**
+     * 记录异常信息（包括日志或者其它方式记录）
+     *
+     * @access public
+     * @param  Throwable $exception
+     * @return void
+     */
+    public function report(Throwable $exception): void
+    {
+        // 使用内置的方式记录异常日志
+        parent::report($exception);
+    }
+
+    /**
+     * Render an exception into an HTTP response.
+     *
+     * @access public
+     * @param \think\Request   $request
+     * @param Throwable $e
+     * @return Response
+     */
+    public function render($request, Throwable $e): Response
+    {
+        // 添加自定义异常处理机制
+
+        // 其他错误交给系统处理
+        return parent::render($request, $e);
+    }
+}
diff --git a/app/Request.php b/app/Request.php
new file mode 100644
index 0000000..fc9aba0
--- /dev/null
+++ b/app/Request.php
@@ -0,0 +1,8 @@
+<?php
+namespace app;
+
+// 应用请求对象类
+class Request extends \think\Request
+{
+
+}
diff --git a/app/common.php b/app/common.php
new file mode 100644
index 0000000..57cb6d8
--- /dev/null
+++ b/app/common.php
@@ -0,0 +1,2 @@
+<?php
+// 应用公共文件
diff --git a/app/controller/Index.php b/app/controller/Index.php
new file mode 100644
index 0000000..81203ad
--- /dev/null
+++ b/app/controller/Index.php
@@ -0,0 +1,17 @@
+<?php
+namespace app\controller;
+
+use app\BaseController;
+
+class Index extends BaseController
+{
+    public function index()
+    {
+        return '<style type="text/css">*{ padding: 0; margin: 0; } div{ padding: 4px 48px;} a{color:#2E5CD5;cursor: pointer;text-decoration: none} a:hover{text-decoration:underline; } body{ background: #fff; font-family: "Century Gothic","Microsoft yahei"; color: #333;font-size:18px;} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.6em; font-size: 42px }</style><div style="padding: 24px 48px;"> <h1>:) </h1><p> ThinkPHP V' . \think\facade\App::version() . '<br/><span style="font-size:30px;">14载初心不改 - 你值得信赖的PHP框架</span></p><span style="font-size:25px;">[ V6.0 版本由 <a href="https://www.yisu.com/" target="yisu">亿速云</a> 独家赞助发布 ]</span></div><script type="text/javascript" src="https://tajs.qq.com/stats?sId=64890268" charset="UTF-8"></script><script type="text/javascript" src="https://e.topthink.com/Public/static/client.js"></script><think id="ee9b1aa918103c4fc"></think>';
+    }
+
+    public function hello($name = 'ThinkPHP6')
+    {
+        return 'hello,' . $name;
+    }
+}
diff --git a/app/event.php b/app/event.php
new file mode 100644
index 0000000..e9851bb
--- /dev/null
+++ b/app/event.php
@@ -0,0 +1,17 @@
+<?php
+// 事件定义文件
+return [
+    'bind'      => [
+    ],
+
+    'listen'    => [
+        'AppInit'  => [],
+        'HttpRun'  => [],
+        'HttpEnd'  => [],
+        'LogLevel' => [],
+        'LogWrite' => [],
+    ],
+
+    'subscribe' => [
+    ],
+];
diff --git a/app/middleware.php b/app/middleware.php
new file mode 100644
index 0000000..d2989de
--- /dev/null
+++ b/app/middleware.php
@@ -0,0 +1,6 @@
+<?php
+// 全局中间件定义文件
+return [
+	\app\middleware\Api::class,
+	\app\middleware\Validate::class,
+];
\ No newline at end of file
diff --git a/app/middleware/Api.php b/app/middleware/Api.php
new file mode 100644
index 0000000..9a3cbc6
--- /dev/null
+++ b/app/middleware/Api.php
@@ -0,0 +1,40 @@
+<?php
+// +----------------------------------------------------------------------
+// | SentCMS [ WE CAN DO IT JUST THINK IT ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2013 http://www.tensent.cn All rights reserved.
+// +----------------------------------------------------------------------
+// | Author: molong <molong@tensent.cn> <http://www.tensent.cn>
+// +----------------------------------------------------------------------
+declare (strict_types = 1);
+
+namespace app\middleware;
+
+class Api{
+	/**
+	 * 处理请求
+	 *
+	 * @param \think\Request $request
+	 * @param \Closure       $next
+	 * @return Response
+	 */
+	public function handle($request, \Closure $next){
+		$response = $next($request);
+
+		if (is_array($response->getData())) {
+			$this->data = array_merge($this->data, $response->getData());
+		} else {
+			$this->data = $response->getData();
+		}
+
+		if ($request->isAjax()) {
+			return json($this->data);
+		} else {
+			if (\is_string($this->data) && $this->data != '') {
+				return $response;
+			} else {
+				return json($this->data);
+			}
+		}
+	}
+}
diff --git a/app/middleware/Auth.php b/app/middleware/Auth.php
new file mode 100644
index 0000000..fd99400
--- /dev/null
+++ b/app/middleware/Auth.php
@@ -0,0 +1,24 @@
+<?php
+// +----------------------------------------------------------------------
+// | SentCMS [ WE CAN DO IT JUST THINK IT ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2013 http://www.tensent.cn All rights reserved.
+// +----------------------------------------------------------------------
+// | Author: molong <molong@tensent.cn> <http://www.tensent.cn>
+// +----------------------------------------------------------------------
+declare (strict_types = 1);
+
+namespace app\middleware;
+
+class Auth{
+	/**
+	 * 处理请求
+	 *
+	 * @param \think\Request $request
+	 * @param \Closure       $next
+	 * @return Response
+	 */
+	public function handle($request, \Closure $next){
+		//
+	}
+}
diff --git a/app/middleware/Validate.php b/app/middleware/Validate.php
new file mode 100644
index 0000000..277f11f
--- /dev/null
+++ b/app/middleware/Validate.php
@@ -0,0 +1,51 @@
+<?php
+// +----------------------------------------------------------------------
+// | SentCMS [ WE CAN DO IT JUST THINK IT ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2013 http://www.tensent.cn All rights reserved.
+// +----------------------------------------------------------------------
+// | Author: molong <molong@tensent.cn> <http://www.tensent.cn>
+// +----------------------------------------------------------------------
+declare (strict_types = 1);
+
+namespace app\middleware;
+use think\Response;
+
+class Validate {
+
+	/**
+	 * @param \think\Request $request
+	 * @param \Closure $next
+	 * @return mixed|\think\response\Json
+	 */
+	public function handle($request, \Closure $next) {
+		//获取当前参数
+		$params = $request->param();
+		//获取访问控制器
+		$controller = strtr($request->controller(), '.', '\\');
+
+		//获取操作名,用于验证场景scene
+		$scene = $request->action();
+		$validate = "\\app\\validate\\" . $controller;
+		//仅当验证器存在时 进行校验
+		if (class_exists($validate) && $request->isPost()) {
+			$v = new $validate;
+			//仅当存在验证场景才校验
+			if ($v->hasScene($scene)) {
+				//设置当前验证场景
+				$v->scene($scene);
+				if (!$v->check($params)) {
+					//校验不通过则直接返回错误信息
+					$data = array(
+						'msg' => $v->getError(),
+						'code' => 0,
+						'data' => '',
+						'time' => time(),
+					);
+					return Response::create($data, 'json', 200);
+				}
+			}
+		}
+		return $next($request);
+	}
+}
\ No newline at end of file
diff --git a/app/provider.php b/app/provider.php
new file mode 100644
index 0000000..73d99fa
--- /dev/null
+++ b/app/provider.php
@@ -0,0 +1,9 @@
+<?php
+use app\ExceptionHandle;
+use app\Request;
+
+// 容器Provider定义文件
+return [
+    'think\Request'          => Request::class,
+    'think\exception\Handle' => ExceptionHandle::class,
+];
diff --git a/app/service.php b/app/service.php
new file mode 100644
index 0000000..db1ee6a
--- /dev/null
+++ b/app/service.php
@@ -0,0 +1,9 @@
+<?php
+
+use app\AppService;
+
+// 系统服务定义文件
+// 服务在完成全局初始化之后执行
+return [
+    AppService::class,
+];
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..ff2a220
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,48 @@
+{
+    "name": "topthink/think",
+    "description": "the new thinkphp framework",
+    "type": "project",
+    "keywords": [
+        "framework",
+        "thinkphp",
+        "ORM"
+    ],
+    "homepage": "http://thinkphp.cn/",
+    "license": "Apache-2.0",
+    "authors": [
+        {
+            "name": "liu21st",
+            "email": "liu21st@gmail.com"
+        },
+        {
+            "name": "yunwuxin",
+            "email": "448901948@qq.com"
+        }        
+    ],
+    "require": {
+        "php": ">=7.2.5",
+        "topthink/framework": "^6.0.0",
+        "topthink/think-orm": "^2.0"
+    },
+    "require-dev": {
+        "symfony/var-dumper": "^4.2",
+        "topthink/think-trace":"^1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "app\\": "app"
+        },
+        "psr-0": {
+            "": "extend/"
+        }
+    },
+    "config": {
+        "preferred-install": "dist"
+    },
+    "scripts": {
+        "post-autoload-dump": [
+            "@php think service:discover",
+            "@php think vendor:publish"
+        ]
+    }
+}
diff --git a/composer.lock b/composer.lock
new file mode 100644
index 0000000..f5c84df
--- /dev/null
+++ b/composer.lock
@@ -0,0 +1,952 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "972d5f37c97d6a688bc084d56a25d074",
+    "packages": [
+        {
+            "name": "league/flysystem",
+            "version": "1.1.9",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/flysystem.git",
+                "reference": "094defdb4a7001845300334e7c1ee2335925ef99"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/league/flysystem/1.1.9/league-flysystem-1.1.9.zip",
+                "reference": "094defdb4a7001845300334e7c1ee2335925ef99",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "league/mime-type-detection": "^1.3",
+                "php": "^7.2.5 || ^8.0"
+            },
+            "conflict": {
+                "league/flysystem-sftp": "<1.0.6"
+            },
+            "require-dev": {
+                "phpspec/prophecy": "^1.11.1",
+                "phpunit/phpunit": "^8.5.8"
+            },
+            "suggest": {
+                "ext-ftp": "Allows you to use FTP server storage",
+                "ext-openssl": "Allows you to use FTPS server storage",
+                "league/flysystem-aws-s3-v2": "Allows you to use S3 storage with AWS SDK v2",
+                "league/flysystem-aws-s3-v3": "Allows you to use S3 storage with AWS SDK v3",
+                "league/flysystem-azure": "Allows you to use Windows Azure Blob storage",
+                "league/flysystem-cached-adapter": "Flysystem adapter decorator for metadata caching",
+                "league/flysystem-eventable-filesystem": "Allows you to use EventableFilesystem",
+                "league/flysystem-rackspace": "Allows you to use Rackspace Cloud Files",
+                "league/flysystem-sftp": "Allows you to use SFTP server storage via phpseclib",
+                "league/flysystem-webdav": "Allows you to use WebDAV storage",
+                "league/flysystem-ziparchive": "Allows you to use ZipArchive adapter",
+                "spatie/flysystem-dropbox": "Allows you to use Dropbox storage",
+                "srmklive/flysystem-dropbox-v2": "Allows you to use Dropbox storage for PHP 5 applications"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.1-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "League\\Flysystem\\": "src/"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Frank de Jonge",
+                    "email": "info@frenky.net"
+                }
+            ],
+            "description": "Filesystem abstraction: Many filesystems, one API.",
+            "keywords": [
+                "Cloud Files",
+                "WebDAV",
+                "abstraction",
+                "aws",
+                "cloud",
+                "copy.com",
+                "dropbox",
+                "file systems",
+                "files",
+                "filesystem",
+                "filesystems",
+                "ftp",
+                "rackspace",
+                "remote",
+                "s3",
+                "sftp",
+                "storage"
+            ],
+            "funding": [
+                {
+                    "url": "https://offset.earth/frankdejonge",
+                    "type": "other"
+                }
+            ],
+            "time": "2021-12-09T09:40:50+00:00"
+        },
+        {
+            "name": "league/flysystem-cached-adapter",
+            "version": "1.1.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/flysystem-cached-adapter.git",
+                "reference": "d1925efb2207ac4be3ad0c40b8277175f99ffaff"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/league/flysystem-cached-adapter/1.1.0/league-flysystem-cached-adapter-1.1.0.zip",
+                "reference": "d1925efb2207ac4be3ad0c40b8277175f99ffaff",
+                "shasum": ""
+            },
+            "require": {
+                "league/flysystem": "~1.0",
+                "psr/cache": "^1.0.0"
+            },
+            "require-dev": {
+                "mockery/mockery": "~0.9",
+                "phpspec/phpspec": "^3.4",
+                "phpunit/phpunit": "^5.7",
+                "predis/predis": "~1.0",
+                "tedivm/stash": "~0.12"
+            },
+            "suggest": {
+                "ext-phpredis": "Pure C implemented extension for PHP"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "League\\Flysystem\\Cached\\": "src/"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "frankdejonge",
+                    "email": "info@frenky.net"
+                }
+            ],
+            "description": "An adapter decorator to enable meta-data caching.",
+            "time": "2020-07-25T15:56:04+00:00"
+        },
+        {
+            "name": "league/mime-type-detection",
+            "version": "1.11.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/thephpleague/mime-type-detection.git",
+                "reference": "ff6248ea87a9f116e78edd6002e39e5128a0d4dd"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/league/mime-type-detection/1.11.0/league-mime-type-detection-1.11.0.zip",
+                "reference": "ff6248ea87a9f116e78edd6002e39e5128a0d4dd",
+                "shasum": ""
+            },
+            "require": {
+                "ext-fileinfo": "*",
+                "php": "^7.2 || ^8.0"
+            },
+            "require-dev": {
+                "friendsofphp/php-cs-fixer": "^3.2",
+                "phpstan/phpstan": "^0.12.68",
+                "phpunit/phpunit": "^8.5.8 || ^9.3"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "League\\MimeTypeDetection\\": "src"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Frank de Jonge",
+                    "email": "info@frankdejonge.nl"
+                }
+            ],
+            "description": "Mime-type detection for Flysystem",
+            "funding": [
+                {
+                    "url": "https://github.com/frankdejonge",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/league/flysystem",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-04-17T13:12:02+00:00"
+        },
+        {
+            "name": "psr/cache",
+            "version": "1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/cache.git",
+                "reference": "d11b50ad223250cf17b86e38383413f5a6764bf8"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/psr/cache/1.0.1/psr-cache-1.0.1.zip",
+                "reference": "d11b50ad223250cf17b86e38383413f5a6764bf8",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Cache\\": "src/"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for caching libraries",
+            "keywords": [
+                "cache",
+                "psr",
+                "psr-6"
+            ],
+            "time": "2016-08-06T20:24:11+00:00"
+        },
+        {
+            "name": "psr/container",
+            "version": "1.1.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/container.git",
+                "reference": "513e0666f7216c7459170d56df27dfcefe1689ea"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/psr/container/1.1.2/psr-container-1.1.2.zip",
+                "reference": "513e0666f7216c7459170d56df27dfcefe1689ea",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.4.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Container\\": "src/"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common Container Interface (PHP FIG PSR-11)",
+            "homepage": "https://github.com/php-fig/container",
+            "keywords": [
+                "PSR-11",
+                "container",
+                "container-interface",
+                "container-interop",
+                "psr"
+            ],
+            "time": "2021-11-05T16:50:12+00:00"
+        },
+        {
+            "name": "psr/http-message",
+            "version": "1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-message.git",
+                "reference": "f6561bf28d520154e4b0ec72be95418abe6d9363"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/psr/http-message/1.0.1/psr-http-message-1.0.1.zip",
+                "reference": "f6561bf28d520154e4b0ec72be95418abe6d9363",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Message\\": "src/"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for HTTP messages",
+            "homepage": "https://github.com/php-fig/http-message",
+            "keywords": [
+                "http",
+                "http-message",
+                "psr",
+                "psr-7",
+                "request",
+                "response"
+            ],
+            "time": "2016-08-06T14:39:51+00:00"
+        },
+        {
+            "name": "psr/log",
+            "version": "1.1.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/log.git",
+                "reference": "d49695b909c3b7628b6289db5479a1c204601f11"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/psr/log/1.1.4/psr-log-1.1.4.zip",
+                "reference": "d49695b909c3b7628b6289db5479a1c204601f11",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.1.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Log\\": "Psr/Log/"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "https://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for logging libraries",
+            "homepage": "https://github.com/php-fig/log",
+            "keywords": [
+                "log",
+                "psr",
+                "psr-3"
+            ],
+            "time": "2021-05-03T11:20:27+00:00"
+        },
+        {
+            "name": "psr/simple-cache",
+            "version": "1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/simple-cache.git",
+                "reference": "408d5eafb83c57f6365a3ca330ff23aa4a5fa39b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/psr/simple-cache/1.0.1/psr-simple-cache-1.0.1.zip",
+                "reference": "408d5eafb83c57f6365a3ca330ff23aa4a5fa39b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\SimpleCache\\": "src/"
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interfaces for simple caching",
+            "keywords": [
+                "cache",
+                "caching",
+                "psr",
+                "psr-16",
+                "simple-cache"
+            ],
+            "time": "2017-10-23T01:57:42+00:00"
+        },
+        {
+            "name": "topthink/framework",
+            "version": "v6.0.12",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/top-think/framework.git",
+                "reference": "e478316ac843c1a884a3b3a7a94db17c4001ff5c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/topthink/framework/v6.0.12/topthink-framework-v6.0.12.zip",
+                "reference": "e478316ac843c1a884a3b3a7a94db17c4001ff5c",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "ext-mbstring": "*",
+                "league/flysystem": "^1.1.4",
+                "league/flysystem-cached-adapter": "^1.0",
+                "php": ">=7.2.5",
+                "psr/container": "~1.0",
+                "psr/http-message": "^1.0",
+                "psr/log": "~1.0",
+                "psr/simple-cache": "^1.0",
+                "topthink/think-helper": "^3.1.1",
+                "topthink/think-orm": "^2.0"
+            },
+            "require-dev": {
+                "guzzlehttp/psr7": "^2.1.0",
+                "mikey179/vfsstream": "^1.6",
+                "mockery/mockery": "^1.2",
+                "phpunit/phpunit": "^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [],
+                "psr-4": {
+                    "think\\": "src/think/"
+                }
+            },
+            "license": [
+                "Apache-2.0"
+            ],
+            "authors": [
+                {
+                    "name": "liu21st",
+                    "email": "liu21st@gmail.com"
+                },
+                {
+                    "name": "yunwuxin",
+                    "email": "448901948@qq.com"
+                }
+            ],
+            "description": "The ThinkPHP Framework.",
+            "homepage": "http://thinkphp.cn/",
+            "keywords": [
+                "framework",
+                "orm",
+                "thinkphp"
+            ],
+            "time": "2022-01-21T06:31:07+00:00"
+        },
+        {
+            "name": "topthink/think-helper",
+            "version": "v3.1.6",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/top-think/think-helper.git",
+                "reference": "769acbe50a4274327162f9c68ec2e89a38eb2aff"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/topthink/think-helper/v3.1.6/topthink-think-helper-v3.1.6.zip",
+                "reference": "769acbe50a4274327162f9c68ec2e89a38eb2aff",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^9.5"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/helper.php"
+                ],
+                "psr-4": {
+                    "think\\": "src"
+                }
+            },
+            "license": [
+                "Apache-2.0"
+            ],
+            "authors": [
+                {
+                    "name": "yunwuxin",
+                    "email": "448901948@qq.com"
+                }
+            ],
+            "description": "The ThinkPHP6 Helper Package",
+            "time": "2021-12-15T04:27:55+00:00"
+        },
+        {
+            "name": "topthink/think-orm",
+            "version": "v2.0.53",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/top-think/think-orm.git",
+                "reference": "06783eda65547a70ea686360a897759e1f873fff"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/topthink/think-orm/v2.0.53/topthink-think-orm-v2.0.53.zip",
+                "reference": "06783eda65547a70ea686360a897759e1f873fff",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "ext-pdo": "*",
+                "php": ">=7.1.0",
+                "psr/log": "~1.0",
+                "psr/simple-cache": "^1.0",
+                "topthink/think-helper": "^3.1"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "^7|^8|^9.5"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "stubs/load_stubs.php"
+                ],
+                "psr-4": {
+                    "think\\": "src"
+                }
+            },
+            "license": [
+                "Apache-2.0"
+            ],
+            "authors": [
+                {
+                    "name": "liu21st",
+                    "email": "liu21st@gmail.com"
+                }
+            ],
+            "description": "think orm",
+            "keywords": [
+                "database",
+                "orm"
+            ],
+            "time": "2022-02-28T14:54:22+00:00"
+        }
+    ],
+    "packages-dev": [
+        {
+            "name": "symfony/polyfill-mbstring",
+            "version": "v1.25.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-mbstring.git",
+                "reference": "0abb51d2f102e00a4eefcf46ba7fec406d245825"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/symfony/polyfill-mbstring/v1.25.0/symfony-polyfill-mbstring-v1.25.0.zip",
+                "reference": "0abb51d2f102e00a4eefcf46ba7fec406d245825",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1"
+            },
+            "provide": {
+                "ext-mbstring": "*"
+            },
+            "suggest": {
+                "ext-mbstring": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "1.23-dev"
+                },
+                "thanks": {
+                    "name": "symfony/polyfill",
+                    "url": "https://github.com/symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Mbstring\\": ""
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for the Mbstring extension",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "mbstring",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2021-11-30T18:21:41+00:00"
+        },
+        {
+            "name": "symfony/polyfill-php72",
+            "version": "v1.25.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-php72.git",
+                "reference": "9a142215a36a3888e30d0a9eeea9766764e96976"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/symfony/polyfill-php72/v1.25.0/symfony-polyfill-php72-v1.25.0.zip",
+                "reference": "9a142215a36a3888e30d0a9eeea9766764e96976",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "1.23-dev"
+                },
+                "thanks": {
+                    "name": "symfony/polyfill",
+                    "url": "https://github.com/symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Php72\\": ""
+                }
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill backporting some PHP 7.2+ features to lower PHP versions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2021-05-27T09:17:38+00:00"
+        },
+        {
+            "name": "symfony/polyfill-php80",
+            "version": "v1.25.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-php80.git",
+                "reference": "4407588e0d3f1f52efb65fbe92babe41f37fe50c"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/symfony/polyfill-php80/v1.25.0/symfony-polyfill-php80-v1.25.0.zip",
+                "reference": "4407588e0d3f1f52efb65fbe92babe41f37fe50c",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "1.23-dev"
+                },
+                "thanks": {
+                    "name": "symfony/polyfill",
+                    "url": "https://github.com/symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Php80\\": ""
+                },
+                "classmap": [
+                    "Resources/stubs"
+                ]
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ion Bazan",
+                    "email": "ion.bazan@gmail.com"
+                },
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill backporting some PHP 8.0+ features to lower PHP versions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-03-04T08:16:47+00:00"
+        },
+        {
+            "name": "symfony/var-dumper",
+            "version": "v4.4.41",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/var-dumper.git",
+                "reference": "58eb36075c04aaf92a7a9f38ee9a8b97e24eb481"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/symfony/var-dumper/v4.4.41/symfony-var-dumper-v4.4.41.zip",
+                "reference": "58eb36075c04aaf92a7a9f38ee9a8b97e24eb481",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1.3",
+                "symfony/polyfill-mbstring": "~1.0",
+                "symfony/polyfill-php72": "~1.5",
+                "symfony/polyfill-php80": "^1.16"
+            },
+            "conflict": {
+                "phpunit/phpunit": "<4.8.35|<5.4.3,>=5.0",
+                "symfony/console": "<3.4"
+            },
+            "require-dev": {
+                "ext-iconv": "*",
+                "symfony/console": "^3.4|^4.0|^5.0",
+                "symfony/process": "^4.4|^5.0",
+                "twig/twig": "^1.43|^2.13|^3.0.4"
+            },
+            "suggest": {
+                "ext-iconv": "To convert non-UTF-8 strings to UTF-8 (or symfony/polyfill-iconv in case ext-iconv cannot be used).",
+                "ext-intl": "To show region name in time zone dump",
+                "symfony/console": "To use the ServerDumpCommand and/or the bin/var-dump-server script"
+            },
+            "bin": [
+                "Resources/bin/var-dump-server"
+            ],
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "Resources/functions/dump.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Component\\VarDumper\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides mechanisms for walking through any arbitrary PHP variable",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "debug",
+                "dump"
+            ],
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-04-25T21:15:06+00:00"
+        },
+        {
+            "name": "topthink/think-trace",
+            "version": "v1.4",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/top-think/think-trace.git",
+                "reference": "9a9fa8f767b6c66c5a133ad21ca1bc96ad329444"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://repo.huaweicloud.com/repository/php/topthink/think-trace/v1.4/topthink-think-trace-v1.4.zip",
+                "reference": "9a9fa8f767b6c66c5a133ad21ca1bc96ad329444",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1.0",
+                "topthink/framework": "^6.0.0"
+            },
+            "type": "library",
+            "extra": {
+                "think": {
+                    "services": [
+                        "think\\trace\\Service"
+                    ],
+                    "config": {
+                        "trace": "src/config.php"
+                    }
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "think\\trace\\": "src"
+                }
+            },
+            "license": [
+                "Apache-2.0"
+            ],
+            "authors": [
+                {
+                    "name": "liu21st",
+                    "email": "liu21st@gmail.com"
+                }
+            ],
+            "description": "thinkphp debug trace",
+            "time": "2020-06-29T05:27:28+00:00"
+        }
+    ],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": [],
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": {
+        "php": ">=7.2.5"
+    },
+    "platform-dev": [],
+    "plugin-api-version": "2.3.0"
+}
diff --git a/config/app.php b/config/app.php
new file mode 100644
index 0000000..4da285e
--- /dev/null
+++ b/config/app.php
@@ -0,0 +1,32 @@
+<?php
+// +----------------------------------------------------------------------
+// | 应用设置
+// +----------------------------------------------------------------------
+
+return [
+    // 应用地址
+    'app_host'         => env('app.host', ''),
+    // 应用的命名空间
+    'app_namespace'    => '',
+    // 是否启用路由
+    'with_route'       => true,
+    // 默认应用
+    'default_app'      => 'index',
+    // 默认时区
+    'default_timezone' => 'Asia/Shanghai',
+
+    // 应用映射（自动多应用模式有效）
+    'app_map'          => [],
+    // 域名绑定（自动多应用模式有效）
+    'domain_bind'      => [],
+    // 禁止URL访问的应用列表（自动多应用模式有效）
+    'deny_app_list'    => [],
+
+    // 异常页面的模板文件
+    'exception_tmpl'   => app()->getThinkPath() . 'tpl/think_exception.tpl',
+
+    // 错误显示信息,非调试模式有效
+    'error_message'    => '页面错误！请稍后再试～',
+    // 显示错误信息
+    'show_error_msg'   => false,
+];
diff --git a/config/cache.php b/config/cache.php
new file mode 100644
index 0000000..a8d69d2
--- /dev/null
+++ b/config/cache.php
@@ -0,0 +1,29 @@
+<?php
+
+// +----------------------------------------------------------------------
+// | 缓存设置
+// +----------------------------------------------------------------------
+
+return [
+    // 默认缓存驱动
+    'default' => env('cache.driver', 'file'),
+
+    // 缓存连接方式配置
+    'stores'  => [
+        'file' => [
+            // 驱动方式
+            'type'       => 'File',
+            // 缓存保存目录
+            'path'       => '',
+            // 缓存前缀
+            'prefix'     => '',
+            // 缓存有效期 0表示永久缓存
+            'expire'     => 0,
+            // 缓存标签前缀
+            'tag_prefix' => 'tag:',
+            // 序列化机制 例如 ['serialize', 'unserialize']
+            'serialize'  => [],
+        ],
+        // 更多的缓存连接
+    ],
+];
diff --git a/config/console.php b/config/console.php
new file mode 100644
index 0000000..a818a98
--- /dev/null
+++ b/config/console.php
@@ -0,0 +1,9 @@
+<?php
+// +----------------------------------------------------------------------
+// | 控制台配置
+// +----------------------------------------------------------------------
+return [
+    // 指令定义
+    'commands' => [
+    ],
+];
diff --git a/config/cookie.php b/config/cookie.php
new file mode 100644
index 0000000..d3b3aab
--- /dev/null
+++ b/config/cookie.php
@@ -0,0 +1,20 @@
+<?php
+// +----------------------------------------------------------------------
+// | Cookie设置
+// +----------------------------------------------------------------------
+return [
+    // cookie 保存时间
+    'expire'    => 0,
+    // cookie 保存路径
+    'path'      => '/',
+    // cookie 有效域名
+    'domain'    => '',
+    //  cookie 启用安全传输
+    'secure'    => false,
+    // httponly设置
+    'httponly'  => false,
+    // 是否使用 setcookie
+    'setcookie' => true,
+    // samesite 设置，支持 'strict' 'lax'
+    'samesite'  => '',
+];
diff --git a/config/database.php b/config/database.php
new file mode 100644
index 0000000..ba2ae8c
--- /dev/null
+++ b/config/database.php
@@ -0,0 +1,63 @@
+<?php
+
+return [
+    // 默认使用的数据库连接配置
+    'default'         => env('database.driver', 'mysql'),
+
+    // 自定义时间查询规则
+    'time_query_rule' => [],
+
+    // 自动写入时间戳字段
+    // true为自动识别类型 false关闭
+    // 字符串则明确指定时间字段类型 支持 int timestamp datetime date
+    'auto_timestamp'  => true,
+
+    // 时间字段取出后的默认时间格式
+    'datetime_format' => 'Y-m-d H:i:s',
+
+    // 时间字段配置 配置格式：create_time,update_time
+    'datetime_field'  => '',
+
+    // 数据库连接配置信息
+    'connections'     => [
+        'mysql' => [
+            // 数据库类型
+            'type'            => env('database.type', 'mysql'),
+            // 服务器地址
+            'hostname'        => env('database.hostname', '127.0.0.1'),
+            // 数据库名
+            'database'        => env('database.database', ''),
+            // 用户名
+            'username'        => env('database.username', 'root'),
+            // 密码
+            'password'        => env('database.password', ''),
+            // 端口
+            'hostport'        => env('database.hostport', '3306'),
+            // 数据库连接参数
+            'params'          => [],
+            // 数据库编码默认采用utf8
+            'charset'         => env('database.charset', 'utf8'),
+            // 数据库表前缀
+            'prefix'          => env('database.prefix', ''),
+
+            // 数据库部署方式:0 集中式(单一服务器),1 分布式(主从服务器)
+            'deploy'          => 0,
+            // 数据库读写是否分离 主从式有效
+            'rw_separate'     => false,
+            // 读写分离后 主服务器数量
+            'master_num'      => 1,
+            // 指定从服务器序号
+            'slave_no'        => '',
+            // 是否严格检查字段是否存在
+            'fields_strict'   => true,
+            // 是否需要断线重连
+            'break_reconnect' => false,
+            // 监听SQL
+            'trigger_sql'     => env('app_debug', true),
+            // 开启字段缓存
+            'fields_cache'    => false,
+        ],
+
+        // 更多的数据库配置信息
+    ],
+];
diff --git a/config/filesystem.php b/config/filesystem.php
new file mode 100644
index 0000000..965297e
--- /dev/null
+++ b/config/filesystem.php
@@ -0,0 +1,24 @@
+<?php
+
+return [
+    // 默认磁盘
+    'default' => env('filesystem.driver', 'local'),
+    // 磁盘列表
+    'disks'   => [
+        'local'  => [
+            'type' => 'local',
+            'root' => app()->getRuntimePath() . 'storage',
+        ],
+        'public' => [
+            // 磁盘类型
+            'type'       => 'local',
+            // 磁盘路径
+            'root'       => app()->getRootPath() . 'public/storage',
+            // 磁盘路径对应的外部URL路径
+            'url'        => '/storage',
+            // 可见性
+            'visibility' => 'public',
+        ],
+        // 更多的磁盘配置信息
+    ],
+];
diff --git a/config/lang.php b/config/lang.php
new file mode 100644
index 0000000..59f320f
--- /dev/null
+++ b/config/lang.php
@@ -0,0 +1,27 @@
+<?php
+// +----------------------------------------------------------------------
+// | 多语言设置
+// +----------------------------------------------------------------------
+
+return [
+    // 默认语言
+    'default_lang'    => env('lang.default_lang', 'zh-cn'),
+    // 允许的语言列表
+    'allow_lang_list' => [],
+    // 多语言自动侦测变量名
+    'detect_var'      => 'lang',
+    // 是否使用Cookie记录
+    'use_cookie'      => true,
+    // 多语言cookie变量
+    'cookie_var'      => 'think_lang',
+    // 多语言header变量
+    'header_var'      => 'think-lang',
+    // 扩展语言包
+    'extend_list'     => [],
+    // Accept-Language转义为对应语言包名称
+    'accept_language' => [
+        'zh-hans-cn' => 'zh-cn',
+    ],
+    // 是否支持语言分组
+    'allow_group'     => false,
+];
diff --git a/config/log.php b/config/log.php
new file mode 100644
index 0000000..ea24ff9
--- /dev/null
+++ b/config/log.php
@@ -0,0 +1,45 @@
+<?php
+
+// +----------------------------------------------------------------------
+// | 日志设置
+// +----------------------------------------------------------------------
+return [
+    // 默认日志记录通道
+    'default'      => env('log.channel', 'file'),
+    // 日志记录级别
+    'level'        => [],
+    // 日志类型记录的通道 ['error'=>'email',...]
+    'type_channel' => [],
+    // 关闭全局日志写入
+    'close'        => false,
+    // 全局日志处理 支持闭包
+    'processor'    => null,
+
+    // 日志通道列表
+    'channels'     => [
+        'file' => [
+            // 日志记录方式
+            'type'           => 'File',
+            // 日志保存目录
+            'path'           => '',
+            // 单文件日志写入
+            'single'         => false,
+            // 独立日志级别
+            'apart_level'    => [],
+            // 最大日志文件数量
+            'max_files'      => 0,
+            // 使用JSON格式记录
+            'json'           => false,
+            // 日志处理
+            'processor'      => null,
+            // 关闭通道日志写入
+            'close'          => false,
+            // 日志输出格式化
+            'format'         => '[%s][%s] %s',
+            // 是否实时写入
+            'realtime_write' => false,
+        ],
+        // 其它日志通道配置
+    ],
+
+];
diff --git a/config/middleware.php b/config/middleware.php
new file mode 100644
index 0000000..7e1972f
--- /dev/null
+++ b/config/middleware.php
@@ -0,0 +1,8 @@
+<?php
+// 中间件配置
+return [
+    // 别名或分组
+    'alias'    => [],
+    // 优先级设置，此数组中的中间件会按照数组中的顺序优先执行
+    'priority' => [],
+];
diff --git a/config/route.php b/config/route.php
new file mode 100644
index 0000000..53e9cc6
--- /dev/null
+++ b/config/route.php
@@ -0,0 +1,45 @@
+<?php
+// +----------------------------------------------------------------------
+// | 路由设置
+// +----------------------------------------------------------------------
+
+return [
+    // pathinfo分隔符
+    'pathinfo_depr'         => '/',
+    // URL伪静态后缀
+    'url_html_suffix'       => 'html',
+    // URL普通方式参数 用于自动生成
+    'url_common_param'      => true,
+    // 是否开启路由延迟解析
+    'url_lazy_route'        => false,
+    // 是否强制使用路由
+    'url_route_must'        => true,
+    // 合并路由规则
+    'route_rule_merge'      => false,
+    // 路由是否完全匹配
+    'route_complete_match'  => false,
+    // 访问控制器层名称
+    'controller_layer'      => 'controller',
+    // 空控制器名
+    'empty_controller'      => 'Error',
+    // 是否使用控制器后缀
+    'controller_suffix'     => false,
+    // 默认的路由变量规则
+    'default_route_pattern' => '[\w\.]+',
+    // 是否开启请求缓存 true自动缓存 支持设置请求缓存规则
+    'request_cache_key'     => false,
+    // 请求缓存有效期
+    'request_cache_expire'  => null,
+    // 全局请求缓存排除规则
+    'request_cache_except'  => [],
+    // 默认控制器名
+    'default_controller'    => 'Index',
+    // 默认操作名
+    'default_action'        => 'index',
+    // 操作方法后缀
+    'action_suffix'         => '',
+    // 默认JSONP格式返回的处理方法
+    'default_jsonp_handler' => 'jsonpReturn',
+    // 默认JSONP处理方法
+    'var_jsonp_handler'     => 'callback',
+];
diff --git a/config/session.php b/config/session.php
new file mode 100644
index 0000000..c1ef6e1
--- /dev/null
+++ b/config/session.php
@@ -0,0 +1,19 @@
+<?php
+// +----------------------------------------------------------------------
+// | 会话设置
+// +----------------------------------------------------------------------
+
+return [
+    // session name
+    'name'           => 'PHPSESSID',
+    // SESSION_ID的提交变量,解决flash上传跨域
+    'var_session_id' => '',
+    // 驱动方式 支持file cache
+    'type'           => 'file',
+    // 存储连接标识 当type使用cache的时候有效
+    'store'          => null,
+    // 过期时间
+    'expire'         => 1440,
+    // 前缀
+    'prefix'         => '',
+];
diff --git a/config/trace.php b/config/trace.php
new file mode 100644
index 0000000..fad2392
--- /dev/null
+++ b/config/trace.php
@@ -0,0 +1,10 @@
+<?php
+// +----------------------------------------------------------------------
+// | Trace设置 开启调试模式后有效
+// +----------------------------------------------------------------------
+return [
+    // 内置Html和Console两种方式 支持扩展
+    'type'    => 'Html',
+    // 读取的日志通道名
+    'channel' => '',
+];
diff --git a/config/view.php b/config/view.php
new file mode 100644
index 0000000..622e9a1
--- /dev/null
+++ b/config/view.php
@@ -0,0 +1,25 @@
+<?php
+// +----------------------------------------------------------------------
+// | 模板设置
+// +----------------------------------------------------------------------
+
+return [
+    // 模板引擎类型使用Think
+    'type'          => 'php',
+    // 默认模板渲染规则 1 解析为小写+下划线 2 全部转换小写 3 保持操作方法
+    'auto_rule'     => 1,
+    // 模板目录名
+    'view_dir_name' => 'view',
+    // 模板后缀
+    'view_suffix'   => 'html',
+    // 模板文件名分隔符
+    'view_depr'     => DIRECTORY_SEPARATOR,
+    // 模板引擎普通标签开始标记
+    'tpl_begin'     => '{',
+    // 模板引擎普通标签结束标记
+    'tpl_end'       => '}',
+    // 标签库标签开始标记
+    'taglib_begin'  => '{',
+    // 标签库标签结束标记
+    'taglib_end'    => '}',
+];
diff --git a/extend/.gitignore b/extend/.gitignore
new file mode 100644
index 0000000..c96a04f
--- /dev/null
+++ b/extend/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
\ No newline at end of file
diff --git a/public/.htaccess b/public/.htaccess
new file mode 100644
index 0000000..cbc7868
--- /dev/null
+++ b/public/.htaccess
@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  Options +FollowSymlinks -Multiviews
+  RewriteEngine On
+
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteRule ^(.*)$ index.php/$1 [QSA,PT,L]
+</IfModule>
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..e71815a
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.php b/public/index.php
new file mode 100644
index 0000000..e3c0fe9
--- /dev/null
+++ b/public/index.php
@@ -0,0 +1,24 @@
+<?php
+// +----------------------------------------------------------------------
+// | ThinkPHP [ WE CAN DO IT JUST THINK ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2006-2019 http://thinkphp.cn All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+// +----------------------------------------------------------------------
+// | Author: liu21st <liu21st@gmail.com>
+// +----------------------------------------------------------------------
+
+// [ 应用入口文件 ]
+namespace think;
+
+require __DIR__ . '/../vendor/autoload.php';
+
+// 执行HTTP应用并响应
+$http = (new App())->http;
+
+$response = $http->run();
+
+$response->send();
+
+$http->end($response);
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..eb05362
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/public/router.php b/public/router.php
new file mode 100644
index 0000000..9b39a62
--- /dev/null
+++ b/public/router.php
@@ -0,0 +1,19 @@
+<?php
+// +----------------------------------------------------------------------
+// | ThinkPHP [ WE CAN DO IT JUST THINK ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2006~2019 http://thinkphp.cn All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+// +----------------------------------------------------------------------
+// | Author: liu21st <liu21st@gmail.com>
+// +----------------------------------------------------------------------
+// $Id$
+
+if (is_file($_SERVER["DOCUMENT_ROOT"] . $_SERVER["SCRIPT_NAME"])) {
+    return false;
+} else {
+    $_SERVER["SCRIPT_FILENAME"] = __DIR__ . '/index.php';
+
+    require __DIR__ . "/index.php";
+}
diff --git a/public/static/.gitignore b/public/static/.gitignore
new file mode 100644
index 0000000..c96a04f
--- /dev/null
+++ b/public/static/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
\ No newline at end of file
diff --git a/route/app.php b/route/app.php
new file mode 100644
index 0000000..1c4d87d
--- /dev/null
+++ b/route/app.php
@@ -0,0 +1,19 @@
+<?php
+// +----------------------------------------------------------------------
+// | ThinkPHP [ WE CAN DO IT JUST THINK ]
+// +----------------------------------------------------------------------
+// | Copyright (c) 2006~2018 http://thinkphp.cn All rights reserved.
+// +----------------------------------------------------------------------
+// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
+// +----------------------------------------------------------------------
+// | Author: liu21st <liu21st@gmail.com>
+// +----------------------------------------------------------------------
+use think\facade\Route;
+
+Route::rule('/', function(){
+	if(request()->isAjax()){
+		return ['code' => 1, 'data' => 'SentOS'];
+	}else{
+		return view('index');
+	}
+});
\ No newline at end of file
diff --git a/runtime/.gitignore b/runtime/.gitignore
new file mode 100644
index 0000000..c96a04f
--- /dev/null
+++ b/runtime/.gitignore
@@ -0,0 +1,2 @@
+*
+!.gitignore
\ No newline at end of file
diff --git a/think b/think
new file mode 100644
index 0000000..2429d22
--- /dev/null
+++ b/think
@@ -0,0 +1,10 @@
+#!/usr/bin/env php
+<?php
+namespace think;
+
+// 命令行入口文件
+// 加载基础文件
+require __DIR__ . '/vendor/autoload.php';
+
+// 应用初始化
+(new App())->console->run();
\ No newline at end of file
diff --git a/ui/.editorconfig b/ui/.editorconfig
new file mode 100644
index 0000000..4e1edd1
--- /dev/null
+++ b/ui/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/ui/.gitignore b/ui/.gitignore
new file mode 100644
index 0000000..2bdd9d9
--- /dev/null
+++ b/ui/.gitignore
@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+/package-lock.json
diff --git a/ui/LICENSE b/ui/LICENSE
new file mode 100644
index 0000000..f7c1e1f
--- /dev/null
+++ b/ui/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 sakuya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/ui/README.md b/ui/README.md
new file mode 100644
index 0000000..2d87a44
--- /dev/null
+++ b/ui/README.md
@@ -0,0 +1,65 @@
+
+<div align="center">
+
+![logo](https://lolicode.gitee.io/scui-doc/logo.png)
+
+<p align="center">
+	<a href="https://v3.vuejs.org/" target="_blank">
+		<img src="https://img.shields.io/badge/vue.js-3.x-green" alt="vue">
+	</a>
+	<a href="https://element-plus.gitee.io/#/zh-CN/component/changelog" target="_blank">
+		<img src="https://img.shields.io/badge/element--plus-latest-blue" alt="element plus">
+	</a>
+</p>
+
+<h1>SCUI Admin</h1>
+
+</div>
+
+## 介绍
+SCUI 是一个中后台前端解决方案，基于VUE3和elementPlus实现。
+使用最新的前端技术栈，提供各类实用的组件方便在业务开发时的调用，并且持续性的提供丰富的业务模板帮助你快速搭建企业级中后台前端任务。
+
+SCUI的宗旨是 让一切复杂的东西傻瓜化。
+
+![logo](https://lolicode.gitee.io/scui-doc/g_1.jpg)
+
+## 特点
+- **组件** 多个独家组件、业务模板和代码生成器
+- **权限** 完整的鉴权体系和高精度权限控制
+- **布局** 提供多套布局模式，满足各种视觉需求
+- **API** 完善的API管理，使用真实网络MOCK
+- **配置** 统一的全局配置和组件配置，支持build后配置热更新
+- **性能** 在减少带宽请求和前端算力上多次优化，并且持续着
+- **其他** 多功能视图标签、动态权限菜单、控制台组态化、统一异常处理等等
+
+## 演示和文档
+
+- <a href="https://lolicode.gitee.io/scui-doc/demo/#/login" target="_blank">演示</a>
+- <a href="https://lolicode.gitee.io/scui-doc/" target="_blank">文档</a>
+
+## 部分截图
+
+![logo](https://lolicode.gitee.io/scui-doc/g_2.jpg)
+
+## 安装教程
+``` sh
+# 克隆项目
+git clone https://gitee.com/lolicode/scui.git
+
+# 进入项目目录
+cd scui
+
+# 安装依赖
+npm i
+
+# 启动项目(开发模式)
+npm run serve
+```
+启动完成后浏览器访问 http://localhost:2800
+
+## 感谢
+![fastmock](https://www.fastmock.site/resource/images/logo.png)
+
+## 支持
+如果觉得本项目还不错或在工作中有所启发，请在Gitee(码云)帮开发者点亮星星，这是对开发者最大的支持和鼓励！
diff --git a/ui/babel.config.js b/ui/babel.config.js
new file mode 100644
index 0000000..e955840
--- /dev/null
+++ b/ui/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/ui/package.json b/ui/package.json
new file mode 100644
index 0000000..3cfad77
--- /dev/null
+++ b/ui/package.json
@@ -0,0 +1,69 @@
+{
+	"name": "scui",
+	"version": "1.5.0",
+	"private": true,
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "vue-cli-service build --report",
+		"lint": "vue-cli-service lint"
+	},
+	"dependencies": {
+		"@element-plus/icons": "0.0.11",
+		"@tinymce/tinymce-vue": "4.0.5",
+		"axios": "0.25.0",
+		"core-js": "3.21.0",
+		"cropperjs": "1.5.12",
+		"crypto-js": "4.1.1",
+		"echarts": "5.3.0",
+		"element-plus": "2.0.2",
+		"nprogress": "0.2.0",
+		"qrcodejs2": "0.0.2",
+		"sortablejs": "1.14.0",
+		"tinymce": "5.10.2",
+		"vue": "3.2.30",
+		"vue-i18n": "9.1.9",
+		"vue-router": "4.0.12",
+		"vuedraggable": "4.0.3",
+		"vuex": "4.0.2",
+		"xgplayer": "2.31.4",
+		"xgplayer-hls": "2.5.1"
+	},
+	"devDependencies": {
+		"@vue/cli-plugin-babel": "4.5.15",
+		"@vue/cli-plugin-eslint": "4.5.15",
+		"@vue/cli-service": "4.5.15",
+		"@vue/compiler-sfc": "3.2.30",
+		"babel-eslint": "10.1.0",
+		"eslint": "6.8.0",
+		"eslint-plugin-vue": "7.19.1",
+		"sass": "1.37.5",
+		"sass-loader": "10.1.1"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"globals": {
+			"APP_CONFIG": true
+		},
+		"extends": [
+			"plugin:vue/vue3-essential",
+			"eslint:recommended"
+		],
+		"parserOptions": {
+			"parser": "babel-eslint"
+		},
+		"rules": {
+			"indent": 0,
+			"no-tabs": 0,
+			"no-mixed-spaces-and-tabs": 0,
+			"vue/no-unused-components": "off"
+		}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not dead"
+	]
+}
diff --git a/ui/public/code/list/index.vue b/ui/public/code/list/index.vue
new file mode 100644
index 0000000..6576c71
--- /dev/null
+++ b/ui/public/code/list/index.vue
@@ -0,0 +1,166 @@
+<!--
+ * @Descripttion: 此文件由SCUI生成，典型的VUE增删改列表页面组件
+ * @version: 1.0
+ * @Author: SCUI AutoCode 模板版本 1.0.0-beta.1
+ * @Date: <%= createDate %>
+ * @LastEditors: (最后更新作者)
+ * @LastEditTime: (最后更新时间)
+-->
+
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
+			</div>
+			<div class="right-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="关键词搜索" clearable></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="<%= base.rowKey %>" @selection-change="selectionChange">
+
+				<el-table-column type="selection" width="50"></el-table-column>
+				<% column.forEach(function(item, index){ %>
+				<el-table-column label="<%= item.label %>" prop="<%= item.prop %>" width="<%= item.width %>"></el-table-column>
+				<% })%>
+				<el-table-column label="操作" fixed="right" align="right" width="140">
+					<template #default="scope">
+						<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
+						<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+						<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+							<template #reference>
+								<el-button type="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<el-dialog :title="titleMap[saveMode]" v-model="saveDialogVisible" :width="500" destroy-on-close>
+		<save-dialog ref="saveDialog" :mode="saveMode"></save-dialog>
+		<template #footer>
+			<el-button @click="saveDialogVisible=false" >取 消</el-button>
+			<el-button v-if="saveMode!='show'" type="primary" @click="saveForm()" :loading="isSaveing">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	import saveDialog from './save'
+
+	export default {
+		name: '<%= base.name %>',
+		components: {
+			saveDialog
+		},
+		data() {
+			return {
+				apiObj: this.$API.<%= api.list %>,
+				selection: [],
+				search: {
+					keyword: ""
+				},
+				saveDialogVisible: false,
+				saveMode: 'add',
+				titleMap: {
+					add: "新增",
+					edit: "编辑",
+					show: "查看"
+				},
+				isSaveing: false,
+			}
+		},
+		mounted(){
+
+		},
+		methods: {
+			//添加
+			add(){
+				this.saveMode = 'add';
+				this.saveDialogVisible = true;
+			},
+			//编辑
+			table_edit(row){
+				this.saveMode = 'edit';
+				this.saveDialogVisible = true;
+				this.$nextTick(() => {
+					//这里可以再次根据ID查询详情接口
+					this.$refs.saveDialog.setData(row)
+				})
+			},
+			//查看
+			table_show(row){
+				this.saveMode = 'show';
+				this.saveDialogVisible = true;
+				this.$nextTick(() => {
+					//这里可以再次根据ID查询详情接口
+					this.$refs.saveDialog.setData(row)
+				})
+			},
+			//删除
+			async table_del(row, index){
+				var reqData = {id: row.id}
+				var res = await this.$API.<%= api.del %>.post(reqData);
+				if(res.code == 200){
+					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+					this.$refs.table.tableData.splice(index, 1);
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//提交
+			saveForm(){
+				this.$refs.saveDialog.submit(async (formData) => {
+					this.isSaveing = true;
+					var res = await this.$API.<%= api.save %>.post(formData);
+					this.isSaveing = false;
+					if(res.code == 200){
+						//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+						this.saveDialogVisible = false;
+						this.$message.success("操作成功")
+					}else{
+						this.$alert(res.message, "提示", {type: 'error'})
+					}
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//搜索
+			upsearch(){
+
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/public/code/list/save.vue b/ui/public/code/list/save.vue
new file mode 100644
index 0000000..a83f745
--- /dev/null
+++ b/ui/public/code/list/save.vue
@@ -0,0 +1,72 @@
+<!--
+ * @Descripttion: 此文件由SCUI生成，典型的VUE增删改列表页面组件
+ * @version: 1.0
+ * @Author: SCUI AutoCode 模板版本 1.0.0-beta.1
+ * @Date: <%= createDate %>
+ * @LastEditors: (最后更新作者)
+ * @LastEditTime: (最后更新时间)
+-->
+
+<template>
+	<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
+		<% column.forEach(function(item, index){ %>
+		<el-form-item label="<%= item.label %>" prop="<%= item.prop %>">
+			<el-input v-model="form.<%= item.prop %>" clearable></el-input>
+		</el-form-item>
+		<% })%>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		props: {
+			mode: { type: String, default: "add" }
+		},
+		data() {
+			return {
+				//表单数据
+				form: {
+					<%= base.rowKey %>:"",
+					<% column.forEach(function(item, index){ %>
+					<%= item.prop %>: "",
+					<% })%>
+				},
+				//验证规则
+				rules: {
+					<% column.forEach(function(item, index){ %>
+					<%= item.prop %>: [
+						{required: true, message: '请输入<%= item.label %>'}
+					],
+					<% })%>
+				},
+			}
+		},
+		mounted(){
+
+		},
+		methods: {
+			//表单提交方法
+			submit(callback){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						callback(this.form)
+					}else{
+						return false;
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.<%= base.rowKey %> = data.<%= base.rowKey %>
+				<% column.forEach(function(item, index){ %>
+				this.form.<%= item.prop %> = data.<%= item.prop %>
+				<% })%>
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/public/config.js b/ui/public/config.js
new file mode 100644
index 0000000..6ab642a
--- /dev/null
+++ b/ui/public/config.js
@@ -0,0 +1,11 @@
+
+// 此文件非必要，在生产环境下此文件配置可覆盖运行配置，开发环境下不起效
+// 详情见 src/config/index.js
+
+const APP_CONFIG = {
+	//标题
+	APP_NAME: "SCUI",
+
+	//接口地址，如遇跨域需使用nginx代理
+	API_URL: "https://www.fastmock.site/mock/5039c4361c39a7e3252c5b55971f1bd3/api"
+}
diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
new file mode 100644
index 0000000..23156d8
Binary files /dev/null and b/ui/public/favicon.ico differ
diff --git a/ui/public/img/auth_banner.jpg b/ui/public/img/auth_banner.jpg
new file mode 100644
index 0000000..449b0ad
Binary files /dev/null and b/ui/public/img/auth_banner.jpg differ
diff --git a/ui/public/img/avatar.jpg b/ui/public/img/avatar.jpg
new file mode 100644
index 0000000..b8a3cf3
Binary files /dev/null and b/ui/public/img/avatar.jpg differ
diff --git a/ui/public/img/avatar2.gif b/ui/public/img/avatar2.gif
new file mode 100644
index 0000000..6fade97
Binary files /dev/null and b/ui/public/img/avatar2.gif differ
diff --git a/ui/public/img/avatar3.gif b/ui/public/img/avatar3.gif
new file mode 100644
index 0000000..495fe43
Binary files /dev/null and b/ui/public/img/avatar3.gif differ
diff --git a/ui/public/img/loginbg.svg b/ui/public/img/loginbg.svg
new file mode 100644
index 0000000..5f81c5b
--- /dev/null
+++ b/ui/public/img/loginbg.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 126 126" id="Layer_1" version="1.1" viewBox="0 0 126 126" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M105.732,60.8495c-1.4921,0.2172-15.6579-4.4239-17.1594-10.7702   c-1.5016-6.355-12.8343-12.9697-17.66-11.336c-4.8257,1.6337-11.1529-0.1134-11.1529-0.1134l-3.9852-1.9265l-0.9066-0.4344h-0.0095   L4.4873,65.3524c-4.642,2.6802-4.6517,9.377-0.0175,12.0707l50.2207,29.1911c4.3216,2.5119,9.6569,2.5196,13.9857,0.0202   l52.0806-30.0712c1.6526-0.9536,3.0314-2.3701,3.7491-4.1362C128.4911,62.6814,107.1013,60.6604,105.732,60.8495z" fill="#F3F6FD"/><path d="M100.67,80.8445v1.2505c0,0.1431-0.0987,0.2963-0.3072,0.4174l-3.3797,1.9636l-0.7132,0.4174l-9.294,5.3985   c-0.395,0.2304-1.0424,0.2304-1.4484,0l-10.1169-5.8373c-0.1975-0.1211-0.3073-0.2743-0.3073-0.4281l0.011-1.2398   c0,0.1532,0.0988,0.307,0.2963,0.4168l10.1169,5.8486c0.406,0.2304,1.0534,0.2304,1.4484,0l9.3049-5.4098l0.7023-0.4061   l3.3906-1.9749C100.5713,81.1515,100.67,80.9977,100.67,80.8445z" fill="#E1E9F4"/><polygon fill="#E1E9F4" points="85.6794,72.3863 92.0128,83.2787 94.4967,81.9901 92.7766,64.0137 85.567,67.9247  "/><path d="M91.1662,67.5281l-0.0056,1.8438c0,0.2748-0.1793,0.5435-0.5437,0.7567l-20.593,11.9669   c-0.7287,0.4204-1.9113,0.4204-2.64,0L32.3412,61.8666c-0.37-0.2129-0.5493-0.4932-0.5493-0.7734l0.0056-1.838   c0,0.2745,0.1849,0.5548,0.5549,0.7677l35.0372,20.2288c0.7342,0.4258,1.9169,0.4258,2.64,0l20.5986-11.9669   C90.9869,68.0774,91.1662,67.8029,91.1662,67.5281z" fill="#E1E9F4"/><path d="M39.7085,97.3905c0.0214-0.0088,0.0422-0.0264,0.0417-0.0352c0.8999-0.7026,1.2069-2.4688,1.4067-3.3125   c0.0692-0.2988,3.7335-2.7769,3.7335-2.7769c0.0099-0.0176,0.0192-0.0439,0.0071-0.0615c0.5302,0.0562,1.3577-0.1017,1.4139-0.2021   c1.1079,0.6588,1.382,1.0317,1.5334,0.835c1.0784-1.5083,1.4463-1.6887,1.2134-1.8364c-3.1795-1.9828-3.3134-2.2802-3.4655-2.083   c-1.0844,1.5039-1.4572,1.6887-1.2243,1.8364l0.6517,0.4219c-0.3084,0.1582-0.6036,0.3521-0.7227,0.5537   c-0.0341-0.0176-0.0566-0.0264-0.09-0.0352l-3.0062,1.415c0.134-0.4922,0.2723-0.9141,0.3749-1.2041   c0,0,1.321-2.3989,1.0378-5.0088c-0.0312-0.3252,0.0133-0.668,0.1132-1.0015c0.2437-0.8438,0.9568-3.4888,1.3312-4.5259   c0.6611-0.1318,1.2981-0.2988,1.4078-0.2988c0.2524,0,0.5152-0.0083,0.7538-0.0527c0.5097-0.0962,1.3635-0.3076,1.6806-0.6763   c0,0,0.3364-0.4131-1.0171-0.4746c-1.3633-0.0439-1.8539,0.1846-3.0619-0.5361l-1.4556,0.4136c0,0-0.2114,0.4829-0.1033,0.9839   c0.0016,0.0264,0.0038,0.0615,0.0291,0.1143c0.0016,0.0264,0.0137,0.0439,0.0154,0.0703l0.0005,0.0088   c-3.0387,5.3425-2.1934,6.2035-4.6452,8.2246c-0.94-2.5981-1.2099-0.3663-1.1845-9.3315c0.2155-0.0262,0.4782-0.0299,0.728-0.1147   c0.3868-0.1318,1.0403-0.3867,1.3449-0.7817c0,0,0.3238-0.4395-0.6303-0.4307c-0.975,0.0259-1.3755,0.29-2.087-0.3867   l-1.1319,0.5005c0,0-0.2542,0.5015-0.2664,1.0107c-0.0093,0.0264-0.0076,0.0532-0.0043,0.1055c0,0,0,0,0.0005,0.0088   c-1.6273,4.9385-0.3361,4.5351-0.5772,6.4146c-0.0704,0.6328,0.118,2.7769-0.2996,3.4712   c-0.6075,0.9927-0.2862,2.2759,0.033,2.9961c-0.1005,0.1499-0.1339,0.3169-0.0994,0.519c0.0288,0.1775-0.4219,1.8012-0.4504,1.9014   l6.232,3.6221c0.1215-0.0537,0.2418-0.106,0.3452-0.1724C39.6466,97.4525,39.6887,97.4257,39.7085,97.3905z" fill="#E1E9F4"/><path d="M1.0521,70.5599l26.1662,15.2075l9.26-5.3462L7.5291,63.5964l0.5565-0.3214l28.9489,16.8253l9.3454-5.396   L17.4303,57.8794l0.3959-0.2286l28.9494,16.8248l9.4255-5.4415L27.2517,52.2088l0.3907-0.2256L56.592,68.8085l9.3403-5.393   L36.9826,46.5902l0.5561-0.321l28.9497,16.8253l9.2651-5.3492L46.8037,40.9196l0.5568-0.3214l67.8776,39.1516l-0.5568,0.3214   L76.1917,57.9999l-9.2651,5.3492l38.4901,22.0714l-0.556,0.321L66.3703,63.67L37.4725,80.3544l38.4911,22.0722l-0.556,0.321   L36.9163,80.6754l-9.26,5.3466l38.1274,21.8636c-0.2482,0.0758-0.4973,0.146-0.7484,0.2077L1.0137,71.167   C1.0202,70.9639,1.0284,70.7612,1.0521,70.5599z" fill="#FDFEFF"/><g><path d="M91.5267,37.9111L56.4839,17.6768c-0.3699-0.2132-0.7062-0.2299-0.9416-0.0898l-0.8343,0.4776    c0.241-0.1347,0.5717-0.1177,0.9417,0.0952l0.6894,0.3925l-0.695,1.121l-0.0673,23.827l35.0484,20.2343    c0,0,1.1714,1.4741,0.936,1.6084l0.8287-0.4828c0.2354-0.1347,0.3867-0.4319,0.3867-0.8465l0.0673-23.8215    C92.8438,39.3572,92.2554,38.3314,91.5267,37.9111z" fill="#6262AA"/><g><g enable-background="new    "><g><path d="M90.693,38.3914c0.73,0.4215,1.3221,1.4471,1.3198,2.286l-0.0675,23.8174       c-0.0024,0.8431-0.5984,1.1785-1.3284,0.7571l-35.042-20.2315c-0.7336-0.4235-1.3222-1.4429-1.3198-2.286l0.0675-23.8174       c0.0024-0.8389,0.5948-1.1806,1.3284-0.7571L90.693,38.3914z" fill="#2A2A5E"/></g></g></g><g><polygon fill="#3887E5" points="90.6923,39.9109 90.6247,63.7366 55.5756,43.5009 55.6431,19.6753    "/></g></g><g><g><g enable-background="new    "><g><path d="M91.1662,66.0198l-0.0056,1.846c0,0.2748-0.1793,0.5438-0.5437,0.7567l-20.593,11.9669       c-0.7287,0.4204-1.9113,0.4204-2.64,0L32.3412,60.3608c-0.37-0.2132-0.5493-0.4935-0.5493-0.7737l0.0056-1.8403       c0-0.2748,0.1849-0.555,0.5437-0.7625l20.5986-11.9668c0.7231-0.4259,1.9057-0.4204,2.6343,0l35.0428,20.2343       C90.9812,65.4648,91.1662,65.7395,91.1662,66.0198z" fill="#83A1CC"/></g></g></g><g><g><g enable-background="new    "><g><path d="M91.1662,66.0198l-0.0056,1.8438c0,0.2748-0.1793,0.5435-0.5437,0.7567l-20.593,11.9668        c-0.7287,0.4204-1.9113,0.4204-2.64,0L32.3412,60.3583c-0.37-0.2129-0.5493-0.4932-0.5493-0.7734l0.0056-1.838        c0,0.2745,0.1849,0.5548,0.5549,0.7677l35.0372,20.2288c0.7342,0.4258,1.9169,0.4258,2.64,0l20.5986-11.9669        C90.9869,66.5691,91.1662,66.2946,91.1662,66.0198z" fill="#9EB5DF"/></g><g><path d="M90.6159,65.2493c0.7301,0.4215,0.7375,1.1054,0.0123,1.5269L70.0318,78.7455        c-0.7253,0.4215-1.9096,0.4215-2.6396,0L32.3501,58.514c-0.7301-0.4215-0.7339-1.1075-0.0086-1.529l20.5964-11.9693        c0.7253-0.4215,1.9059-0.4194,2.636,0.0021L90.6159,65.2493z" fill="#DEE7F8"/></g></g></g><path d="M64.5983,66.8772l-11.1346-6.4286c-0.2328-0.1341-0.6091-0.1363-0.8402-0.0022l-5.4231,3.1515     c-0.2313,0.1344-0.2263,0.3525,0.0064,0.4869l11.1346,6.4286c0.2326,0.1344,0.6053,0.1344,0.8366,0l5.423-3.1515     C64.8322,67.2276,64.8309,67.0116,64.5983,66.8772z" fill="#B6CBEA"/></g></g><g><polygon fill="#3A3A77" points="61.1986,50.6546 60.4318,51.1002 58.9775,50.2605 59.7443,49.8149   "/></g><g><polygon fill="#3A3A77" points="59.4055,49.6194 58.6388,50.065 57.1857,49.226 57.9525,48.7804   "/></g><g><polygon fill="#3A3A77" points="58.2959,50.2642 56.9267,51.0599 55.4736,50.221 56.8428,49.4253   "/></g><g><polygon fill="#3A3A77" points="66.4593,56.9697 65.0914,57.7646 63.6384,56.9257 65.0062,56.1308   "/></g><g><polygon fill="#3A3A77" points="57.1984,55.6046 55.8293,56.4003 54.3762,55.5613 55.7453,54.7657   "/></g><g><polygon fill="#3A3A77" points="51.8938,54.5329 50.5247,55.3285 48.5985,54.2164 49.9676,53.4208   "/></g><g><polygon fill="#3A3A77" points="53.6869,55.5681 52.3178,56.3637 50.8647,55.5248 52.2338,54.7292   "/></g><g><polygon fill="#3A3A77" points="55.4799,56.6033 54.1108,57.3989 52.6578,56.56 54.0269,55.7644   "/></g><g><polygon fill="#3A3A77" points="57.273,57.6385 55.9039,58.4342 54.4508,57.5952 55.8199,56.7996   "/></g><g enable-background="new    "><g><polygon fill="#3A3A77" points="60.0889,51.2995 58.7198,52.0951 57.2654,51.2555 58.6346,50.4598    "/></g><g><polygon fill="#3A3A77" points="57.4952,51.7943 56.1274,52.5893 53.7552,51.2197 55.123,50.4247    "/></g><g><polygon fill="#3A3A77" points="61.882,52.3347 60.5128,53.1304 59.0585,52.2907 60.4276,51.495    "/></g><g><polygon fill="#3A3A77" points="59.2883,52.8296 57.9205,53.6245 56.4661,52.7848 57.8339,51.9899    "/></g><g><polygon fill="#3A3A77" points="56.2137,53.0453 54.8446,53.8409 52.0354,52.219 53.4045,51.4234    "/></g><g><polygon fill="#3A3A77" points="63.6738,53.3692 62.3046,54.1648 60.8515,53.3259 62.2207,52.5302    "/></g><g><polygon fill="#3A3A77" points="66.5765,53.7595 65.8097,54.2051 64.3567,53.3662 65.1234,52.9206    "/></g><g><polygon fill="#3A3A77" points="61.0801,53.8641 59.7122,54.659 58.2592,53.82 59.627,53.0251    "/></g><g><polygon fill="#3A3A77" points="58.0068,54.0805 56.6377,54.8762 55.1833,54.0365 56.5524,53.2408    "/></g><g><polygon fill="#3A3A77" points="65.4668,54.4044 64.0977,55.2001 62.6446,54.3611 64.0138,53.5655    "/></g><g><polygon fill="#3A3A77" points="68.3696,54.7948 67.6028,55.2403 66.1497,54.4014 66.9165,53.9558    "/></g><g><polygon fill="#3A3A77" points="55.4053,54.5694 54.0362,55.365 50.317,53.2177 51.6861,52.4221    "/></g><g><polygon fill="#3A3A77" points="62.8731,54.8993 61.5053,55.6942 60.0522,54.8553 61.4201,54.0604    "/></g><g><polygon fill="#3A3A77" points="59.7985,55.115 58.4295,55.9106 56.9764,55.0717 58.3455,54.2761    "/></g><g><polygon fill="#3A3A77" points="67.2599,55.4396 65.8907,56.2353 64.4377,55.3964 65.8068,54.6007    "/></g><g><polygon fill="#3A3A77" points="64.6662,55.9345 63.2984,56.7294 61.8453,55.8905 63.2131,55.0956    "/></g><g><polygon fill="#3A3A77" points="61.5916,56.1502 60.2225,56.9459 58.7694,56.1069 60.1385,55.3113    "/></g><g><polygon fill="#3A3A77" points="58.9915,56.6399 57.6224,57.4355 56.1693,56.5966 57.5384,55.8009    "/></g><g><polygon fill="#3A3A77" points="60.7845,57.6751 59.4154,58.4707 57.9611,57.631 59.3302,56.8354    "/></g></g><g><polygon fill="#3A3A77" points="79.1267,61.0054 78.3599,61.451 76.9068,60.612 77.6736,60.1664   "/></g><g><polygon fill="#3A3A77" points="77.3336,59.9701 76.5668,60.4157 75.1138,59.5768 75.8805,59.1312   "/></g><g><polygon fill="#3A3A77" points="75.5405,58.9349 74.7738,59.3805 73.3207,58.5416 74.0875,58.096   "/></g><g><polygon fill="#3A3A77" points="79.8101,62.6855 78.4409,63.4811 76.9865,62.6414 78.3557,61.8458   "/></g><g><polygon fill="#3A3A77" points="79.0827,66.2487 77.7136,67.0443 74.9044,65.4225 76.2735,64.6268   "/></g><g><polygon fill="#3A3A77" points="79.0094,64.2156 77.6416,65.0105 76.1872,64.1708 77.555,63.3759   "/></g><g><polygon fill="#3A3A77" points="75.4233,62.1451 74.0554,62.94 72.6024,62.1011 73.9702,61.3062   "/></g><g><polygon fill="#3A3A77" points="74.1418,63.3961 72.7727,64.1917 71.3196,63.3528 72.6887,62.5571   "/></g><g><polygon fill="#3A3A77" points="73.8876,67.231 73.3097,67.5668 71.7907,66.6898 72.3686,66.354   "/></g><g><polygon fill="#3A3A77" points="74.8688,68.714 74.2909,69.0499 72.7719,68.1729 73.3498,67.837   "/></g><g><polygon fill="#3A3A77" points="77.3642,67.2474 75.9951,68.043 72.3043,65.9121 73.6734,65.1165   "/></g><g><polygon fill="#3A3A77" points="73.3334,64.9202 71.9643,65.7158 70.5112,64.8769 71.8803,64.0813   "/></g><g><polygon fill="#3A3A77" points="75.9348,64.4313 74.5657,65.2269 73.1114,64.3872 74.4805,63.5916   "/></g><g><polygon fill="#3A3A77" points="77.2163,63.1803 75.8485,63.9752 74.3954,63.1363 75.7633,62.3414   "/></g><g><polygon fill="#3A3A77" points="78.017,61.6502 76.6478,62.4459 75.1948,61.607 76.5639,60.8113   "/></g><g><polygon fill="#3A3A77" points="70.1626,55.83 69.3959,56.2756 67.9428,55.4366 68.7096,54.991   "/></g><g><polygon fill="#3A3A77" points="67.9555,61.8152 66.5864,62.6109 65.1333,61.7719 66.5024,60.9763   "/></g><g><polygon fill="#3A3A77" points="63.3847,57.1855 62.0156,57.9811 60.5625,57.1422 61.9316,56.3465   "/></g><g enable-background="new    "><g><polygon fill="#3A3A77" points="71.9557,56.8652 71.1889,57.3108 69.7346,56.4711 70.5013,56.0255    "/></g><g><polygon fill="#3A3A77" points="70.846,57.5101 69.4769,58.3057 68.0225,57.4661 69.3917,56.6704    "/></g><g><polygon fill="#3A3A77" points="73.7475,57.8997 72.9807,58.3453 71.5276,57.5064 72.2944,57.0608    "/></g><g><polygon fill="#3A3A77" points="68.2523,58.005 66.8845,58.7999 65.4301,57.9602 66.798,57.1653    "/></g><g><polygon fill="#3A3A77" points="65.1777,58.2207 63.8086,59.0163 62.3556,58.1774 63.7247,57.3817    "/></g><g><polygon fill="#3A3A77" points="72.6378,58.5446 71.2686,59.3402 69.8156,58.5013 71.1847,57.7056    "/></g><g><polygon fill="#3A3A77" points="62.5763,58.7096 61.2072,59.5052 59.7541,58.6663 61.1232,57.8706    "/></g><g><polygon fill="#3A3A77" points="70.0441,59.0394 68.6763,59.8343 67.2232,58.9954 68.591,58.2005    "/></g><g><polygon fill="#3A3A77" points="66.9708,59.2559 65.6017,60.0515 64.1473,59.2119 65.5164,58.4162    "/></g><g><polygon fill="#3A3A77" points="74.4309,59.5798 73.0617,60.3754 71.6086,59.5365 72.9778,58.7408    "/></g><g><polygon fill="#3A3A77" points="60.8578,59.7082 59.4887,60.5039 58.0357,59.6649 59.4048,58.8693    "/></g><g><polygon fill="#3A3A77" points="64.3694,59.7448 63.0003,60.5404 61.5472,59.7015 62.9163,58.9059    "/></g><g><polygon fill="#3A3A77" points="71.8372,60.0747 70.4693,60.8696 69.0162,60.0306 70.3841,59.2357    "/></g><g><polygon fill="#3A3A77" points="68.7626,60.2904 67.3935,61.086 65.9404,60.2471 67.3095,59.4515    "/></g><g><polygon fill="#3A3A77" points="76.2239,60.615 74.8548,61.4107 73.4017,60.5717 74.7709,59.7761    "/></g><g><polygon fill="#3A3A77" points="62.6509,60.7435 61.2818,61.5391 59.8287,60.7002 61.1978,59.9045    "/></g><g><polygon fill="#3A3A77" points="73.6302,61.1099 72.2624,61.9048 70.8093,61.0659 72.1771,60.271    "/></g><g><polygon fill="#3A3A77" points="70.5556,61.3256 69.1865,62.1212 67.7335,61.2823 69.1026,60.4867    "/></g><g><polygon fill="#3A3A77" points="64.444,61.7787 63.0749,62.5743 61.6218,61.7354 62.9909,60.9398    "/></g><g><polygon fill="#3A3A77" points="72.3487,62.3608 70.9796,63.1565 69.5265,62.3175 70.8956,61.5219    "/></g><g><polygon fill="#3A3A77" points="66.237,62.8139 64.8679,63.6095 63.4149,62.7706 64.784,61.975    "/></g><g><polygon fill="#3A3A77" points="69.7486,62.8505 68.3795,63.6461 66.9251,62.8064 68.2942,62.0108    "/></g><g><polygon fill="#3A3A77" points="68.0301,63.8491 66.661,64.6448 65.2066,63.8051 66.5757,63.0095    "/></g></g><g><polygon fill="#3A3A77" points="69.053,56.4748 67.6838,57.2705 66.2307,56.4316 67.5999,55.6359   "/></g><g><polygon fill="#3A3A77" points="80.9197,62.0406 80.153,62.4862 78.6986,61.6465 79.4654,61.2009   "/></g><g><polygon fill="#3A3A77" points="83.6306,63.6057 82.8639,64.0513 80.4917,62.6817 81.2584,62.2361   "/></g><g><polygon fill="#3A3A77" points="80.8012,65.25 79.4333,66.0449 77.9803,65.206 79.3481,64.4111   "/></g><g><polygon fill="#3A3A77" points="82.521,64.2506 81.1518,65.0463 78.7796,63.6767 80.1488,62.881   "/></g><g><polygon fill="#3A3A77" points="64.7834,52.7243 64.0167,53.1699 62.5636,52.331 63.3304,51.8854   "/></g><g><polygon fill="#3A3A77" points="62.9917,51.6898 62.2249,52.1354 60.7705,51.2957 61.5373,50.8501   "/></g><g><polygon fill="#3A3A77" points="71.3253,66.6682 70.7474,67.0041 69.2284,66.1271 69.8064,65.7912   "/></g><g><polygon fill="#3A3A77" points="70.2795,65.1478 68.9104,65.9435 66.9997,64.8403 68.3688,64.0447   "/></g><g><polygon fill="#3A3A77" points="71.5416,63.8857 70.1725,64.6813 68.7182,63.8417 70.0873,63.046   "/></g><g><polygon fill="#3A3A77" points="66.1624,60.78 64.7933,61.5757 63.3403,60.7367 64.7094,59.9411   "/></g><g><polygon fill="#3A3A77" points="73.0964,67.6908 72.5185,68.0266 70.9995,67.1496 71.5774,66.8138   "/></g><g><polygon fill="#3A3A77" points="59.0661,58.6738 57.697,59.4694 56.2426,58.6297 57.6117,57.8341   "/></g><g><polygon fill="#B6CBEA" points="86.7347,66.9207 80.0027,70.8329 77.3318,69.2909 84.0638,65.3787   "/></g><g><polygon fill="#B6CBEA" points="54.8973,48.5394 48.1653,52.4516 45.4945,50.9096 52.2264,46.9974   "/></g><g><path d="M77.2642,38.2175l-0.0331,11.1703c-0.0019,0.6706-0.4784,0.9422-1.0639,0.6042L58.7402,39.9305    c-0.5856-0.3381-1.0589-1.1581-1.057-1.8287l0.0331-11.1703L77.2642,38.2175z" fill="#FFFFFF"/></g><g><path d="M72.0251,37.5137c0.488,0.2818,0.9754,0.8827,1.1587,1.6387l2.1098,8.7007l-16.0679-9.2768l1.6834-4.0598    c0.2-0.4836,0.6738-0.5181,1.1481-0.2442c0.4299,0.2482,0.8601,0.7497,1.087,1.3995c0.2299,0.6584,0.6585,1.1553,1.0863,1.4023    c0.511,0.295,1.021,0.2332,1.1872-0.3441l0.1696-0.5898c0.1672-0.5834,0.6753-0.6386,1.1833-0.3452    c0.4711,0.272,0.9424,0.8438,1.1416,1.5717l0.2131,0.7791c0.1986,0.7296,0.6686,1.2995,1.139,1.5711    c0.5174,0.2987,1.0352,0.2362,1.1921-0.3726l0.3767-1.458C70.991,37.2747,71.5084,37.2153,72.0251,37.5137z" fill="#6262AA"/></g><g enable-background="new    "><g><path d="M77.7838,36.4597L77.7485,49.088c0,0.3324-0.1209,0.5645-0.3124,0.6752l-0.4463,0.2597     c0.1512-0.126,0.2419-0.3428,0.2419-0.6351l0.0353-12.6283c0-0.67-0.4737-1.4916-1.0582-1.8292L58.7831,24.8668     c-0.2923-0.1713-0.5644-0.1863-0.7559-0.0704l0.5219-0.3049c0.1915-0.111,0.4586-0.0957,0.7508,0.0755l17.4257,10.0583     C77.3151,34.9629,77.7838,35.7842,77.7838,36.4597z" fill="#B6CBEA"/></g><g><path d="M76.2099,34.9284c0.5855,0.3381,1.0589,1.158,1.057,1.8309l-0.0027,1.4582l-19.548-11.286l0.0027-1.4582     c0.0019-0.6729,0.4784-0.9445,1.0639-0.6064L76.2099,34.9284z" fill="#4C4A8B"/></g><g><g><path d="M73.1069,34.0797c0.2338,0.135,0.423,0.4627,0.4222,0.7313c-0.0008,0.2686-0.1912,0.3771-0.425,0.2422      c-0.2338-0.135-0.423-0.4627-0.4222-0.7313C72.6827,34.0532,72.8731,33.9447,73.1069,34.0797z" fill="#DEE7F8"/></g><g><path d="M74.6427,34.9664c0.2349,0.1356,0.423,0.4627,0.4222,0.7313s-0.19,0.3778-0.425,0.2422      c-0.2338-0.135-0.4218-0.462-0.4211-0.7306S74.4089,34.8314,74.6427,34.9664z" fill="#DEE7F8"/></g><g><path d="M76.1796,35.8537c0.2338,0.135,0.423,0.4627,0.4222,0.7313c-0.0008,0.2686-0.1912,0.3771-0.425,0.2422      c-0.2338-0.135-0.423-0.4627-0.4222-0.7313C75.7554,35.8273,75.9459,35.7188,76.1796,35.8537z" fill="#DEE7F8"/></g></g></g><path d="M63.9135,44.5392c0.2289,0.1322,0.4145,0.4514,0.4137,0.7144l-0.0046,1.6404   c-0.0007,0.2608-0.1875,0.3673-0.4164,0.2352l-1.4257-0.8231c-0.2289-0.1322-0.4126-0.4525-0.4118-0.7134l0.0047-1.6404   c0.0007-0.263,0.1856-0.3684,0.4145-0.2362L63.9135,44.5392z" fill="#B6CBEA"/><path d="M67.4033,46.554c0.2289,0.1322,0.4144,0.4514,0.4137,0.7144l-0.0046,1.6404   c-0.0007,0.2608-0.1875,0.3673-0.4164,0.2352l-1.4257-0.8231c-0.2289-0.1322-0.4126-0.4525-0.4118-0.7134l0.0046-1.6404   c0.0007-0.263,0.1856-0.3684,0.4145-0.2362L67.4033,46.554z" fill="#B6CBEA"/><path d="M70.8949,48.5699c0.227,0.1311,0.4126,0.4503,0.4118,0.7133l-0.0047,1.6404   c-0.0007,0.2608-0.1875,0.3673-0.4145,0.2363L69.46,50.3357c-0.2289-0.1322-0.4126-0.4525-0.4118-0.7133l0.0046-1.6404   c0.0007-0.263,0.1856-0.3684,0.4145-0.2362L70.8949,48.5699z" fill="#B6CBEA"/><path d="M74.3847,50.5847c0.2271,0.1311,0.4126,0.4503,0.4118,0.7133l-0.0047,1.6404   c-0.0007,0.2608-0.1875,0.3673-0.4145,0.2363l-1.4276-0.8242c-0.2289-0.1322-0.4126-0.4525-0.4118-0.7133l0.0047-1.6404   c0.0007-0.263,0.1856-0.3684,0.4145-0.2362L74.3847,50.5847z" fill="#B6CBEA"/><path d="M77.8744,52.5995c0.227,0.1311,0.4126,0.4503,0.4118,0.7133l-0.0046,1.6404   c-0.0007,0.2608-0.1875,0.3673-0.4145,0.2363l-1.4276-0.8242c-0.2289-0.1322-0.4126-0.4525-0.4118-0.7133l0.0046-1.6404   c0.0007-0.263,0.1856-0.3684,0.4145-0.2362L77.8744,52.5995z" fill="#B6CBEA"/><path d="M81.3642,54.6144c0.227,0.1311,0.4126,0.4503,0.4118,0.7133l-0.0047,1.6404   c-0.0007,0.2608-0.1875,0.3673-0.4145,0.2363l-1.4276-0.8242c-0.2289-0.1322-0.4126-0.4525-0.4118-0.7133l0.0047-1.6404   c0.0007-0.263,0.1856-0.3684,0.4145-0.2363L81.3642,54.6144z" fill="#B6CBEA"/><g><g><path d="M97.7249,52.3039l-0.0286,9.6544c-0.0016,0.5796-0.4135,0.8144-0.9195,0.5222l-15.062-8.6961     c-0.5061-0.2922-0.9152-1.0009-0.9136-1.5805l0.0286-9.6544L97.7249,52.3039z" fill="#A6C2FF"/></g><g enable-background="new    "><g><path d="M98.174,50.7846l-0.0305,10.9146c0,0.2873-0.1045,0.4879-0.27,0.5835l-0.3857,0.2244      c0.1307-0.1089,0.209-0.2962,0.209-0.5489l0.0305-10.9146c0-0.5791-0.4094-1.2892-0.9146-1.5809L81.7518,40.765      c-0.2526-0.148-0.4878-0.161-0.6533-0.0608l0.4511-0.2635c0.1655-0.0959,0.3964-0.0827,0.6489,0.0653l15.0608,8.6933      C97.7689,49.491,98.174,50.2008,98.174,50.7846z" fill="#1E72C6"/></g><g><path d="M96.8137,49.4612c0.5061,0.2922,0.9152,1.0009,0.9136,1.5825l-0.0024,1.2603l-16.8951-9.7544      l0.0024-1.2603c0.0016-0.5816,0.4135-0.8163,0.9196-0.5241L96.8137,49.4612z" fill="#4C4A8B"/></g><g><g><path d="M94.1318,48.7276c0.2021,0.1167,0.3656,0.3999,0.3649,0.632c-0.0007,0.2322-0.1652,0.326-0.3673,0.2093       s-0.3656-0.3999-0.3649-0.632C93.7651,48.7047,93.9297,48.6109,94.1318,48.7276z" fill="#DEE7F8"/></g><g><path d="M95.4592,49.4939c0.2031,0.1172,0.3656,0.3999,0.3649,0.632       c-0.0007,0.2322-0.1642,0.3265-0.3673,0.2093c-0.2021-0.1167-0.3646-0.3993-0.3639-0.6315       C95.0935,49.4717,95.2571,49.3773,95.4592,49.4939z" fill="#DEE7F8"/></g><g><path d="M96.7875,50.2609c0.2021,0.1167,0.3656,0.3999,0.3649,0.632c-0.0007,0.2322-0.1652,0.326-0.3673,0.2093       c-0.2021-0.1167-0.3656-0.3999-0.3649-0.632C96.4209,50.238,96.5855,50.1442,96.7875,50.2609z" fill="#DEE7F8"/></g></g></g></g><g><polygon fill="#3A3A77" points="85.9573,46.544 85.9327,55.2206 83.0676,53.5664 83.0922,44.8899   "/></g><g><polygon fill="#B6CBEA" points="95.4401,59.0255 95.4373,60.0134 87.8745,55.647 87.8773,54.6591   "/></g><g><polygon fill="#B6CBEA" points="95.4493,55.7811 95.4437,57.7569 87.8809,53.3905 87.8865,51.4147   "/></g><g><polygon fill="#B6CBEA" points="95.4585,52.5369 95.4529,54.5126 87.8901,50.1462 87.8957,48.1705   "/></g><g><path d="M52.6198,31.5222l-0.0303,11.9345c-0.0017,0.6156-0.4391,0.8648-0.9765,0.5545L35.617,34.776    c-0.5375-0.3103-0.972-1.063-0.9702-1.6785l0.0303-11.9345L52.6198,31.5222z" fill="#DEE7F8"/></g><g enable-background="new    "><g><path d="M53.0968,29.9087l-0.0324,13.2728c0,0.3051-0.111,0.5181-0.2868,0.6197l-0.4097,0.2383     c0.1388-0.1156,0.222-0.3146,0.222-0.5829l0.0324-13.2728c0-0.615-0.4348-1.3691-0.9713-1.679l-15.9946-9.237     c-0.2683-0.1572-0.518-0.171-0.6938-0.0646l0.479-0.2799c0.1758-0.1019,0.4209-0.0879,0.6892,0.0693l15.9946,9.2323     C52.6666,28.5348,53.0968,29.2887,53.0968,29.9087z" fill="#B6CBEA"/></g><g><path d="M51.6521,28.5032c0.5375,0.3103,0.972,1.0629,0.9702,1.6806l-0.0025,1.3384L34.6771,21.163l0.0025-1.3384     c0.0018-0.6176,0.4391-0.8669,0.9766-0.5566L51.6521,28.5032z" fill="#83A1CC"/></g><g><g><path d="M48.8039,27.7241c0.2146,0.1239,0.3882,0.4247,0.3875,0.6712      c-0.0007,0.2466-0.1755,0.3462-0.3901,0.2223s-0.3882-0.4247-0.3875-0.6712C48.4145,27.6999,48.5893,27.6002,48.8039,27.7241z" fill="#DEE7F8"/></g><g><path d="M50.2136,28.538c0.2157,0.1245,0.3882,0.4247,0.3875,0.6712c-0.0007,0.2466-0.1744,0.3468-0.3901,0.2223      c-0.2146-0.1239-0.3872-0.4241-0.3865-0.6706C49.8253,28.5143,49.999,28.4141,50.2136,28.538z" fill="#DEE7F8"/></g><g><path d="M51.6243,29.3525c0.2146,0.1239,0.3882,0.4247,0.3875,0.6712      c-0.0007,0.2466-0.1755,0.3462-0.3901,0.2223c-0.2146-0.1239-0.3882-0.4247-0.3875-0.6712S51.4098,29.2286,51.6243,29.3525z" fill="#DEE7F8"/></g></g></g><g><polygon fill="#83A1CC" points="49.7856,40.907 49.7839,41.2492 36.7172,33.7051 36.7189,33.3629   "/></g><g><polygon fill="#1E72C6" points="39.0216,29.0082 39.0168,30.715 39.0064,34.369 38.103,33.8474 38.1182,28.4867   "/></g><g><polygon fill="#6B9EF9" points="39.9216,31.2374 39.9113,34.8914 39.0064,34.369 39.0168,30.715   "/></g><g><polygon fill="#6B9EF9" points="41.8519,30.9877 41.8377,36.0036 40.9329,35.4812 40.9471,30.4653   "/></g><g><polygon fill="#1E72C6" points="42.7601,29.8042 42.7411,36.5252 41.8377,36.0036 41.8568,29.2826   "/></g><g><polygon fill="#6B9EF9" points="45.5943,30.4217 45.5724,38.1599 44.6691,37.6383 44.691,29.9002   "/></g><g><polygon fill="#1E72C6" points="44.6958,28.1933 44.691,29.9002 44.6691,37.6383 43.7642,37.1159 43.791,27.6709   "/></g><g><polygon fill="#6B9EF9" points="47.5092,35.6181 47.4989,39.2721 46.5955,38.7506 46.6059,35.0966   "/></g><g><polygon fill="#1E72C6" points="48.4189,34.4338 48.4037,39.7945 47.4989,39.2721 47.5141,33.9114   "/></g><g enable-background="new    "><g><path d="M96.9891,82.2603L86.978,88.0788c-0.3964,0.2304-1.0464,0.2323-1.4487,0L75.4111,82.237     c-0.399-0.2304-0.4011-0.6088-0.0047-0.8391l10.0107-5.8176L96.9891,82.2603z" fill="#6262AA"/></g></g><g enable-background="new    "><g><path d="M100.67,79.879v1.2398c0,0.1532-0.0987,0.307-0.3072,0.4168l-13.3869,7.7796     c-0.395,0.2416-1.0424,0.2416-1.4484,0l-10.1169-5.8373c-0.1975-0.1098-0.3073-0.2636-0.3073-0.4281l0.011-1.2291     c0,0.1431,0.0988,0.2963,0.2963,0.4174l10.1169,5.8373c0.406,0.2304,1.0534,0.2304,1.4484,0l13.3978-7.7796     C100.5713,80.1747,100.67,80.0322,100.67,79.879z" fill="#2A2A5E"/></g><g><path d="M100.368,79.4555c0.4023,0.2322,0.4044,0.6068,0.0049,0.839l-3.3842,1.9667L85.417,75.5803l3.3842-1.9667     c0.3996-0.2322,1.0495-0.2303,1.4485,0.0001L100.368,79.4555z" fill="#4C4A8B"/></g></g><g enable-background="new    "><g><polygon fill="#B6CBEA" points="91.0621,79.7388 90.308,80.1771 88.8222,79.3192 89.5763,78.881    "/></g><g><polygon fill="#B6CBEA" points="93.1935,80.9693 92.4393,81.4076 90.9535,80.5498 91.7077,80.1115    "/></g><g><polygon fill="#7BB1FF" points="99.5902,79.9391 96.928,81.4862 86.8097,75.6444 89.4719,74.0973    "/></g><g><polygon fill="#B6CBEA" points="95.3249,82.1999 94.5707,82.6382 93.0849,81.7803 93.8391,81.342    "/></g></g><g><polygon fill="#DEE7F8" points="81.3043,80.4711 79.8282,81.329 78.3424,80.4711 79.8185,79.6133   "/></g><g><polygon fill="#A6C2FF" points="87.5803,79.293 86.1042,80.1509 84.6184,79.2931 86.0946,78.4352   "/></g><g><polygon fill="#DEE7F8" points="81.3632,82.906 79.8871,83.7639 78.4013,82.9061 79.8775,82.0482   "/></g><g><polygon fill="#6B9EF9" points="89.8298,85.3933 86.2812,87.4555 84.7954,86.5977 88.344,84.5355   "/></g><g><polygon fill="#6B9EF9" points="85.626,85.3671 84.1498,86.2249 82.664,85.3671 84.1402,84.5093   "/></g><g><polygon fill="#DEE7F8" points="83.4946,84.1366 82.0185,84.9944 80.5327,84.1366 82.0088,83.2787   "/></g><g><polygon fill="#DEE7F8" points="87.6984,84.1627 86.2222,85.0206 84.7365,84.1628 86.2126,83.3049   "/></g><g><polygon fill="#DEE7F8" points="85.567,82.9322 84.0909,83.79 82.6051,82.9322 84.0812,82.0744   "/></g><g><polygon fill="#DEE7F8" points="83.4357,81.7017 81.9595,82.5595 80.4737,81.7017 81.9499,80.8438   "/></g><g><polygon fill="#DEE7F8" points="85.5079,80.4974 84.0318,81.3552 82.546,80.4974 84.0221,79.6396   "/></g><g><polygon fill="#DEE7F8" points="83.3766,79.2669 81.9004,80.1247 80.4146,79.2669 81.8908,78.409   "/></g><g><polygon fill="#A6C2FF" points="85.449,78.0625 83.9728,78.9203 82.487,78.0625 83.9632,77.2047   "/></g><g><polygon fill="#DEE7F8" points="79.2319,81.6755 77.7557,82.5333 76.27,81.6755 77.7461,80.8177   "/></g><g><polygon fill="#DEE7F8" points="87.6393,81.7279 86.1631,82.5858 84.6773,81.728 86.1535,80.8701   "/></g><g><polygon fill="#DEE7F8" points="89.7706,82.9585 88.2945,83.8163 86.8087,82.9585 88.2849,82.1007   "/></g><g><polygon fill="#6B9EF9" points="93.9744,82.9847 92.4983,83.8425 91.0125,82.9847 92.4886,82.1268   "/></g><g><polygon fill="#DEE7F8" points="91.843,81.7541 90.3669,82.612 88.8811,81.7542 90.3573,80.8963   "/></g><g><polygon fill="#DEE7F8" points="89.7117,80.5236 88.2355,81.3814 86.7498,80.5236 88.2259,79.6658   "/></g><g><polygon fill="#B6CBEA" points="86.7994,77.2777 86.0453,77.716 84.5595,76.8582 85.3136,76.4199   "/></g><g><polygon fill="#B6CBEA" points="88.9308,78.5082 88.1766,78.9465 86.6908,78.0887 87.445,77.6504   "/></g><g><polygon fill="#6B9EF9" points="91.902,84.189 90.4259,85.0469 88.94,84.189 90.4162,83.3312   "/></g><path d="M50.2985,59.1353c-0.0313-0.1073-0.1201-0.1289-0.1981-0.048l-3.7409,3.8847   c-0.0779,0.0812-0.1159,0.2342-0.0846,0.3416l0.8881,3.0483c0.0313,0.1073,0.12,0.1284,0.1979,0.0475l3.7409-3.8847   c0.0779-0.0809,0.1161-0.2337,0.0848-0.341L50.2985,59.1353z" fill="#FFFFFF"/><path d="M34.6705,76.9374l1.1581-0.6241c0.6797,0.844,1.0954,0.5163,2.0635,0.4826   c0.954-0.0104,0.6063,0.536,0.6063,0.536c-0.3278,0.492-0.9973,0.8151-1.3893,0.9738c-0.1855,0.0728-0.3708,0.1008-0.555,0.1178   c-0.1562,0.0144-0.5564,0.0924-0.7152,0.1347c0.0014,0.0276-0.0131,0.2682-0.0128,0.307c0.0027,0.0554-1.3056,0.5861-1.4706,0.1841   c-0.0357-0.0858-0.0391-0.4747-0.0251-0.7096c-0.0022-0.0612,0.0025-0.1116,0.0057-0.1453   C34.3906,77.5663,34.6705,76.9374,34.6705,76.9374z" fill="#3A3D4C"/><path d="M36.4086,58.5555c-0.2895,0.4278-1.7136,2.645-1.1879,5.1749c0.267,1.2859,0.4063,2.2491,0.3377,3.414   c-0.0566,0.9591-0.2466,1.9166-0.4962,2.8703c-0.7682,2.935-0.3783,7.1242-0.3783,7.1242c0.821,0.1695,1.4672,0.3322,1.9066-0.2778   c0.0394-0.8511,0.7986-4.633,1.1699-6.4426c0.1292-0.6296,0.3101-1.2507,0.567-1.8567c2.0416-4.8155,2.1856-8.6441,2.1856-8.6441   L36.4086,58.5555z" fill="#505366"/><path d="M42.2617,78.5631l1.483-0.5172c1.1642,0.9067,1.6714,0.6174,3.0295,0.6731   c1.3439,0.0777,0.9859,0.592,0.9859,0.592c-0.3432,0.4618-1.2097,0.7231-1.7244,0.8456c-0.2441,0.0557-0.4988,0.0666-0.7547,0.0666   c-0.2169,0-0.7629,0.041-0.9767,0.0687c0.0087,0.0277,0.0466,0.267,0.0565,0.3059c0.0172,0.0557-1.7005,0.4656-2.0309,0.0483   c-0.0712-0.0891-0.1705-0.4784-0.2078-0.712c-0.0179-0.0614-0.0235-0.1114-0.0273-0.1448   C42.0194,79.1662,42.2617,78.5631,42.2617,78.5631z" fill="#3A3D4C"/><path d="M43.7358,70.1004c0.8725-4.8163,0.0873-9.249,0.0873-9.249l-5.26-1.5572   c-0.1856,0.4278-1.2704,2.8968-0.0029,5.2704c0.6643,1.244,1.4343,2.5578,1.6834,3.7868c0.2117,1.0447,0.5857,2.2651,0.5782,3.3068   c-0.0209,2.929,1.3526,7.0191,1.3526,7.0191c0.8621,0.1698,1.5398,0.0875,1.8311-0.5226c-0.1672-0.8508-0.318-4.3882-0.386-6.1979   C43.5959,71.3273,43.6261,70.7062,43.7358,70.1004z" fill="#5B5D70"/><g><g><g><g><path d="M37.4837,46.8243c0.7054-0.8145,0.6566-1.8925,0.6566-1.8925l0.7795-2.0874       c0,0,3.5764-1.8894,4.2008-1.5363c0.6627,0.3748-0.2189,3.4751-0.2189,3.4751c-0.0664,0.7163-0.3787,0.9627-0.3787,0.9627       l-1.5452,0.7043l-0.4313,1.1772C40.5466,47.6274,36.7783,47.6388,37.4837,46.8243z" fill="#ECB4BF"/><path d="M43.8407,40.6649c-2.2559-1.3152-3.6406-0.9174-4.0929-0.8502       c-0.9497,0.1405-2.1898,0.6748-1.9465,2.3975c0.2432,1.7224-0.1506,3.619,1.3774,3.372       c1.5281-0.2469,1.6063-0.5797,1.6063-0.5797s-0.2342-1.5575,0.3259-1.4116c0.5599,0.1462,0.6997,0.3783,0.6521,1.003       c-0.0048,0.0615-0.0071,0.1289-0.0098,0.196l0.6062-0.5123c0.0914-0.6997,0.1603-0.726,0.1603-0.726       s0.5288-1.776,1.3537-2.2894C44.0441,41.158,44.0396,40.7808,43.8407,40.6649z" fill="#4C4A8B"/></g><path d="M40.2267,58.1521c-0.0056,0.4492-0.5546,0.7985-0.9206,0.9594l-3.7266-4.5364      c-0.2107-0.2605-0.3438-0.5711-0.3771-0.9039c-0.2218-2.0019-0.0832-5.4957,0-6.2498c0,0,0.3106-2.0187,2.2237-1.7966      c1.4419,0.1663,0.4714,5.1296,0.2773,7.0427C37.648,53.222,40.2267,58.1521,40.2267,58.1521z" fill="#3887E5"/><path d="M43.7908,52.821c0.1054-0.9959,0.1033-2.0038-0.0841-2.9878c-0.0866-0.4546-0.2069-0.8719-0.3735-1.1232      c-0.1077-0.1627-0.2457-0.3003-0.4016-0.4175l-2.0611-1.5516c-1.0851,0.287-2.6984-0.0631-2.8132-1.0739      c0,0-3.5425-0.7406-2.71,3.91c0.6775,3.818,0.666,6.0457,0.6775,7.7565c0,0.844,0.1556,0.4424-0.0173,1.2632      c-0.896,4.2556,7.8155,2.2547,7.8155,2.2547C43.6997,59.1826,43.5573,55.0273,43.7908,52.821z" fill="#6B9EF9"/></g></g></g><path d="M48.5892,61.501c-0.411-0.291-0.3792-0.4268-0.3186-0.5136l0.2106-0.2185l0.1016-0.1055   c-0.0083-0.0313-0.2339-0.1906-0.2808-0.2108c-0.8266-0.3685-1.0344-0.1284-1.1964-0.1474c-0.1619-0.0187-0.384-0.235-0.4025-0.247   l-0.6464,0.5357l0.1346,0.0794c0.1636,0.0971,0.2682,0.2601,0.2986,0.4445c0.1092,0.6628,0.7894,1.3002,1.1849,1.5396   c0.1133,0.0642,0.1825,0.0817,0.2246,0.0768c0.284,0.115,1.3858-0.4941,1.257-0.5986C49.1496,62.115,49.2055,61.954,48.5892,61.501   z" fill="#ECB4BF"/><path d="M41.0517,50.143c0,0-0.0954-1.971,1.7493-1.7365c1.4329,0.1824,1.2847,4.7346,1.3054,6.6451   c0.0062,0.5555,3.1067,5.1345,3.1067,5.1345c0.0455,0.4468-0.4595,0.8552-0.8038,1.0521l-4.188-4.0651   c-0.2364-0.234-0.4009-0.5252-0.4745-0.8496C41.3036,54.3691,41.0532,50.8971,41.0517,50.143z" fill="#3887E5"/></g></svg>
\ No newline at end of file
diff --git a/ui/public/img/logo-r.png b/ui/public/img/logo-r.png
new file mode 100644
index 0000000..9f8fba9
Binary files /dev/null and b/ui/public/img/logo-r.png differ
diff --git a/ui/public/img/logo.png b/ui/public/img/logo.png
new file mode 100644
index 0000000..7a2fb28
Binary files /dev/null and b/ui/public/img/logo.png differ
diff --git a/ui/public/img/no-widgets.svg b/ui/public/img/no-widgets.svg
new file mode 100644
index 0000000..ec8b3ae
--- /dev/null
+++ b/ui/public/img/no-widgets.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 750 750" style="enable-background:new 0 0 750 750;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.35;fill:#B3B3B3;}
+	.st1{opacity:0.1;fill:#B3B3B3;}
+	.st2{opacity:0.3;fill:#B3B3B3;}
+	.st3{opacity:0.1;}
+	.st4{fill:#B3B3B3;}
+</style>
+<g>
+	<path class="st0" d="M465.1,261.4H264c-1.3,0-2.4,1.1-2.4,2.4v255.6c0,1.3,1.1,2.4,2.4,2.4h201.1c1.3,0,2.4-1.1,2.4-2.4V263.8
+		C467.5,262.4,466.4,261.4,465.1,261.4z M417.9,443c0,1.3-1.1,2.4-2.4,2.4h-102c-1.3,0-2.4-1.1-2.4-2.4v-11.3c0-1.3,1.1-2.4,2.4-2.4
+		h102c1.3,0,2.4,1.1,2.4,2.4V443z M417.9,397.2c0,1.3-1.1,2.4-2.4,2.4h-102c-1.3,0-2.4-1.1-2.4-2.4v-11.3c0-1.3,1.1-2.4,2.4-2.4h102
+		c1.3,0,2.4,1.1,2.4,2.4V397.2z M417.9,351.5c0,1.3-1.1,2.4-2.4,2.4h-102c-1.3,0-2.4-1.1-2.4-2.4v-11.3c0-1.3,1.1-2.4,2.4-2.4h102
+		c1.3,0,2.4,1.1,2.4,2.4V351.5z"/>
+	<g>
+		<path class="st1" d="M462.1,236.8L462.1,236.8C384.8,236.2,321,295.1,314,370.7c-18.5-19.1-44.4-31.1-73.1-31.3h0
+			c-56.8-0.4-103.2,45.3-103.6,102.1l-0.8,101.4l175.6,1.3l30.1,0.2l265.1,2l1.2-160.9C609.2,304,543.6,237.4,462.1,236.8z"/>
+		<path class="st2" d="M216.9,227.4c-3.4,0-6.5,1.1-9,2.9c0.2-1,0.3-2,0.3-3c0.1-8.3-6.6-15.1-15-15.2s-15.1,6.6-15.2,15
+			c0,0.3,0,0.6,0,0.9c-1.6-0.6-3.4-1-5.2-1c-8.3-0.1-15.1,6.6-15.2,15c-0.1,8.2,6.4,14.9,14.5,15.2l0,0l44.6,0.3
+			c8.3,0.1,15.1-6.6,15.2-15S225.2,227.5,216.9,227.4z"/>
+		<path class="st2" d="M596.4,194.2c-3.4,0-6.5,1.1-9,2.9c0.2-1,0.3-2,0.3-3c0.1-8.3-6.6-15.1-15-15.2s-15.1,6.6-15.2,15
+			c0,0.3,0,0.6,0,0.9c-1.6-0.6-3.4-1-5.2-1c-8.3-0.1-15.1,6.6-15.2,15c-0.1,8.2,6.4,14.9,14.5,15.2l0,0l44.6,0.3
+			c8.3,0.1,15.1-6.6,15.2-15S604.7,194.3,596.4,194.2z"/>
+		<g>
+			<g class="st3">
+				<path class="st4" d="M496.9,497.5c-2.1,0-3.7,1.6-3.7,3.7c0,1.5,0.8,2.7,2,3.3l-0.5,65.1l3.5,0l0.5-65.3
+					c1.1-0.6,1.8-1.8,1.8-3.1C500.6,499.1,499,497.6,496.9,497.5z"/>
+				<path class="st4" d="M572.3,501.7c0-1.9-1.6-3.6-3.7-3.7c-2.1,0-3.7,1.6-3.7,3.7c0,1.4,0.8,2.6,1.9,3.2l-0.5,65.2l3.5,0
+					l0.5-65.2C571.5,504.3,572.2,503.1,572.3,501.7z"/>
+			</g>
+			
+				<rect x="522.7" y="472.2" transform="matrix(7.448311e-03 -1 1 7.448311e-03 8.6828 1045.4733)" class="st1" width="16.5" height="92.3"/>
+			<polygon class="st1" points="495.4,509.8 495.2,510.1 485.5,526.3 484.8,526.3 484.9,509.8 			"/>
+			<polygon class="st1" points="518.7,510 508.8,526.5 496.3,526.4 500.2,519.8 506,509.9 			"/>
+			<polygon class="st1" points="542,510.2 532.1,526.6 519.6,526.5 529.3,510.1 			"/>
+			<polygon class="st1" points="565.3,510.4 555.5,526.8 542.9,526.7 552.7,510.3 			"/>
+			<polygon class="st1" points="577.2,510.4 577.1,527 566.2,526.9 576,510.4 			"/>
+			
+				<rect x="522.5" y="497.7" transform="matrix(7.448311e-03 -1 1 7.448311e-03 -17.0149 1070.603)" class="st1" width="16.5" height="92.3"/>
+			<polygon class="st1" points="495.2,535.3 495,535.6 485.3,551.8 484.6,551.8 484.7,535.3 			"/>
+			<polygon class="st1" points="518.5,535.5 508.6,552 496.1,551.9 500,545.3 505.8,535.4 			"/>
+			<polygon class="st1" points="541.8,535.7 531.9,552.1 519.4,552 529.1,535.6 			"/>
+			<polygon class="st1" points="565.1,535.9 555.4,552.3 542.7,552.2 552.5,535.8 			"/>
+			<polygon class="st1" points="577,536 576.9,552.5 566,552.4 575.8,536 			"/>
+			<path class="st1" d="M577.1,527c0,0,0-0.1,0-0.3l0-0.9c0-0.7,0-1.8,0-3.2c0-2.8,0.1-6.9,0.1-12.2l0.1,0.1l-92.3-0.5l0,0l0.1-0.1
+				c0,5.6-0.1,11.2-0.1,16.5l-0.1-0.1l65.8,0.6l19.5,0.1l5.3,0l0,0l-5.3,0l-19.5-0.1l-65.8-0.3l-0.3,0l0.1-16.8l0.1,0l92.3,0.8
+				l0.1,0l0,0.1c0,5.3-0.1,9.4-0.1,12.2c0,1.5,0,2.5,0,3.2l0,0.7C577.1,526.8,577.1,527,577.1,527z"/>
+			<path class="st1" d="M576.9,552.5c0,0,0-0.1,0-0.3l0-0.9c0-0.7,0-1.8,0-3.2c0-2.8,0.1-6.9,0.1-12.2l0.1,0.1l-92.3-0.5l0,0
+				l0.1-0.1c0,5.6-0.1,11.2-0.1,16.5l-0.1-0.1l65.8,0.6l19.5,0.1l5.3,0l0,0l-5.3,0l-19.5-0.1l-65.8-0.3l-0.3,0l0.1-16.7l0.1,0
+				l92.3,0.8l0.1,0l0,0.1c0,5.3-0.1,9.4-0.1,12.2c0,1.5,0,2.5,0,3.2l0,0.7C576.9,552.3,576.9,552.5,576.9,552.5z"/>
+		</g>
+	</g>
+</g>
+</svg>
diff --git a/ui/public/img/shanghai.json b/ui/public/img/shanghai.json
new file mode 100644
index 0000000..e7786cd
--- /dev/null
+++ b/ui/public/img/shanghai.json
@@ -0,0 +1 @@
+{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":310101,"name":"黄浦区","center":[121.490317,31.222771],"centroid":[121.483572,31.215946],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":0,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.457689,31.220196],[121.460707,31.213488],[121.461555,31.210194],[121.462264,31.203173],[121.466449,31.204395],[121.46745,31.203065],[121.469605,31.196404],[121.470383,31.191276],[121.474944,31.189886],[121.475987,31.187885],[121.490752,31.191467],[121.494631,31.192857],[121.498066,31.195601],[121.501319,31.199747],[121.508368,31.210158],[121.509911,31.214506],[121.509397,31.218459],[121.506741,31.223119],[121.502014,31.228018],[121.495744,31.232977],[121.493491,31.23615],[121.493491,31.240163],[121.494826,31.24221],[121.487805,31.244186],[121.485969,31.244091],[121.482994,31.241923],[121.47892,31.240294],[121.474847,31.24142],[121.469563,31.239216],[121.462973,31.241396],[121.466129,31.234917],[121.467658,31.225634],[121.467464,31.223862],[121.456758,31.223898],[121.457689,31.220196]]]]}},{"type":"Feature","properties":{"adcode":310104,"name":"徐汇区","center":[121.43752,31.179973],"centroid":[121.439405,31.162992],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":1,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.457689,31.220196],[121.452184,31.217429],[121.44697,31.215812],[121.439462,31.214482],[121.43746,31.211535],[121.435235,31.21114],[121.437933,31.203976],[121.433025,31.20128],[121.423793,31.197314],[121.421638,31.19535],[121.422027,31.192294],[121.419719,31.190796],[121.412572,31.19112],[121.41356,31.18683],[121.415256,31.187357],[121.415158,31.183391],[121.41146,31.182037],[121.400101,31.178813],[121.398349,31.179904],[121.398071,31.178226],[121.394442,31.177879],[121.395415,31.174595],[121.39269,31.173085],[121.394053,31.169489],[121.391508,31.168686],[121.394567,31.159601],[121.402645,31.162226],[121.404578,31.157588],[121.401867,31.157528],[121.395874,31.15585],[121.396931,31.152685],[121.401449,31.153776],[121.400977,31.155214],[121.404953,31.156689],[121.411293,31.14174],[121.41381,31.13728],[121.418398,31.131669],[121.421526,31.127137],[121.436445,31.129043],[121.43853,31.121729],[121.438836,31.119103],[121.435736,31.113539],[121.438002,31.1121],[121.441547,31.112568],[121.445788,31.114954],[121.446706,31.114282],[121.450807,31.115398],[121.450154,31.112819],[121.452364,31.108586],[121.447623,31.107423],[121.446275,31.105744],[121.451878,31.103849],[121.452629,31.101234],[121.455423,31.100755],[121.462862,31.101954],[121.463237,31.108586],[121.465211,31.1121],[121.469299,31.118731],[121.469674,31.124859],[121.468729,31.127868],[121.462431,31.134463],[121.457453,31.142232],[121.457453,31.146451],[121.460387,31.150276],[121.46574,31.155118],[121.468354,31.158091],[121.469369,31.162298],[121.468159,31.167092],[121.464905,31.17541],[121.464905,31.178022],[121.466254,31.18109],[121.468729,31.184122],[121.475987,31.187885],[121.474944,31.189886],[121.470383,31.191276],[121.469605,31.196404],[121.46745,31.203065],[121.466449,31.204395],[121.462264,31.203173],[121.461555,31.210194],[121.460707,31.213488],[121.457689,31.220196]]]]}},{"type":"Feature","properties":{"adcode":310105,"name":"长宁区","center":[121.4222,31.218123],"centroid":[121.380949,31.20737],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":2,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.439462,31.214482],[121.436167,31.220675],[121.435416,31.225071],[121.434304,31.225886],[121.429034,31.223095],[121.427713,31.224221],[121.427519,31.229288],[121.423334,31.228114],[121.419941,31.225191],[121.415617,31.228581],[121.414853,31.228054],[121.415965,31.224473],[121.414157,31.223359],[121.408707,31.222364],[121.403799,31.22058],[121.400462,31.220807],[121.399712,31.218711],[121.388658,31.218639],[121.37691,31.220687],[121.373197,31.220089],[121.371404,31.222508],[121.366691,31.224065],[121.366065,31.226006],[121.362102,31.22597],[121.359071,31.229827],[121.354177,31.237121],[121.352856,31.238342],[121.348741,31.239372],[121.350131,31.241839],[121.348922,31.243863],[121.347281,31.243192],[121.346822,31.241037],[121.344612,31.243552],[121.345585,31.239887],[121.340872,31.239947],[121.338355,31.237528],[121.343513,31.234306],[121.345376,31.23039],[121.345362,31.227886],[121.341581,31.226293],[121.340997,31.224269],[121.345627,31.223526],[121.343096,31.223071],[121.342457,31.217789],[121.33937,31.216615],[121.339996,31.212278],[121.338508,31.212182],[121.338438,31.20666],[121.338925,31.196644],[121.33734,31.195817],[121.338049,31.192618],[121.331806,31.189622],[121.338341,31.180108],[121.341414,31.179436],[121.351424,31.183499],[121.353301,31.181629],[121.356958,31.182768],[121.358321,31.186015],[121.360253,31.185296],[121.365954,31.185572],[121.38001,31.190065],[121.391425,31.191911],[121.412572,31.19112],[121.419719,31.190796],[121.422027,31.192294],[121.421638,31.19535],[121.423793,31.197314],[121.433025,31.20128],[121.437933,31.203976],[121.435235,31.21114],[121.43746,31.211535],[121.439462,31.214482]]]]}},{"type":"Feature","properties":{"adcode":310106,"name":"静安区","center":[121.448224,31.229003],"centroid":[121.450659,31.270821],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":3,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.457689,31.220196],[121.456758,31.223898],[121.467464,31.223862],[121.467658,31.225634],[121.466129,31.234917],[121.462973,31.241396],[121.469563,31.239216],[121.474847,31.24142],[121.47892,31.240294],[121.482994,31.241923],[121.481228,31.247959],[121.479588,31.249815],[121.481673,31.250689],[121.479629,31.253383],[121.480589,31.255239],[121.480491,31.258568],[121.474124,31.263453],[121.469605,31.267799],[121.464627,31.274396],[121.462834,31.275389],[121.461457,31.278921],[121.461805,31.284691],[121.460081,31.289778],[121.462445,31.292747],[121.46453,31.297989],[121.463529,31.306008],[121.467672,31.306307],[121.468312,31.316036],[121.468145,31.32032],[121.465378,31.321397],[121.457133,31.321002],[121.4547,31.319243],[121.447887,31.317101],[121.44672,31.319817],[121.436765,31.319662],[121.436459,31.32087],[121.433595,31.32087],[121.432468,31.318669],[121.434623,31.312303],[121.432163,31.31168],[121.431676,31.309478],[121.432441,31.305912],[121.431287,31.303638],[121.426434,31.303207],[121.426935,31.298528],[121.42364,31.297259],[121.420039,31.296912],[121.418648,31.292256],[121.419691,31.291071],[121.423806,31.291011],[121.422833,31.28426],[121.424432,31.280238],[121.424571,31.27193],[121.425252,31.270661],[121.429841,31.274923],[121.432413,31.271942],[121.437098,31.269439],[121.442952,31.267117],[121.451044,31.256269],[121.44932,31.252928],[121.451461,31.251994],[121.450404,31.247743],[121.448318,31.245216],[121.449987,31.2433],[121.445774,31.241348],[121.435166,31.235252],[121.431009,31.235108],[121.427908,31.231144],[121.427519,31.229288],[121.427713,31.224221],[121.429034,31.223095],[121.434304,31.225886],[121.435416,31.225071],[121.436167,31.220675],[121.439462,31.214482],[121.44697,31.215812],[121.452184,31.217429],[121.457689,31.220196]]]]}},{"type":"Feature","properties":{"adcode":310107,"name":"普陀区","center":[121.392499,31.241701],"centroid":[121.392042,31.257895],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":4,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.354177,31.237121],[121.359071,31.229827],[121.362102,31.22597],[121.366065,31.226006],[121.366691,31.224065],[121.371404,31.222508],[121.373197,31.220089],[121.37691,31.220687],[121.388658,31.218639],[121.399712,31.218711],[121.400462,31.220807],[121.403799,31.22058],[121.408707,31.222364],[121.414157,31.223359],[121.415965,31.224473],[121.414853,31.228054],[121.415617,31.228581],[121.419941,31.225191],[121.423334,31.228114],[121.427519,31.229288],[121.427908,31.231144],[121.431009,31.235108],[121.435166,31.235252],[121.445774,31.241348],[121.449987,31.2433],[121.448318,31.245216],[121.450404,31.247743],[121.451461,31.251994],[121.44932,31.252928],[121.451044,31.256269],[121.442952,31.267117],[121.437098,31.269439],[121.432413,31.271942],[121.429841,31.274923],[121.425252,31.270661],[121.419496,31.265237],[121.41577,31.265896],[121.41527,31.26914],[121.410598,31.270373],[121.41096,31.273175],[121.40544,31.273067],[121.406496,31.276862],[121.404564,31.276227],[121.400087,31.278071],[121.404453,31.286223],[121.400379,31.286115],[121.398446,31.287145],[121.399559,31.288904],[121.39789,31.29052],[121.393483,31.291274],[121.394762,31.294674],[121.388394,31.29526],[121.384765,31.294446],[121.381623,31.292711],[121.38154,31.289431],[121.376242,31.290592],[121.374838,31.289096],[121.370153,31.290329],[121.369666,31.28912],[121.363785,31.291334],[121.363785,31.292028],[121.358585,31.293465],[121.360295,31.294674],[121.363534,31.302741],[121.360309,31.302717],[121.354803,31.299808],[121.352954,31.301663],[121.348894,31.299246],[121.349659,31.297582],[121.346892,31.296349],[121.34685,31.297654],[121.340927,31.297439],[121.341011,31.293716],[121.338675,31.293225],[121.336506,31.294901],[121.332224,31.292998],[121.332821,31.290915],[121.326384,31.288928],[121.327316,31.285182],[121.328998,31.284595],[121.332738,31.286067],[121.335004,31.279711],[121.336061,31.280046],[121.336228,31.275461],[121.338883,31.275006],[121.338272,31.272839],[121.343541,31.271439],[121.344723,31.273917],[121.35732,31.271415],[121.358918,31.268793],[121.361268,31.27084],[121.367441,31.269631],[121.366996,31.266662],[121.362227,31.26756],[121.35985,31.266997],[121.358918,31.263609],[121.361783,31.259945],[121.366023,31.259358],[121.365884,31.257682],[121.374574,31.257059],[121.375158,31.25949],[121.377508,31.259478],[121.380886,31.257766],[121.377216,31.247719],[121.375686,31.244486],[121.3731,31.245683],[121.372349,31.243755],[121.368387,31.247384],[121.366718,31.246342],[121.363117,31.240091],[121.36067,31.238642],[121.360086,31.240498],[121.356068,31.240151],[121.356054,31.237803],[121.354177,31.237121]]]]}},{"type":"Feature","properties":{"adcode":310109,"name":"虹口区","center":[121.491832,31.26097],"centroid":[121.485443,31.276649],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":5,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.485413,31.311573],[121.485372,31.314636],[121.479171,31.314696],[121.472956,31.315797],[121.468312,31.316036],[121.467672,31.306307],[121.463529,31.306008],[121.46453,31.297989],[121.462445,31.292747],[121.460081,31.289778],[121.461805,31.284691],[121.461457,31.278921],[121.462834,31.275389],[121.464627,31.274396],[121.469605,31.267799],[121.474124,31.263453],[121.480491,31.258568],[121.480589,31.255239],[121.479629,31.253383],[121.481673,31.250689],[121.479588,31.249815],[121.481228,31.247959],[121.482994,31.241923],[121.485969,31.244091],[121.487805,31.244186],[121.494826,31.24221],[121.500012,31.244989],[121.50688,31.246474],[121.516488,31.246953],[121.516001,31.251599],[121.517642,31.251862],[121.514569,31.256317],[121.508479,31.262639],[121.50631,31.266746],[121.506505,31.270589],[121.499915,31.275904],[121.496564,31.276407],[121.496049,31.282991],[121.498149,31.286259],[121.502709,31.289658],[121.500652,31.295488],[121.493644,31.293884],[121.490168,31.292603],[121.485664,31.303483],[121.485413,31.311573]]]]}},{"type":"Feature","properties":{"adcode":310110,"name":"杨浦区","center":[121.522797,31.270755],"centroid":[121.529302,31.29835],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":6,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.516488,31.246953],[121.527555,31.247252],[121.536384,31.249623],[121.541542,31.251826],[121.559074,31.264219],[121.563537,31.268805],[121.568515,31.275701],[121.56953,31.279567],[121.569141,31.285254],[121.565456,31.294135],[121.562523,31.29976],[121.561758,31.303339],[121.561883,31.321158],[121.560493,31.32781],[121.558574,31.331256],[121.555779,31.333948],[121.549398,31.337789],[121.525483,31.346797],[121.522883,31.342885],[121.520256,31.344033],[121.517628,31.340779],[121.50556,31.345732],[121.493575,31.330299],[121.497593,31.328109],[121.498928,31.325322],[121.496216,31.323347],[121.496717,31.311489],[121.485413,31.311573],[121.485664,31.303483],[121.490168,31.292603],[121.493644,31.293884],[121.500652,31.295488],[121.502709,31.289658],[121.498149,31.286259],[121.496049,31.282991],[121.496564,31.276407],[121.499915,31.275904],[121.506505,31.270589],[121.50631,31.266746],[121.508479,31.262639],[121.514569,31.256317],[121.517642,31.251862],[121.516001,31.251599],[121.516488,31.246953]]]]}},{"type":"Feature","properties":{"adcode":310112,"name":"闵行区","center":[121.375972,31.111658],"centroid":[121.418901,31.087213],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":7,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.35871,30.97786],[121.375227,30.982832],[121.394261,30.988247],[121.409333,30.990229],[121.413184,30.991069],[121.423973,30.994515],[121.431426,30.999174],[121.433636,31.001779],[121.436834,31.00406],[121.440811,31.005789],[121.448305,31.007458],[121.459942,31.007398],[121.465587,31.008755],[121.47144,31.011948],[121.476362,31.01334],[121.485872,31.014073],[121.489153,31.014949],[121.492879,31.012752],[121.491948,31.010039],[121.495924,30.998297],[121.498872,30.998213],[121.49883,30.999426],[121.503057,31.002716],[121.507881,31.004745],[121.510412,31.004553],[121.517002,31.007626],[121.520853,31.004445],[121.522105,31.002199],[121.520089,31.00256],[121.520325,30.999354],[121.522897,30.99981],[121.528612,30.99592],[121.531962,30.994815],[121.534507,30.995848],[121.537774,30.994683],[121.538233,30.993146],[121.543294,30.994203],[121.54613,30.99305],[121.549537,30.988307],[121.55279,30.98886],[121.553304,30.993026],[121.556224,30.993374],[121.555918,30.995152],[121.561494,30.995644],[121.570475,30.998345],[121.567959,31.000879],[121.570712,31.002295],[121.570253,31.004565],[121.571463,31.005633],[121.569725,31.010603],[121.568181,31.010063],[121.565859,31.011912],[121.569822,31.012452],[121.571018,31.016426],[121.574674,31.018634],[121.574758,31.020951],[121.572325,31.026677],[121.56839,31.025284],[121.569057,31.024396],[121.564302,31.021191],[121.56027,31.024132],[121.558699,31.020255],[121.556474,31.020255],[121.556516,31.01873],[121.554139,31.01861],[121.552262,31.020915],[121.552804,31.023268],[121.555765,31.022908],[121.558407,31.024528],[121.558254,31.029533],[121.559505,31.030278],[121.559464,31.041391],[121.562119,31.043635],[121.559811,31.044812],[121.557031,31.04798],[121.556127,31.047632],[121.554737,31.050824],[121.552693,31.0493],[121.550538,31.049396],[121.54955,31.047908],[121.547799,31.048544],[121.54588,31.047044],[121.541472,31.046396],[121.542307,31.049072],[121.540791,31.052528],[121.54328,31.054016],[121.543308,31.055696],[121.548383,31.056896],[121.547201,31.061647],[121.548549,31.063639],[121.551094,31.063795],[121.551789,31.065643],[121.556753,31.06737],[121.55279,31.069506],[121.555599,31.071689],[121.559033,31.072169],[121.557531,31.073357],[121.562675,31.074305],[121.56262,31.075121],[121.567639,31.0762],[121.575272,31.080063],[121.572658,31.081323],[121.571643,31.080063],[121.569766,31.081611],[121.563579,31.082486],[121.561563,31.08365],[121.557031,31.082702],[121.556405,31.081059],[121.553555,31.080303],[121.550565,31.082834],[121.548549,31.086889],[121.551539,31.088148],[121.551608,31.090128],[121.559088,31.091951],[121.561563,31.09357],[121.561855,31.091867],[121.564358,31.091891],[121.567264,31.09363],[121.566819,31.096569],[121.563315,31.098955],[121.562064,31.101258],[121.563649,31.101858],[121.561132,31.105264],[121.561396,31.106224],[121.557851,31.109797],[121.559867,31.111896],[121.556697,31.113083],[121.555279,31.114882],[121.553332,31.112688],[121.552317,31.113899],[121.549217,31.113419],[121.550426,31.11162],[121.547687,31.109653],[121.544225,31.111464],[121.542251,31.116153],[121.539526,31.115626],[121.537885,31.113983],[121.535341,31.117976],[121.532254,31.117208],[121.53142,31.11842],[121.525289,31.116741],[121.522869,31.115242],[121.521424,31.116309],[121.514513,31.115278],[121.513749,31.118012],[121.511343,31.12119],[121.50549,31.120002],[121.503863,31.118324],[121.505295,31.115494],[121.501583,31.114666],[121.498538,31.121501],[121.49281,31.118719],[121.490266,31.124283],[121.485969,31.124523],[121.485705,31.121933],[121.48191,31.120086],[121.481256,31.118024],[121.477446,31.117328],[121.481353,31.110697],[121.477321,31.110853],[121.474137,31.114354],[121.473984,31.112915],[121.470286,31.110937],[121.465211,31.1121],[121.463237,31.108586],[121.462862,31.101954],[121.455423,31.100755],[121.452629,31.101234],[121.451878,31.103849],[121.446275,31.105744],[121.447623,31.107423],[121.452364,31.108586],[121.450154,31.112819],[121.450807,31.115398],[121.446706,31.114282],[121.445788,31.114954],[121.441547,31.112568],[121.438002,31.1121],[121.435736,31.113539],[121.438836,31.119103],[121.43853,31.121729],[121.436445,31.129043],[121.421526,31.127137],[121.418398,31.131669],[121.41381,31.13728],[121.411293,31.14174],[121.404953,31.156689],[121.400977,31.155214],[121.401449,31.153776],[121.396931,31.152685],[121.395874,31.15585],[121.401867,31.157528],[121.404578,31.157588],[121.402645,31.162226],[121.394567,31.159601],[121.391508,31.168686],[121.394053,31.169489],[121.39269,31.173085],[121.395415,31.174595],[121.394442,31.177879],[121.398071,31.178226],[121.398349,31.179904],[121.400101,31.178813],[121.41146,31.182037],[121.415158,31.183391],[121.415256,31.187357],[121.41356,31.18683],[121.412572,31.19112],[121.391425,31.191911],[121.38001,31.190065],[121.365954,31.185572],[121.360253,31.185296],[121.358321,31.186015],[121.356958,31.182768],[121.353301,31.181629],[121.351424,31.183499],[121.341414,31.179436],[121.338341,31.180108],[121.331806,31.189622],[121.338049,31.192618],[121.33734,31.195817],[121.338925,31.196644],[121.338438,31.20666],[121.338508,31.212182],[121.339996,31.212278],[121.33937,31.216615],[121.342457,31.217789],[121.343096,31.223071],[121.345627,31.223526],[121.340997,31.224269],[121.341581,31.226293],[121.345362,31.227886],[121.345376,31.23039],[121.343513,31.234306],[121.338355,31.237528],[121.334935,31.235887],[121.333878,31.232006],[121.32612,31.229575],[121.322853,31.229623],[121.315386,31.227204],[121.302998,31.230605],[121.296922,31.231048],[121.29264,31.232761],[121.288538,31.238198],[121.287301,31.243276],[121.283742,31.245192],[121.28142,31.248174],[121.284228,31.251838],[121.280363,31.251886],[121.275302,31.253527],[121.271284,31.252258],[121.264444,31.256496],[121.263985,31.259155],[121.260217,31.258328],[121.254405,31.259634],[121.254183,31.258688],[121.247314,31.253287],[121.24591,31.248821],[121.241683,31.247348],[121.239932,31.241061],[121.241391,31.240222],[121.247912,31.240917],[121.249692,31.236534],[121.251082,31.238198],[121.252792,31.236965],[121.254155,31.23312],[121.257158,31.230701],[121.258006,31.226868],[121.256588,31.226329],[121.258215,31.222772],[121.25745,31.220208],[121.259675,31.218148],[121.261218,31.215081],[121.259397,31.212769],[121.263846,31.208912],[121.26468,31.206731],[121.263053,31.205701],[121.264777,31.203317],[121.266724,31.203257],[121.271701,31.198309],[121.277388,31.193576],[121.284034,31.194391],[121.287329,31.196332],[121.292126,31.200621],[121.292431,31.202514],[121.294837,31.203077],[121.297506,31.201412],[121.300565,31.197027],[121.30856,31.188388],[121.310784,31.18423],[121.316304,31.176836],[121.318042,31.173624],[121.318584,31.170256],[121.323854,31.162933],[121.327218,31.156856],[121.328775,31.156665],[121.331528,31.15205],[121.331292,31.149772],[121.333711,31.148765],[121.335477,31.143862],[121.336728,31.14355],[121.338814,31.14017],[121.33677,31.138971],[121.342095,31.134655],[121.344681,31.130338],[121.344014,31.129451],[121.346002,31.126202],[121.34489,31.12577],[121.347545,31.121969],[121.346753,31.121657],[121.349589,31.117748],[121.353065,31.117604],[121.35066,31.115554],[121.353774,31.111512],[121.356026,31.112532],[121.357014,31.110529],[121.352217,31.106487],[121.351675,31.107735],[121.348532,31.106655],[121.351341,31.099255],[121.35839,31.100791],[121.359085,31.098931],[121.362756,31.099771],[121.368289,31.088976],[121.372016,31.079871],[121.370625,31.078372],[121.368804,31.079127],[121.365481,31.077892],[121.364341,31.073705],[121.362116,31.072601],[121.364424,31.069878],[121.363743,31.068354],[121.357278,31.066758],[121.358195,31.064047],[121.35344,31.061287],[121.343444,31.059139],[121.341456,31.062763],[121.335338,31.060435],[121.335102,31.04564],[121.33367,31.040695],[121.334017,31.031922],[121.333308,31.030686],[121.333892,31.026917],[121.333725,31.015657],[121.333072,31.01334],[121.339898,31.013857],[121.34279,31.014817],[121.34425,31.013941],[121.339829,31.010267],[121.33823,31.006197],[121.330347,30.996905],[121.327482,30.995896],[121.326773,30.994479],[121.326898,30.989964],[121.3258,30.9833],[121.327371,30.980658],[121.329554,30.981318],[121.334406,30.980694],[121.34375,30.976599],[121.351258,30.975986],[121.35871,30.97786]]]]}},{"type":"Feature","properties":{"adcode":310113,"name":"宝山区","center":[121.489934,31.398896],"centroid":[121.404861,31.392111],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":8,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.425252,31.270661],[121.424571,31.27193],[121.424432,31.280238],[121.422833,31.28426],[121.423806,31.291011],[121.419691,31.291071],[121.418648,31.292256],[121.420039,31.296912],[121.42364,31.297259],[121.426935,31.298528],[121.426434,31.303207],[121.431287,31.303638],[121.432441,31.305912],[121.431676,31.309478],[121.432163,31.31168],[121.434623,31.312303],[121.432468,31.318669],[121.433595,31.32087],[121.436459,31.32087],[121.436765,31.319662],[121.44672,31.319817],[121.447887,31.317101],[121.4547,31.319243],[121.457133,31.321002],[121.465378,31.321397],[121.468145,31.32032],[121.468312,31.316036],[121.472956,31.315797],[121.479171,31.314696],[121.485372,31.314636],[121.485413,31.311573],[121.496717,31.311489],[121.496216,31.323347],[121.498928,31.325322],[121.497593,31.328109],[121.493575,31.330299],[121.50556,31.345732],[121.517628,31.340779],[121.520256,31.344033],[121.522883,31.342885],[121.525483,31.346797],[121.514903,31.352],[121.508424,31.357251],[121.503835,31.36493],[121.50346,31.369403],[121.503835,31.373744],[121.507284,31.379102],[121.512372,31.385858],[121.521229,31.39479],[121.507353,31.405933],[121.509425,31.408288],[121.516585,31.405287],[121.517239,31.406303],[121.510801,31.409973],[121.502362,31.413404],[121.501319,31.411982],[121.507228,31.409722],[121.505991,31.407021],[121.49427,31.417851],[121.481339,31.427294],[121.463696,31.438277],[121.446024,31.450717],[121.434276,31.458496],[121.41869,31.470682],[121.409694,31.476321],[121.404328,31.479212],[121.403966,31.481494],[121.406288,31.485388],[121.405426,31.487215],[121.376298,31.501106],[121.362255,31.50679],[121.357751,31.508259],[121.343499,31.512057],[121.335838,31.508295],[121.329512,31.504247],[121.327218,31.504247],[121.323131,31.502288],[121.323701,31.499649],[121.319905,31.49972],[121.32003,31.502993],[121.321879,31.503399],[121.320169,31.505883],[121.316652,31.505775],[121.315345,31.501273],[121.311938,31.502909],[121.310353,31.505919],[121.305529,31.505333],[121.305876,31.503435],[121.302595,31.502599],[121.299926,31.499756],[121.300857,31.496747],[121.304667,31.495779],[121.306544,31.493307],[121.309171,31.492495],[121.31027,31.489735],[121.308629,31.488649],[121.310214,31.487311],[121.313342,31.480598],[121.315956,31.481219],[121.318807,31.475055],[121.31426,31.472474],[121.317958,31.468472],[121.320572,31.469058],[121.320058,31.466728],[121.317277,31.466262],[121.317778,31.460109],[121.320531,31.457289],[121.318654,31.456895],[121.319794,31.454876],[121.324132,31.455007],[121.327399,31.448829],[121.326106,31.448041],[121.328261,31.441098],[121.331236,31.439652],[121.333656,31.440118],[121.336603,31.432254],[121.336645,31.429493],[121.335143,31.429158],[121.336422,31.424999],[121.336561,31.419058],[121.33239,31.416943],[121.334101,31.413655],[121.332488,31.413117],[121.333141,31.410739],[121.330444,31.410308],[121.32847,31.411958],[121.314316,31.4072],[121.317375,31.403661],[121.315637,31.402729],[121.314747,31.398365],[121.317444,31.39742],[121.321476,31.397576],[121.323145,31.395866],[121.323339,31.393331],[121.320419,31.389123],[121.323061,31.388489],[121.326607,31.381063],[121.330527,31.381135],[121.331306,31.378456],[121.328734,31.377344],[121.331389,31.37433],[121.334003,31.37262],[121.333336,31.371281],[121.335991,31.370097],[121.335018,31.366963],[121.337576,31.364189],[121.338911,31.360995],[121.340329,31.360517],[121.341428,31.357802],[121.337118,31.356019],[121.337743,31.3534],[121.334643,31.3509],[121.332251,31.351307],[121.332502,31.347084],[121.336464,31.346821],[121.337521,31.344536],[121.338925,31.344775],[121.342401,31.341306],[121.344347,31.341928],[121.34628,31.336329],[121.342846,31.336066],[121.341692,31.33329],[121.342318,31.331005],[121.345932,31.32513],[121.347517,31.324077],[121.344848,31.323335],[121.345585,31.320835],[121.3492,31.321313],[121.347782,31.319542],[121.347698,31.316706],[121.343458,31.317185],[121.340357,31.311525],[121.338981,31.310101],[121.335686,31.303339],[121.331306,31.301436],[121.334198,31.296122],[121.33588,31.297044],[121.336506,31.294901],[121.338675,31.293225],[121.341011,31.293716],[121.340927,31.297439],[121.34685,31.297654],[121.346892,31.296349],[121.349659,31.297582],[121.348894,31.299246],[121.352954,31.301663],[121.354803,31.299808],[121.360309,31.302717],[121.363534,31.302741],[121.360295,31.294674],[121.358585,31.293465],[121.363785,31.292028],[121.363785,31.291334],[121.369666,31.28912],[121.370153,31.290329],[121.374838,31.289096],[121.376242,31.290592],[121.38154,31.289431],[121.381623,31.292711],[121.384765,31.294446],[121.388394,31.29526],[121.394762,31.294674],[121.393483,31.291274],[121.39789,31.29052],[121.399559,31.288904],[121.398446,31.287145],[121.400379,31.286115],[121.404453,31.286223],[121.400087,31.278071],[121.404564,31.276227],[121.406496,31.276862],[121.40544,31.273067],[121.41096,31.273175],[121.410598,31.270373],[121.41527,31.26914],[121.41577,31.265896],[121.419496,31.265237],[121.425252,31.270661]]]]}},{"type":"Feature","properties":{"adcode":310114,"name":"嘉定区","center":[121.250333,31.383524],"centroid":[121.24439,31.358138],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":9,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.153743,31.276646],[121.153924,31.272061],[121.151783,31.267632],[121.155537,31.266147],[121.157845,31.270541],[121.161057,31.26762],[121.162614,31.269176],[121.167661,31.263944],[121.168036,31.259622],[121.170386,31.259119],[121.16894,31.256197],[121.171415,31.254928],[121.174251,31.256856],[121.176768,31.254605],[121.178798,31.255862],[121.17934,31.253419],[121.181537,31.254413],[121.183928,31.252246],[121.186444,31.252329],[121.188377,31.25476],[121.193021,31.253623],[121.193368,31.251455],[121.19626,31.251228],[121.19608,31.253395],[121.199848,31.255239],[121.203143,31.255814],[121.202865,31.257131],[121.206368,31.260065],[121.208482,31.25749],[121.209816,31.258017],[121.209761,31.260831],[121.212625,31.259837],[121.214182,31.254353],[121.221273,31.256293],[121.220216,31.257406],[121.223859,31.259035],[121.223539,31.260532],[121.229198,31.261717],[121.229087,31.262711],[121.235177,31.262699],[121.237693,31.262088],[121.242253,31.25937],[121.246577,31.259801],[121.246758,31.258448],[121.254183,31.258688],[121.254405,31.259634],[121.260217,31.258328],[121.263985,31.259155],[121.264444,31.256496],[121.271284,31.252258],[121.275302,31.253527],[121.280363,31.251886],[121.284228,31.251838],[121.28142,31.248174],[121.283742,31.245192],[121.287301,31.243276],[121.288538,31.238198],[121.29264,31.232761],[121.296922,31.231048],[121.302998,31.230605],[121.315386,31.227204],[121.322853,31.229623],[121.32612,31.229575],[121.333878,31.232006],[121.334935,31.235887],[121.338355,31.237528],[121.340872,31.239947],[121.345585,31.239887],[121.344612,31.243552],[121.346822,31.241037],[121.347281,31.243192],[121.348922,31.243863],[121.350131,31.241839],[121.348741,31.239372],[121.352856,31.238342],[121.354177,31.237121],[121.356054,31.237803],[121.356068,31.240151],[121.360086,31.240498],[121.36067,31.238642],[121.363117,31.240091],[121.366718,31.246342],[121.368387,31.247384],[121.372349,31.243755],[121.3731,31.245683],[121.375686,31.244486],[121.377216,31.247719],[121.380886,31.257766],[121.377508,31.259478],[121.375158,31.25949],[121.374574,31.257059],[121.365884,31.257682],[121.366023,31.259358],[121.361783,31.259945],[121.358918,31.263609],[121.35985,31.266997],[121.362227,31.26756],[121.366996,31.266662],[121.367441,31.269631],[121.361268,31.27084],[121.358918,31.268793],[121.35732,31.271415],[121.344723,31.273917],[121.343541,31.271439],[121.338272,31.272839],[121.338883,31.275006],[121.336228,31.275461],[121.336061,31.280046],[121.335004,31.279711],[121.332738,31.286067],[121.328998,31.284595],[121.327316,31.285182],[121.326384,31.288928],[121.332821,31.290915],[121.332224,31.292998],[121.336506,31.294901],[121.33588,31.297044],[121.334198,31.296122],[121.331306,31.301436],[121.335686,31.303339],[121.338981,31.310101],[121.340357,31.311525],[121.343458,31.317185],[121.347698,31.316706],[121.347782,31.319542],[121.3492,31.321313],[121.345585,31.320835],[121.344848,31.323335],[121.347517,31.324077],[121.345932,31.32513],[121.342318,31.331005],[121.341692,31.33329],[121.342846,31.336066],[121.34628,31.336329],[121.344347,31.341928],[121.342401,31.341306],[121.338925,31.344775],[121.337521,31.344536],[121.336464,31.346821],[121.332502,31.347084],[121.332251,31.351307],[121.334643,31.3509],[121.337743,31.3534],[121.337118,31.356019],[121.341428,31.357802],[121.340329,31.360517],[121.338911,31.360995],[121.337576,31.364189],[121.335018,31.366963],[121.335991,31.370097],[121.333336,31.371281],[121.334003,31.37262],[121.331389,31.37433],[121.328734,31.377344],[121.331306,31.378456],[121.330527,31.381135],[121.326607,31.381063],[121.323061,31.388489],[121.320419,31.389123],[121.323339,31.393331],[121.323145,31.395866],[121.321476,31.397576],[121.317444,31.39742],[121.314747,31.398365],[121.315637,31.402729],[121.317375,31.403661],[121.314316,31.4072],[121.32847,31.411958],[121.330444,31.410308],[121.333141,31.410739],[121.332488,31.413117],[121.334101,31.413655],[121.33239,31.416943],[121.336561,31.419058],[121.336422,31.424999],[121.335143,31.429158],[121.336645,31.429493],[121.336603,31.432254],[121.333656,31.440118],[121.331236,31.439652],[121.328261,31.441098],[121.326106,31.448041],[121.327399,31.448829],[121.324132,31.455007],[121.319794,31.454876],[121.318654,31.456895],[121.320531,31.457289],[121.317778,31.460109],[121.317277,31.466262],[121.320058,31.466728],[121.320572,31.469058],[121.317958,31.468472],[121.31426,31.472474],[121.318807,31.475055],[121.315956,31.481219],[121.313342,31.480598],[121.310214,31.487311],[121.308629,31.488649],[121.31027,31.489735],[121.309171,31.492495],[121.306544,31.493307],[121.304667,31.495779],[121.300857,31.496747],[121.300496,31.494537],[121.298563,31.493713],[121.298605,31.491515],[121.293488,31.489807],[121.29061,31.491694],[121.289387,31.489031],[121.285355,31.490679],[121.283686,31.489795],[121.279696,31.490404],[121.280321,31.488672],[121.276442,31.486654],[121.27622,31.485376],[121.272049,31.484337],[121.268879,31.487466],[121.267322,31.486224],[121.267433,31.483357],[121.265153,31.48313],[121.261732,31.480777],[121.261454,31.478854],[121.254794,31.477635],[121.255643,31.483632],[121.253627,31.483082],[121.253362,31.479809],[121.251221,31.479606],[121.249692,31.477623],[121.247064,31.477062],[121.245813,31.479881],[121.248176,31.481876],[121.244409,31.481183],[121.243797,31.487311],[121.241141,31.490906],[121.240877,31.493701],[121.237234,31.491957],[121.234746,31.492686],[121.235413,31.488099],[121.232994,31.487896],[121.22867,31.482127],[121.230839,31.481111],[121.230352,31.477432],[121.226209,31.477683],[121.225361,31.476022],[121.220731,31.47607],[121.219062,31.475222],[121.21364,31.475939],[121.21503,31.477528],[121.214377,31.479128],[121.206368,31.474995],[121.203421,31.472331],[121.202906,31.469356],[121.195051,31.467827],[121.186055,31.460814],[121.185457,31.457468],[121.186055,31.454362],[121.180814,31.451458],[121.174974,31.449295],[121.16983,31.450024],[121.16773,31.448315],[121.166048,31.450168],[121.163045,31.448865],[121.160917,31.449678],[121.147348,31.44393],[121.146569,31.439006],[121.14782,31.436186],[121.152492,31.433604],[121.158484,31.432254],[121.162711,31.432218],[121.16253,31.429565],[121.16431,31.427222],[121.162002,31.427951],[121.161362,31.425776],[121.155273,31.42574],[121.151157,31.421796],[121.146249,31.421078],[121.146208,31.419704],[121.149266,31.41913],[121.148905,31.415867],[121.153493,31.413679],[121.155523,31.413835],[121.154508,31.411575],[121.15886,31.410117],[121.157887,31.407893],[121.153104,31.405837],[121.153896,31.403685],[121.15049,31.402215],[121.149586,31.399381],[121.152742,31.398174],[121.147653,31.397325],[121.149475,31.394503],[121.14383,31.392327],[121.147097,31.3899],[121.148988,31.38691],[121.148432,31.385404],[121.141425,31.38355],[121.141049,31.384531],[121.137518,31.382785],[121.138408,31.381147],[121.131762,31.378815],[121.131247,31.379664],[121.124268,31.376722],[121.12328,31.37848],[121.118206,31.375837],[121.113757,31.37445],[121.11523,31.371137],[121.119082,31.370563],[121.120208,31.368674],[121.113173,31.36688],[121.112853,31.365133],[121.10928,31.364703],[121.10889,31.366509],[121.106958,31.366593],[121.106749,31.364535],[121.108251,31.360457],[121.107361,31.354763],[121.108418,31.354034],[121.10832,31.350649],[121.111157,31.351534],[121.111838,31.350517],[121.117246,31.351689],[121.120194,31.347562],[121.11733,31.34712],[121.117969,31.343447],[121.123948,31.342753],[121.130441,31.344213],[121.130816,31.341509],[121.130121,31.334702],[121.13115,31.332106],[121.132582,31.331962],[121.133305,31.325585],[121.131539,31.325441],[121.131637,31.32324],[121.127257,31.319315],[121.127076,31.316934],[121.128633,31.314265],[121.127966,31.311884],[121.129773,31.308306],[121.129134,31.307528],[121.129954,31.302597],[121.133778,31.30207],[121.139645,31.302992],[121.13895,31.305625],[121.143774,31.309706],[121.146903,31.305936],[121.150782,31.299018],[121.148933,31.298875],[121.152714,31.294075],[121.151282,31.291933],[121.154689,31.290053],[121.156399,31.287408],[121.159305,31.28766],[121.161293,31.283985],[121.159402,31.281579],[121.155537,31.280765],[121.155481,31.278442],[121.153743,31.276646]]]]}},{"type":"Feature","properties":{"adcode":310115,"name":"浦东新区","center":[121.567706,31.245944],"centroid":[121.742177,31.083823],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":10,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.570475,30.998345],[121.576746,30.999474],[121.582933,30.999498],[121.584309,31.000819],[121.594682,31.000699],[121.595585,31.002043],[121.604066,31.001131],[121.614717,31.001251],[121.61772,30.995692],[121.62057,30.992678],[121.646695,30.99335],[121.654536,30.993254],[121.663115,30.992714],[121.669525,30.991609],[121.673348,30.989832],[121.674558,30.991802],[121.683595,30.989808],[121.688086,30.990145],[121.69298,30.98934],[121.699459,30.987419],[121.705507,30.984981],[121.712792,30.980934],[121.73191,30.967784],[121.733954,30.964469],[121.737916,30.960637],[121.73686,30.958703],[121.739988,30.956721],[121.743742,30.956589],[121.747857,30.951893],[121.749234,30.953046],[121.751987,30.952721],[121.759286,30.949154],[121.761024,30.947604],[121.760927,30.944613],[121.764542,30.941766],[121.761677,30.940132],[121.761469,30.938414],[121.764277,30.938522],[121.763846,30.936852],[121.766432,30.936539],[121.76799,30.93833],[121.769769,30.935278],[121.773023,30.933932],[121.77337,30.931553],[121.777806,30.931025],[121.777653,30.926723],[121.781115,30.917567],[121.780239,30.911811],[121.77896,30.910116],[121.778334,30.903807],[121.778987,30.899468],[121.778807,30.894588],[121.776012,30.886426],[121.776679,30.881005],[121.773134,30.880596],[121.772481,30.875703],[121.771605,30.875427],[121.768143,30.863272],[121.769338,30.85043],[121.793767,30.816862],[121.904467,30.814155],[121.915284,30.812892],[121.9246,30.8066],[121.943689,30.777096],[121.969703,30.789202],[121.955466,30.817138],[121.954326,30.821409],[121.954715,30.825811],[121.970732,30.839077],[121.985372,30.850694],[121.993951,30.863055],[121.996982,30.874898],[121.998497,30.899961],[121.996231,30.935458],[121.990934,30.968432],[121.977558,31.016101],[121.962682,31.047284],[121.94679,31.065883],[121.889465,31.121705],[121.884029,31.130638],[121.853358,31.155346],[121.809812,31.196907],[121.743742,31.283207],[121.729101,31.298288],[121.722511,31.303518],[121.712431,31.309407],[121.689448,31.322462],[121.610559,31.368195],[121.603038,31.372656],[121.593708,31.376411],[121.559811,31.38361],[121.538011,31.388489],[121.521229,31.39479],[121.512372,31.385858],[121.507284,31.379102],[121.503835,31.373744],[121.50346,31.369403],[121.503835,31.36493],[121.508424,31.357251],[121.514903,31.352],[121.525483,31.346797],[121.549398,31.337789],[121.555779,31.333948],[121.558574,31.331256],[121.560493,31.32781],[121.561883,31.321158],[121.561758,31.303339],[121.562523,31.29976],[121.565456,31.294135],[121.569141,31.285254],[121.56953,31.279567],[121.568515,31.275701],[121.563537,31.268805],[121.559074,31.264219],[121.541542,31.251826],[121.536384,31.249623],[121.527555,31.247252],[121.516488,31.246953],[121.50688,31.246474],[121.500012,31.244989],[121.494826,31.24221],[121.493491,31.240163],[121.493491,31.23615],[121.495744,31.232977],[121.502014,31.228018],[121.506741,31.223119],[121.509397,31.218459],[121.509911,31.214506],[121.508368,31.210158],[121.501319,31.199747],[121.498066,31.195601],[121.494631,31.192857],[121.490752,31.191467],[121.475987,31.187885],[121.468729,31.184122],[121.466254,31.18109],[121.464905,31.178022],[121.464905,31.17541],[121.468159,31.167092],[121.469369,31.162298],[121.468354,31.158091],[121.46574,31.155118],[121.460387,31.150276],[121.457453,31.146451],[121.457453,31.142232],[121.462431,31.134463],[121.468729,31.127868],[121.469674,31.124859],[121.469299,31.118731],[121.465211,31.1121],[121.470286,31.110937],[121.473984,31.112915],[121.474137,31.114354],[121.477321,31.110853],[121.481353,31.110697],[121.477446,31.117328],[121.481256,31.118024],[121.48191,31.120086],[121.485705,31.121933],[121.485969,31.124523],[121.490266,31.124283],[121.49281,31.118719],[121.498538,31.121501],[121.501583,31.114666],[121.505295,31.115494],[121.503863,31.118324],[121.50549,31.120002],[121.511343,31.12119],[121.513749,31.118012],[121.514513,31.115278],[121.521424,31.116309],[121.522869,31.115242],[121.525289,31.116741],[121.53142,31.11842],[121.532254,31.117208],[121.535341,31.117976],[121.537885,31.113983],[121.539526,31.115626],[121.542251,31.116153],[121.544225,31.111464],[121.547687,31.109653],[121.550426,31.11162],[121.549217,31.113419],[121.552317,31.113899],[121.553332,31.112688],[121.555279,31.114882],[121.556697,31.113083],[121.559867,31.111896],[121.557851,31.109797],[121.561396,31.106224],[121.561132,31.105264],[121.563649,31.101858],[121.562064,31.101258],[121.563315,31.098955],[121.566819,31.096569],[121.567264,31.09363],[121.564358,31.091891],[121.561855,31.091867],[121.561563,31.09357],[121.559088,31.091951],[121.551608,31.090128],[121.551539,31.088148],[121.548549,31.086889],[121.550565,31.082834],[121.553555,31.080303],[121.556405,31.081059],[121.557031,31.082702],[121.561563,31.08365],[121.563579,31.082486],[121.569766,31.081611],[121.571643,31.080063],[121.572658,31.081323],[121.575272,31.080063],[121.567639,31.0762],[121.56262,31.075121],[121.562675,31.074305],[121.557531,31.073357],[121.559033,31.072169],[121.555599,31.071689],[121.55279,31.069506],[121.556753,31.06737],[121.551789,31.065643],[121.551094,31.063795],[121.548549,31.063639],[121.547201,31.061647],[121.548383,31.056896],[121.543308,31.055696],[121.54328,31.054016],[121.540791,31.052528],[121.542307,31.049072],[121.541472,31.046396],[121.54588,31.047044],[121.547799,31.048544],[121.54955,31.047908],[121.550538,31.049396],[121.552693,31.0493],[121.554737,31.050824],[121.556127,31.047632],[121.557031,31.04798],[121.559811,31.044812],[121.562119,31.043635],[121.559464,31.041391],[121.559505,31.030278],[121.558254,31.029533],[121.558407,31.024528],[121.555765,31.022908],[121.552804,31.023268],[121.552262,31.020915],[121.554139,31.01861],[121.556516,31.01873],[121.556474,31.020255],[121.558699,31.020255],[121.56027,31.024132],[121.564302,31.021191],[121.569057,31.024396],[121.56839,31.025284],[121.572325,31.026677],[121.574758,31.020951],[121.574674,31.018634],[121.571018,31.016426],[121.569822,31.012452],[121.565859,31.011912],[121.568181,31.010063],[121.569725,31.010603],[121.571463,31.005633],[121.570253,31.004565],[121.570712,31.002295],[121.567959,31.000879],[121.570475,30.998345]]],[[[121.943244,31.215465],[121.941826,31.207678],[121.942619,31.198465],[121.944843,31.186878],[121.948027,31.176405],[121.952629,31.1672],[121.959637,31.159278],[121.965685,31.15754],[121.970773,31.157552],[121.975862,31.158834],[121.99573,31.1608],[121.999554,31.165079],[122.010593,31.188004],[122.012011,31.192043],[122.012609,31.210002],[122.011038,31.217405],[122.008563,31.220987],[121.989655,31.224521],[121.980659,31.22809],[121.969188,31.230282],[121.957259,31.230414],[121.951044,31.228821],[121.946595,31.224365],[121.943244,31.215465]]],[[[121.882625,31.240857],[121.880873,31.23633],[121.882541,31.225611],[121.885155,31.22052],[121.889271,31.214997],[121.901645,31.20146],[121.908777,31.195266],[121.913852,31.19384],[121.918788,31.194319],[121.922445,31.196859],[121.925448,31.205438],[121.927519,31.224017],[121.926727,31.229731],[121.923557,31.233863],[121.915451,31.236558],[121.897363,31.242115],[121.88991,31.242594],[121.882625,31.240857]]]]}},{"type":"Feature","properties":{"adcode":310116,"name":"金山区","center":[121.330736,30.724697],"centroid":[121.255144,30.818932],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":11,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[120.99673,30.950307],[120.996813,30.944625],[120.995673,30.944336],[120.997481,30.941141],[121.000818,30.937729],[121.000025,30.934701],[120.999622,30.91395],[120.998982,30.909527],[121.004572,30.909299],[121.004516,30.906955],[121.00257,30.904852],[120.998704,30.905946],[120.998635,30.903386],[120.995715,30.903723],[120.992809,30.90216],[120.992656,30.899732],[120.99046,30.89579],[120.992907,30.893915],[120.993824,30.88966],[121.005017,30.888794],[121.00852,30.888121],[121.008298,30.882964],[121.011092,30.882219],[121.017474,30.882724],[121.0186,30.880716],[121.021465,30.878793],[121.019421,30.876665],[121.021896,30.875162],[121.019796,30.873996],[121.020463,30.87188],[121.01778,30.873359],[121.014819,30.871027],[121.01778,30.86938],[121.013971,30.86439],[121.016265,30.862851],[121.015403,30.86053],[121.010981,30.856033],[121.015013,30.853604],[121.013359,30.851692],[121.010133,30.853135],[121.008006,30.850574],[121.006463,30.850454],[121.003974,30.846101],[121.000985,30.845632],[120.9999,30.843335],[120.997759,30.84408],[120.995659,30.838572],[120.992865,30.838392],[120.989987,30.834724],[120.989125,30.832318],[120.992462,30.831572],[120.989153,30.828698],[120.992754,30.825691],[120.990918,30.822708],[120.994603,30.821493],[121.00054,30.829431],[121.003446,30.826304],[121.006935,30.830779],[121.010898,30.834615],[121.014402,30.835818],[121.014874,30.833954],[121.030057,30.828553],[121.036647,30.818449],[121.037912,30.81389],[121.044976,30.815526],[121.043752,30.820013],[121.03908,30.818582],[121.03769,30.820266],[121.039192,30.820867],[121.040276,30.82438],[121.04175,30.825378],[121.039956,30.827218],[121.043516,30.828157],[121.045101,30.825907],[121.048896,30.825186],[121.046755,30.831091],[121.056335,30.835602],[121.062049,30.83779],[121.060228,30.842793],[121.061674,30.843383],[121.06052,30.845187],[121.066999,30.84877],[121.080471,30.848746],[121.097712,30.857103],[121.097684,30.854927],[121.102272,30.850261],[121.104789,30.849335],[121.110906,30.851416],[121.113159,30.854049],[121.114744,30.851476],[121.120055,30.849119],[121.121153,30.850165],[121.123545,30.847267],[121.12025,30.843299],[121.119832,30.83773],[121.117747,30.835301],[121.120639,30.836335],[121.127688,30.83565],[121.129982,30.834892],[121.131609,30.83601],[121.134612,30.833028],[121.132916,30.831608],[121.134264,30.828505],[121.136239,30.827868],[121.13742,30.829985],[121.13742,30.825029],[121.132373,30.819279],[121.130218,30.815574],[121.128202,30.810221],[121.126047,30.79304],[121.126576,30.788998],[121.125255,30.788179],[121.120041,30.788552],[121.117219,30.786073],[121.12342,30.77895],[121.127521,30.778673],[121.131817,30.777313],[121.13603,30.777337],[121.1387,30.77842],[121.140618,30.776928],[121.144122,30.779479],[121.152687,30.778974],[121.155815,30.777205],[121.160681,30.776579],[121.160737,30.773221],[121.163434,30.775279],[121.168968,30.775953],[121.170789,30.777084],[121.170984,30.774677],[121.174668,30.772018],[121.179965,30.774376],[121.183441,30.775038],[121.185791,30.776651],[121.186361,30.779034],[121.189517,30.778974],[121.190963,30.781092],[121.191839,30.778853],[121.196956,30.773354],[121.20032,30.773618],[121.199166,30.780755],[121.200098,30.783294],[121.205534,30.785905],[121.213723,30.785929],[121.217992,30.784954],[121.2234,30.775977],[121.224624,30.776976],[121.226209,30.775087],[121.226918,30.770826],[121.229115,30.767974],[121.230686,30.763737],[121.232298,30.755817],[121.23729,30.752651],[121.243102,30.750533],[121.244756,30.749185],[121.256393,30.743948],[121.261343,30.738217],[121.266835,30.733498],[121.26817,30.734931],[121.271451,30.73227],[121.269755,30.730729],[121.271451,30.726948],[121.270339,30.725864],[121.272035,30.723252],[121.270102,30.72047],[121.270339,30.716894],[121.267057,30.715039],[121.268448,30.712149],[121.265862,30.709488],[121.266668,30.706296],[121.268031,30.706103],[121.268656,30.702129],[121.270672,30.701563],[121.270422,30.69807],[121.271604,30.69689],[121.274649,30.6774],[121.291041,30.678328],[121.326718,30.67593],[121.346642,30.675593],[121.35433,30.676991],[121.361894,30.67952],[121.406997,30.718086],[121.426365,30.730283],[121.478767,30.756347],[121.465072,30.776483],[121.451711,30.798323],[121.44672,30.805577],[121.445427,30.804868],[121.441645,30.806829],[121.437029,30.818101],[121.425989,30.81869],[121.420525,30.819797],[121.419288,30.81602],[121.415131,30.815803],[121.41552,30.819941],[121.414171,30.821757],[121.41235,30.821505],[121.404786,30.823081],[121.400991,30.827399],[121.400685,30.830105],[121.403632,30.829877],[121.404202,30.833797],[121.399712,30.834182],[121.397376,30.833292],[121.396986,30.827988],[121.392051,30.82782],[121.391717,30.829913],[121.387588,30.829864],[121.387588,30.832799],[121.383764,30.833906],[121.379259,30.840112],[121.379065,30.843238],[121.385446,30.843178],[121.384918,30.848073],[121.383722,30.851765],[121.384376,30.856238],[121.383472,30.859232],[121.384001,30.863488],[121.381929,30.863765],[121.381873,30.867324],[121.38286,30.869043],[121.382791,30.874489],[121.381498,30.876605],[121.382207,30.878961],[121.377535,30.879983],[121.371751,30.883698],[121.370166,30.883914],[121.367233,30.886667],[121.36327,30.886955],[121.361185,30.892977],[121.360476,30.897785],[121.358418,30.900598],[121.35668,30.908614],[121.351814,30.913217],[121.350604,30.911402],[121.347573,30.913145],[121.343819,30.909119],[121.340162,30.908554],[121.336631,30.906739],[121.334657,30.907737],[121.331097,30.907508],[121.327635,30.91014],[121.325939,30.908962],[121.321518,30.908986],[121.320127,30.91109],[121.314608,30.909143],[121.313829,30.910717],[121.306808,30.910212],[121.306502,30.912123],[121.303721,30.912099],[121.303443,30.909287],[121.301775,30.908458],[121.29848,30.909744],[121.296269,30.914959],[121.294809,30.914947],[121.294948,30.918504],[121.288844,30.916894],[121.288705,30.909912],[121.290068,30.909804],[121.291013,30.902677],[121.290151,30.900021],[121.288719,30.899961],[121.288413,30.896066],[121.285799,30.895429],[121.285257,30.896631],[121.28231,30.896571],[121.282073,30.894804],[121.27964,30.894456],[121.279098,30.897112],[121.274663,30.896078],[121.27298,30.900405],[121.270422,30.900165],[121.269046,30.901679],[121.266168,30.901715],[121.266932,30.906258],[121.262525,30.906835],[121.262122,30.908097],[121.258952,30.907208],[121.255893,30.907977],[121.255226,30.909551],[121.246619,30.9099],[121.243686,30.917855],[121.245507,30.917074],[121.244589,30.920307],[121.242935,30.91991],[121.240655,30.925149],[121.238166,30.924861],[121.234773,30.925978],[121.234495,30.928562],[121.227335,30.926783],[121.222997,30.930748],[121.218145,30.927684],[121.211026,30.92128],[121.207522,30.919886],[121.194828,30.917314],[121.187765,30.916593],[121.186472,30.915404],[121.174654,30.915115],[121.171262,30.914683],[121.16691,30.916978],[121.164616,30.919934],[121.158206,30.920295],[121.156746,30.918961],[121.156288,30.912616],[121.156649,30.909972],[121.152895,30.9102],[121.149836,30.912616],[121.142162,30.915596],[121.143246,30.918108],[121.139061,30.91961],[121.13742,30.913349],[121.14009,30.910332],[121.139673,30.907388],[121.14098,30.904984],[121.141258,30.901331],[121.134417,30.901812],[121.131706,30.899732],[121.130163,30.902593],[121.123545,30.902857],[121.122224,30.901114],[121.118164,30.901487],[121.113451,30.897425],[121.111087,30.899228],[121.110851,30.90103],[121.113506,30.903602],[121.117802,30.910705],[121.119346,30.911991],[121.121445,30.919958],[121.114591,30.921676],[121.110962,30.921749],[121.105122,30.920138],[121.104358,30.922758],[121.100395,30.926459],[121.091358,30.916185],[121.089022,30.915296],[121.089092,30.911979],[121.093805,30.909708],[121.096196,30.910332],[121.098782,30.906607],[121.097128,30.903206],[121.09425,30.902545],[121.094347,30.904804],[121.091664,30.90341],[121.083725,30.905285],[121.081806,30.904251],[121.080833,30.905946],[121.072421,30.904924],[121.072491,30.903182],[121.068973,30.902124],[121.067944,30.904504],[121.056529,30.90335],[121.053026,30.903374],[121.045184,30.901896],[121.04232,30.899408],[121.040874,30.900706],[121.040332,30.904504],[121.038788,30.902148],[121.034395,30.902737],[121.034659,30.90615],[121.025288,30.909059],[121.024885,30.911618],[121.025872,30.91675],[121.028319,30.922602],[121.028694,30.92754],[121.031503,30.936083],[121.031851,30.939771],[121.029612,30.941874],[121.02989,30.944457],[121.028041,30.94394],[121.019462,30.941165],[121.016932,30.941333],[121.017697,30.939219],[121.015291,30.940288],[121.013831,30.944168],[121.011607,30.943604],[121.011079,30.947184],[121.013345,30.946811],[121.015361,30.948169],[121.010175,30.950727],[121.00763,30.947628],[121.002653,30.947015],[121.002055,30.95104],[120.99673,30.950307]]],[[[121.426671,30.682183],[121.426796,30.680315],[121.428589,30.681749],[121.426671,30.682183]]],[[[121.422458,30.691482],[121.419469,30.691626],[121.419482,30.689856],[121.425364,30.687374],[121.428909,30.689109],[121.426615,30.691277],[121.422458,30.691482]]],[[[121.406775,30.704995],[121.406622,30.703093],[121.409291,30.704514],[121.406775,30.704995]]]]}},{"type":"Feature","properties":{"adcode":310117,"name":"松江区","center":[121.223543,31.03047],"centroid":[121.220231,31.015194],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":12,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.323854,31.162933],[121.322491,31.162394],[121.320934,31.158487],[121.318056,31.157564],[121.316221,31.160189],[121.301441,31.15549],[121.295435,31.15392],[121.287134,31.152313],[121.285438,31.153452],[121.28313,31.152158],[121.283825,31.150839],[121.28028,31.150539],[121.277763,31.152265],[121.278723,31.14825],[121.276415,31.145852],[121.277012,31.144174],[121.279293,31.145708],[121.281781,31.142016],[121.284173,31.142627],[121.287482,31.139954],[121.280989,31.133252],[121.265737,31.136393],[121.26557,31.134787],[121.263623,31.135422],[121.26062,31.132269],[121.261607,31.127173],[121.257965,31.127077],[121.258048,31.132353],[121.25378,31.13264],[121.246995,31.134163],[121.245479,31.130758],[121.239348,31.129955],[121.245326,31.129295],[121.244534,31.125398],[121.239848,31.126238],[121.236831,31.125698],[121.235816,31.118959],[121.233884,31.117316],[121.224095,31.115146],[121.221301,31.115074],[121.221732,31.119931],[121.223581,31.126442],[121.226765,31.134139],[121.227988,31.139091],[121.22055,31.138383],[121.208287,31.135686],[121.206174,31.138299],[121.200348,31.137832],[121.201627,31.140937],[121.199653,31.139582],[121.194717,31.138179],[121.181968,31.143478],[121.181662,31.131777],[121.179868,31.131873],[121.180341,31.127425],[121.181842,31.126957],[121.181815,31.124295],[121.183858,31.124295],[121.183817,31.118695],[121.178839,31.117149],[121.17642,31.119007],[121.174321,31.117868],[121.17521,31.115242],[121.172986,31.114091],[121.174487,31.108538],[121.170497,31.109054],[121.170567,31.107819],[121.166451,31.10831],[121.166799,31.104293],[121.1652,31.104269],[121.165492,31.101438],[121.159569,31.100539],[121.154397,31.101846],[121.154341,31.098884],[121.156788,31.098943],[121.156733,31.09315],[121.155384,31.093162],[121.155161,31.090475],[121.153465,31.09014],[121.152867,31.092035],[121.151157,31.091651],[121.149461,31.095297],[121.14586,31.093954],[121.144483,31.097456],[121.141897,31.096893],[121.141605,31.09868],[121.135766,31.09808],[121.133319,31.099075],[121.131942,31.10205],[121.130691,31.100527],[121.127688,31.103309],[121.125505,31.103369],[121.120959,31.107747],[121.117733,31.108874],[121.11612,31.110973],[121.114368,31.109797],[121.112589,31.111932],[121.108751,31.107159],[121.103551,31.102638],[121.103843,31.100539],[121.100618,31.098428],[121.097976,31.099339],[121.099853,31.096593],[121.099519,31.094158],[121.097601,31.093534],[121.10084,31.088688],[121.099408,31.085941],[121.100687,31.080939],[121.102912,31.080219],[121.107264,31.082115],[121.112603,31.077628],[121.117121,31.075624],[121.118386,31.075948],[121.121543,31.07019],[121.122238,31.067178],[121.126228,31.06665],[121.126395,31.059811],[121.127757,31.059751],[121.12588,31.057376],[121.120708,31.057268],[121.117997,31.058407],[121.118206,31.056068],[121.10864,31.05662],[121.10839,31.057939],[121.101813,31.05728],[121.101146,31.053644],[121.098337,31.05662],[121.094639,31.056332],[121.093012,31.058443],[121.094542,31.061899],[121.092929,31.064539],[121.088202,31.064671],[121.085935,31.062847],[121.086519,31.061167],[121.08442,31.058779],[121.080972,31.056896],[121.082404,31.054208],[121.085866,31.050224],[121.087159,31.052948],[121.089926,31.05194],[121.090259,31.048136],[121.09621,31.044812],[121.09311,31.040719],[121.095863,31.040479],[121.097767,31.038871],[121.100284,31.03341],[121.099936,31.031202],[121.096975,31.031454],[121.096405,31.026437],[121.091177,31.025933],[121.089509,31.027901],[121.085532,31.0255],[121.093026,31.020207],[121.10205,31.011756],[121.104205,31.007998],[121.104107,30.99508],[121.100145,30.994935],[121.099227,30.981979],[121.099686,30.980994],[121.099172,30.973068],[121.095557,30.974245],[121.095779,30.968408],[121.097489,30.965634],[121.093555,30.964673],[121.088035,30.964168],[121.088174,30.962151],[121.081236,30.962283],[121.080736,30.960181],[121.078539,30.960025],[121.079109,30.958283],[121.076634,30.957574],[121.076495,30.955809],[121.07231,30.955088],[121.065344,30.95516],[121.060339,30.956517],[121.059505,30.959184],[121.056891,30.96191],[121.05735,30.965346],[121.053262,30.964445],[121.051024,30.969369],[121.047409,30.969033],[121.0467,30.970246],[121.043112,30.969429],[121.045949,30.963448],[121.042626,30.960433],[121.043516,30.957514],[121.040401,30.956493],[121.036258,30.957094],[121.034659,30.952974],[121.033213,30.947111],[121.027902,30.945826],[121.028041,30.94394],[121.02989,30.944457],[121.029612,30.941874],[121.031851,30.939771],[121.031503,30.936083],[121.028694,30.92754],[121.028319,30.922602],[121.025872,30.91675],[121.024885,30.911618],[121.025288,30.909059],[121.034659,30.90615],[121.034395,30.902737],[121.038788,30.902148],[121.040332,30.904504],[121.040874,30.900706],[121.04232,30.899408],[121.045184,30.901896],[121.053026,30.903374],[121.056529,30.90335],[121.067944,30.904504],[121.068973,30.902124],[121.072491,30.903182],[121.072421,30.904924],[121.080833,30.905946],[121.081806,30.904251],[121.083725,30.905285],[121.091664,30.90341],[121.094347,30.904804],[121.09425,30.902545],[121.097128,30.903206],[121.098782,30.906607],[121.096196,30.910332],[121.093805,30.909708],[121.089092,30.911979],[121.089022,30.915296],[121.091358,30.916185],[121.100395,30.926459],[121.104358,30.922758],[121.105122,30.920138],[121.110962,30.921749],[121.114591,30.921676],[121.121445,30.919958],[121.119346,30.911991],[121.117802,30.910705],[121.113506,30.903602],[121.110851,30.90103],[121.111087,30.899228],[121.113451,30.897425],[121.118164,30.901487],[121.122224,30.901114],[121.123545,30.902857],[121.130163,30.902593],[121.131706,30.899732],[121.134417,30.901812],[121.141258,30.901331],[121.14098,30.904984],[121.139673,30.907388],[121.14009,30.910332],[121.13742,30.913349],[121.139061,30.91961],[121.143246,30.918108],[121.142162,30.915596],[121.149836,30.912616],[121.152895,30.9102],[121.156649,30.909972],[121.156288,30.912616],[121.156746,30.918961],[121.158206,30.920295],[121.164616,30.919934],[121.16691,30.916978],[121.171262,30.914683],[121.174654,30.915115],[121.186472,30.915404],[121.187765,30.916593],[121.194828,30.917314],[121.207522,30.919886],[121.211026,30.92128],[121.218145,30.927684],[121.222997,30.930748],[121.227335,30.926783],[121.234495,30.928562],[121.234773,30.925978],[121.238166,30.924861],[121.240655,30.925149],[121.242935,30.91991],[121.244589,30.920307],[121.245507,30.917074],[121.243686,30.917855],[121.246619,30.9099],[121.255226,30.909551],[121.255893,30.907977],[121.258952,30.907208],[121.262122,30.908097],[121.262525,30.906835],[121.266932,30.906258],[121.266168,30.901715],[121.269046,30.901679],[121.270422,30.900165],[121.27298,30.900405],[121.274663,30.896078],[121.279098,30.897112],[121.27964,30.894456],[121.282073,30.894804],[121.28231,30.896571],[121.285257,30.896631],[121.285799,30.895429],[121.288413,30.896066],[121.288719,30.899961],[121.290151,30.900021],[121.291013,30.902677],[121.290068,30.909804],[121.288705,30.909912],[121.288844,30.916894],[121.294948,30.918504],[121.294809,30.914947],[121.296269,30.914959],[121.29848,30.909744],[121.301775,30.908458],[121.303443,30.909287],[121.303721,30.912099],[121.306502,30.912123],[121.306808,30.910212],[121.313829,30.910717],[121.314608,30.909143],[121.320127,30.91109],[121.321518,30.908986],[121.325939,30.908962],[121.327635,30.91014],[121.331097,30.907508],[121.334657,30.907737],[121.336631,30.906739],[121.340162,30.908554],[121.343819,30.909119],[121.347573,30.913145],[121.350604,30.911402],[121.351814,30.913217],[121.355081,30.916341],[121.356054,30.919742],[121.355373,30.921388],[121.352161,30.923803],[121.352203,30.928213],[121.35116,30.930628],[121.355679,30.932058],[121.354706,30.933512],[121.357361,30.933632],[121.359336,30.935086],[121.362658,30.934761],[121.362408,30.939122],[121.361129,30.944048],[121.363868,30.945165],[121.365467,30.947232],[121.362478,30.948901],[121.362255,30.9517],[121.363117,30.956109],[121.362853,30.959544],[121.36099,30.965574],[121.361435,30.970438],[121.359961,30.976251],[121.35871,30.97786],[121.351258,30.975986],[121.34375,30.976599],[121.334406,30.980694],[121.329554,30.981318],[121.327371,30.980658],[121.3258,30.9833],[121.326898,30.989964],[121.326773,30.994479],[121.327482,30.995896],[121.330347,30.996905],[121.33823,31.006197],[121.339829,31.010267],[121.34425,31.013941],[121.34279,31.014817],[121.339898,31.013857],[121.333072,31.01334],[121.333725,31.015657],[121.333892,31.026917],[121.333308,31.030686],[121.334017,31.031922],[121.33367,31.040695],[121.335102,31.04564],[121.335338,31.060435],[121.341456,31.062763],[121.343444,31.059139],[121.35344,31.061287],[121.358195,31.064047],[121.357278,31.066758],[121.363743,31.068354],[121.364424,31.069878],[121.362116,31.072601],[121.364341,31.073705],[121.365481,31.077892],[121.368804,31.079127],[121.370625,31.078372],[121.372016,31.079871],[121.368289,31.088976],[121.362756,31.099771],[121.359085,31.098931],[121.35839,31.100791],[121.351341,31.099255],[121.348532,31.106655],[121.351675,31.107735],[121.352217,31.106487],[121.357014,31.110529],[121.356026,31.112532],[121.353774,31.111512],[121.35066,31.115554],[121.353065,31.117604],[121.349589,31.117748],[121.346753,31.121657],[121.347545,31.121969],[121.34489,31.12577],[121.346002,31.126202],[121.344014,31.129451],[121.344681,31.130338],[121.342095,31.134655],[121.33677,31.138971],[121.338814,31.14017],[121.336728,31.14355],[121.335477,31.143862],[121.333711,31.148765],[121.331292,31.149772],[121.331528,31.15205],[121.328775,31.156665],[121.327218,31.156856],[121.323854,31.162933]]]]}},{"type":"Feature","properties":{"adcode":310118,"name":"青浦区","center":[121.113021,31.151209],"centroid":[121.085188,31.124681],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":13,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.153743,31.276646],[121.150392,31.275437],[121.142996,31.275473],[121.142885,31.277664],[121.141161,31.276742],[121.137601,31.277592],[121.138032,31.278753],[121.131678,31.281363],[121.131053,31.280106],[121.127215,31.281207],[121.124323,31.283111],[121.125018,31.284404],[121.120361,31.286151],[121.11929,31.285122],[121.114994,31.285265],[121.111115,31.281746],[121.106666,31.276706],[121.103829,31.27533],[121.105442,31.273654],[121.09881,31.276251],[121.095404,31.287001],[121.093096,31.28821],[121.090134,31.291909],[121.086909,31.291717],[121.087326,31.290664],[121.084698,31.2876],[121.081361,31.277257],[121.084545,31.275713],[121.082154,31.271535],[121.080416,31.270158],[121.072741,31.26914],[121.068695,31.268098],[121.063245,31.267907],[121.061952,31.257945],[121.060979,31.246486],[121.057669,31.246749],[121.061646,31.24524],[121.064343,31.246138],[121.063565,31.242222],[121.063898,31.238438],[121.061243,31.237827],[121.062605,31.234689],[121.06458,31.232965],[121.067388,31.232929],[121.06718,31.230917],[121.064649,31.230785],[121.064719,31.227275],[121.0628,31.226964],[121.062633,31.224664],[121.065608,31.211871],[121.067805,31.201005],[121.069209,31.196524],[121.066609,31.197183],[121.06679,31.194966],[121.069599,31.195314],[121.070113,31.193612],[121.072185,31.193169],[121.07256,31.191527],[121.070614,31.1913],[121.07035,31.188735],[121.071684,31.185955],[121.068751,31.184889],[121.069474,31.182888],[121.074993,31.184386],[121.075591,31.182852],[121.071225,31.181462],[121.071406,31.179472],[121.074229,31.176225],[121.075424,31.173444],[121.072532,31.172701],[121.072379,31.169609],[121.075466,31.170316],[121.077371,31.16454],[121.07313,31.163257],[121.0737,31.161711],[121.076787,31.162622],[121.07605,31.160536],[121.077023,31.158451],[121.073839,31.157072],[121.072046,31.153512],[121.067777,31.152289],[121.069126,31.148705],[121.06572,31.148597],[121.066067,31.150947],[121.064135,31.150839],[121.062564,31.153129],[121.057378,31.152781],[121.055834,31.150659],[121.050273,31.150719],[121.049133,31.154615],[121.04542,31.154028],[121.045254,31.151582],[121.041472,31.14982],[121.041541,31.146931],[121.044781,31.145528],[121.041819,31.138899],[121.038649,31.136909],[121.036258,31.137376],[121.036119,31.140325],[121.033088,31.142208],[121.028778,31.141249],[121.028375,31.143874],[121.02672,31.143766],[121.025677,31.140769],[121.022271,31.140457],[121.022813,31.138311],[121.018489,31.134103],[121.007269,31.13342],[120.991252,31.13318],[120.983911,31.131705],[120.952642,31.138251],[120.93034,31.141404],[120.916923,31.136189],[120.905397,31.134211],[120.89921,31.136057],[120.881289,31.134727],[120.876422,31.131489],[120.872349,31.127161],[120.871014,31.123804],[120.870597,31.119715],[120.865967,31.11475],[120.862241,31.112508],[120.860225,31.10933],[120.857917,31.108526],[120.856804,31.102829],[120.859766,31.100287],[120.863993,31.100299],[120.865744,31.097624],[120.869582,31.097216],[120.869818,31.098943],[120.872543,31.098884],[120.873169,31.100323],[120.876631,31.099939],[120.876005,31.097864],[120.878967,31.09838],[120.878077,31.095753],[120.887476,31.094074],[120.891021,31.094302],[120.891216,31.09718],[120.892842,31.096533],[120.892175,31.094194],[120.895415,31.090703],[120.896694,31.086649],[120.899294,31.086937],[120.902116,31.085653],[120.901671,31.084094],[120.90473,31.080495],[120.904619,31.078528],[120.899614,31.07836],[120.898863,31.070514],[120.895915,31.063075],[120.894622,31.058659],[120.894567,31.053896],[120.895442,31.050332],[120.897208,31.04822],[120.897027,31.04558],[120.899739,31.039603],[120.901977,31.037647],[120.901338,31.0255],[120.900559,31.020423],[120.901365,31.017494],[120.910055,31.016942],[120.909944,31.012644],[120.911014,31.010555],[120.918105,31.012788],[120.926155,31.010423],[120.92699,31.012068],[120.931383,31.01178],[120.933789,31.010027],[120.938085,31.009007],[120.940087,31.010027],[120.935749,31.015381],[120.936305,31.01711],[120.949972,31.017638],[120.951168,31.024012],[120.948735,31.025068],[120.949124,31.029953],[120.951085,31.029077],[120.952197,31.030254],[120.958301,31.028573],[120.960483,31.021659],[120.964293,31.020771],[120.964849,31.019751],[120.963209,31.016594],[120.970202,31.016149],[120.982993,31.016089],[120.983855,31.014445],[120.989514,31.014397],[120.989987,31.010495],[120.991933,31.008154],[120.991057,31.00747],[120.992086,31.003424],[120.992045,30.997109],[120.989834,30.996664],[120.990515,30.994551],[120.994839,30.99526],[120.994603,30.991922],[120.997133,30.989232],[120.999344,30.980106],[121.000832,30.980466],[121.002361,30.97762],[121.000567,30.977007],[121.000512,30.973933],[120.99737,30.972444],[120.993143,30.972119],[120.991433,30.968372],[120.993699,30.964024],[120.992601,30.962835],[120.994756,30.958703],[120.991683,30.958211],[120.992531,30.955028],[120.994797,30.954824],[120.995368,30.950367],[120.99673,30.950307],[121.002055,30.95104],[121.002653,30.947015],[121.00763,30.947628],[121.010175,30.950727],[121.015361,30.948169],[121.013345,30.946811],[121.011079,30.947184],[121.011607,30.943604],[121.013831,30.944168],[121.015291,30.940288],[121.017697,30.939219],[121.016932,30.941333],[121.019462,30.941165],[121.028041,30.94394],[121.027902,30.945826],[121.033213,30.947111],[121.034659,30.952974],[121.036258,30.957094],[121.040401,30.956493],[121.043516,30.957514],[121.042626,30.960433],[121.045949,30.963448],[121.043112,30.969429],[121.0467,30.970246],[121.047409,30.969033],[121.051024,30.969369],[121.053262,30.964445],[121.05735,30.965346],[121.056891,30.96191],[121.059505,30.959184],[121.060339,30.956517],[121.065344,30.95516],[121.07231,30.955088],[121.076495,30.955809],[121.076634,30.957574],[121.079109,30.958283],[121.078539,30.960025],[121.080736,30.960181],[121.081236,30.962283],[121.088174,30.962151],[121.088035,30.964168],[121.093555,30.964673],[121.097489,30.965634],[121.095779,30.968408],[121.095557,30.974245],[121.099172,30.973068],[121.099686,30.980994],[121.099227,30.981979],[121.100145,30.994935],[121.104107,30.99508],[121.104205,31.007998],[121.10205,31.011756],[121.093026,31.020207],[121.085532,31.0255],[121.089509,31.027901],[121.091177,31.025933],[121.096405,31.026437],[121.096975,31.031454],[121.099936,31.031202],[121.100284,31.03341],[121.097767,31.038871],[121.095863,31.040479],[121.09311,31.040719],[121.09621,31.044812],[121.090259,31.048136],[121.089926,31.05194],[121.087159,31.052948],[121.085866,31.050224],[121.082404,31.054208],[121.080972,31.056896],[121.08442,31.058779],[121.086519,31.061167],[121.085935,31.062847],[121.088202,31.064671],[121.092929,31.064539],[121.094542,31.061899],[121.093012,31.058443],[121.094639,31.056332],[121.098337,31.05662],[121.101146,31.053644],[121.101813,31.05728],[121.10839,31.057939],[121.10864,31.05662],[121.118206,31.056068],[121.117997,31.058407],[121.120708,31.057268],[121.12588,31.057376],[121.127757,31.059751],[121.126395,31.059811],[121.126228,31.06665],[121.122238,31.067178],[121.121543,31.07019],[121.118386,31.075948],[121.117121,31.075624],[121.112603,31.077628],[121.107264,31.082115],[121.102912,31.080219],[121.100687,31.080939],[121.099408,31.085941],[121.10084,31.088688],[121.097601,31.093534],[121.099519,31.094158],[121.099853,31.096593],[121.097976,31.099339],[121.100618,31.098428],[121.103843,31.100539],[121.103551,31.102638],[121.108751,31.107159],[121.112589,31.111932],[121.114368,31.109797],[121.11612,31.110973],[121.117733,31.108874],[121.120959,31.107747],[121.125505,31.103369],[121.127688,31.103309],[121.130691,31.100527],[121.131942,31.10205],[121.133319,31.099075],[121.135766,31.09808],[121.141605,31.09868],[121.141897,31.096893],[121.144483,31.097456],[121.14586,31.093954],[121.149461,31.095297],[121.151157,31.091651],[121.152867,31.092035],[121.153465,31.09014],[121.155161,31.090475],[121.155384,31.093162],[121.156733,31.09315],[121.156788,31.098943],[121.154341,31.098884],[121.154397,31.101846],[121.159569,31.100539],[121.165492,31.101438],[121.1652,31.104269],[121.166799,31.104293],[121.166451,31.10831],[121.170567,31.107819],[121.170497,31.109054],[121.174487,31.108538],[121.172986,31.114091],[121.17521,31.115242],[121.174321,31.117868],[121.17642,31.119007],[121.178839,31.117149],[121.183817,31.118695],[121.183858,31.124295],[121.181815,31.124295],[121.181842,31.126957],[121.180341,31.127425],[121.179868,31.131873],[121.181662,31.131777],[121.181968,31.143478],[121.194717,31.138179],[121.199653,31.139582],[121.201627,31.140937],[121.200348,31.137832],[121.206174,31.138299],[121.208287,31.135686],[121.22055,31.138383],[121.227988,31.139091],[121.226765,31.134139],[121.223581,31.126442],[121.221732,31.119931],[121.221301,31.115074],[121.224095,31.115146],[121.233884,31.117316],[121.235816,31.118959],[121.236831,31.125698],[121.239848,31.126238],[121.244534,31.125398],[121.245326,31.129295],[121.239348,31.129955],[121.245479,31.130758],[121.246995,31.134163],[121.25378,31.13264],[121.258048,31.132353],[121.257965,31.127077],[121.261607,31.127173],[121.26062,31.132269],[121.263623,31.135422],[121.26557,31.134787],[121.265737,31.136393],[121.280989,31.133252],[121.287482,31.139954],[121.284173,31.142627],[121.281781,31.142016],[121.279293,31.145708],[121.277012,31.144174],[121.276415,31.145852],[121.278723,31.14825],[121.277763,31.152265],[121.28028,31.150539],[121.283825,31.150839],[121.28313,31.152158],[121.285438,31.153452],[121.287134,31.152313],[121.295435,31.15392],[121.301441,31.15549],[121.316221,31.160189],[121.318056,31.157564],[121.320934,31.158487],[121.322491,31.162394],[121.323854,31.162933],[121.318584,31.170256],[121.318042,31.173624],[121.316304,31.176836],[121.310784,31.18423],[121.30856,31.188388],[121.300565,31.197027],[121.297506,31.201412],[121.294837,31.203077],[121.292431,31.202514],[121.292126,31.200621],[121.287329,31.196332],[121.284034,31.194391],[121.277388,31.193576],[121.271701,31.198309],[121.266724,31.203257],[121.264777,31.203317],[121.263053,31.205701],[121.26468,31.206731],[121.263846,31.208912],[121.259397,31.212769],[121.261218,31.215081],[121.259675,31.218148],[121.25745,31.220208],[121.258215,31.222772],[121.256588,31.226329],[121.258006,31.226868],[121.257158,31.230701],[121.254155,31.23312],[121.252792,31.236965],[121.251082,31.238198],[121.249692,31.236534],[121.247912,31.240917],[121.241391,31.240222],[121.239932,31.241061],[121.241683,31.247348],[121.24591,31.248821],[121.247314,31.253287],[121.254183,31.258688],[121.246758,31.258448],[121.246577,31.259801],[121.242253,31.25937],[121.237693,31.262088],[121.235177,31.262699],[121.229087,31.262711],[121.229198,31.261717],[121.223539,31.260532],[121.223859,31.259035],[121.220216,31.257406],[121.221273,31.256293],[121.214182,31.254353],[121.212625,31.259837],[121.209761,31.260831],[121.209816,31.258017],[121.208482,31.25749],[121.206368,31.260065],[121.202865,31.257131],[121.203143,31.255814],[121.199848,31.255239],[121.19608,31.253395],[121.19626,31.251228],[121.193368,31.251455],[121.193021,31.253623],[121.188377,31.25476],[121.186444,31.252329],[121.183928,31.252246],[121.181537,31.254413],[121.17934,31.253419],[121.178798,31.255862],[121.176768,31.254605],[121.174251,31.256856],[121.171415,31.254928],[121.16894,31.256197],[121.170386,31.259119],[121.168036,31.259622],[121.167661,31.263944],[121.162614,31.269176],[121.161057,31.26762],[121.157845,31.270541],[121.155537,31.266147],[121.151783,31.267632],[121.153924,31.272061],[121.153743,31.276646]]]]}},{"type":"Feature","properties":{"adcode":310120,"name":"奉贤区","center":[121.458472,30.912345],"centroid":[121.56251,30.897998],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":14,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.570475,30.998345],[121.561494,30.995644],[121.555918,30.995152],[121.556224,30.993374],[121.553304,30.993026],[121.55279,30.98886],[121.549537,30.988307],[121.54613,30.99305],[121.543294,30.994203],[121.538233,30.993146],[121.537774,30.994683],[121.534507,30.995848],[121.531962,30.994815],[121.528612,30.99592],[121.522897,30.99981],[121.520325,30.999354],[121.520089,31.00256],[121.522105,31.002199],[121.520853,31.004445],[121.517002,31.007626],[121.510412,31.004553],[121.507881,31.004745],[121.503057,31.002716],[121.49883,30.999426],[121.498872,30.998213],[121.495924,30.998297],[121.491948,31.010039],[121.492879,31.012752],[121.489153,31.014949],[121.485872,31.014073],[121.476362,31.01334],[121.47144,31.011948],[121.465587,31.008755],[121.459942,31.007398],[121.448305,31.007458],[121.440811,31.005789],[121.436834,31.00406],[121.433636,31.001779],[121.431426,30.999174],[121.423973,30.994515],[121.413184,30.991069],[121.409333,30.990229],[121.394261,30.988247],[121.375227,30.982832],[121.35871,30.97786],[121.359961,30.976251],[121.361435,30.970438],[121.36099,30.965574],[121.362853,30.959544],[121.363117,30.956109],[121.362255,30.9517],[121.362478,30.948901],[121.365467,30.947232],[121.363868,30.945165],[121.361129,30.944048],[121.362408,30.939122],[121.362658,30.934761],[121.359336,30.935086],[121.357361,30.933632],[121.354706,30.933512],[121.355679,30.932058],[121.35116,30.930628],[121.352203,30.928213],[121.352161,30.923803],[121.355373,30.921388],[121.356054,30.919742],[121.355081,30.916341],[121.351814,30.913217],[121.35668,30.908614],[121.358418,30.900598],[121.360476,30.897785],[121.361185,30.892977],[121.36327,30.886955],[121.367233,30.886667],[121.370166,30.883914],[121.371751,30.883698],[121.377535,30.879983],[121.382207,30.878961],[121.381498,30.876605],[121.382791,30.874489],[121.38286,30.869043],[121.381873,30.867324],[121.381929,30.863765],[121.384001,30.863488],[121.383472,30.859232],[121.384376,30.856238],[121.383722,30.851765],[121.384918,30.848073],[121.385446,30.843178],[121.379065,30.843238],[121.379259,30.840112],[121.383764,30.833906],[121.387588,30.832799],[121.387588,30.829864],[121.391717,30.829913],[121.392051,30.82782],[121.396986,30.827988],[121.397376,30.833292],[121.399712,30.834182],[121.404202,30.833797],[121.403632,30.829877],[121.400685,30.830105],[121.400991,30.827399],[121.404786,30.823081],[121.41235,30.821505],[121.414171,30.821757],[121.41552,30.819941],[121.415131,30.815803],[121.419288,30.81602],[121.420525,30.819797],[121.425989,30.81869],[121.437029,30.818101],[121.441645,30.806829],[121.445427,30.804868],[121.44672,30.805577],[121.451711,30.798323],[121.465072,30.776483],[121.478767,30.756347],[121.517197,30.775387],[121.552832,30.789395],[121.601327,30.805084],[121.648419,30.8162],[121.68119,30.818401],[121.727071,30.817716],[121.77914,30.817222],[121.793767,30.816862],[121.769338,30.85043],[121.768143,30.863272],[121.771605,30.875427],[121.772481,30.875703],[121.773134,30.880596],[121.776679,30.881005],[121.776012,30.886426],[121.778807,30.894588],[121.778987,30.899468],[121.778334,30.903807],[121.77896,30.910116],[121.780239,30.911811],[121.781115,30.917567],[121.777653,30.926723],[121.777806,30.931025],[121.77337,30.931553],[121.773023,30.933932],[121.769769,30.935278],[121.76799,30.93833],[121.766432,30.936539],[121.763846,30.936852],[121.764277,30.938522],[121.761469,30.938414],[121.761677,30.940132],[121.764542,30.941766],[121.760927,30.944613],[121.761024,30.947604],[121.759286,30.949154],[121.751987,30.952721],[121.749234,30.953046],[121.747857,30.951893],[121.743742,30.956589],[121.739988,30.956721],[121.73686,30.958703],[121.737916,30.960637],[121.733954,30.964469],[121.73191,30.967784],[121.712792,30.980934],[121.705507,30.984981],[121.699459,30.987419],[121.69298,30.98934],[121.688086,30.990145],[121.683595,30.989808],[121.674558,30.991802],[121.673348,30.989832],[121.669525,30.991609],[121.663115,30.992714],[121.654536,30.993254],[121.646695,30.99335],[121.62057,30.992678],[121.61772,30.995692],[121.614717,31.001251],[121.604066,31.001131],[121.595585,31.002043],[121.594682,31.000699],[121.584309,31.000819],[121.582933,30.999498],[121.576746,30.999474],[121.570475,30.998345]]]]}},{"type":"Feature","properties":{"adcode":310151,"name":"崇明区","center":[121.397516,31.626946],"centroid":[121.568484,31.635916],"childrenNum":0,"level":"district","parent":{"adcode":310000},"subFeatureIndex":15,"acroutes":[100000,310000]},"geometry":{"type":"MultiPolygon","coordinates":[[[[121.975181,31.617034],[121.887616,31.63638],[121.817806,31.652025],[121.715267,31.673842],[121.642649,31.697454],[121.633278,31.696167],[121.627341,31.697776],[121.611755,31.704283],[121.602746,31.70694],[121.60091,31.707],[121.599659,31.703115],[121.593249,31.705379],[121.592262,31.706487],[121.578539,31.710527],[121.565025,31.716711],[121.551386,31.727386],[121.549509,31.726969],[121.540124,31.733307],[121.539429,31.735499],[121.528361,31.738347],[121.526693,31.740217],[121.514986,31.742873],[121.51304,31.743695],[121.498566,31.75326],[121.487749,31.753415],[121.476807,31.756142],[121.464141,31.757142],[121.455576,31.759346],[121.449751,31.761668],[121.445385,31.7643],[121.431481,31.769266],[121.425781,31.774267],[121.420915,31.779602],[121.410904,31.79558],[121.416312,31.79764],[121.411488,31.806341],[121.405468,31.809841],[121.399142,31.817483],[121.395388,31.821291],[121.385043,31.833525],[121.376381,31.838571],[121.369291,31.843283],[121.323061,31.868529],[121.315859,31.871479],[121.310367,31.872502],[121.3019,31.872716],[121.291166,31.870992],[121.281336,31.869041],[121.265584,31.864128],[121.252111,31.857727],[121.242073,31.853397],[121.225305,31.847043],[121.200334,31.835144],[121.181509,31.820411],[121.149225,31.787294],[121.118498,31.759084],[121.142064,31.755308],[121.145332,31.753927],[121.179868,31.720774],[121.289109,31.616283],[121.345585,31.571685],[121.37221,31.55321],[121.395457,31.585444],[121.403521,31.590002],[121.414797,31.591076],[121.43422,31.590336],[121.471176,31.57443],[121.547673,31.531125],[121.608794,31.50691],[121.617678,31.503673],[121.625784,31.501775],[121.638645,31.49972],[121.670609,31.494214],[121.682858,31.491061],[121.72988,31.471973],[121.763443,31.458233],[121.819183,31.438206],[121.834212,31.433975],[121.845377,31.431895],[121.857807,31.430043],[121.87299,31.429338],[121.882096,31.428656],[121.89055,31.428788],[121.901144,31.430126],[121.918051,31.434692],[121.934304,31.442364],[121.967284,31.456656],[121.981813,31.4641],[121.991698,31.476763],[121.995716,31.493104],[121.993867,31.51189],[121.98825,31.529597],[121.975181,31.617034]]],[[[121.778862,31.310196],[121.785494,31.311058],[121.791042,31.308353],[121.796701,31.30736],[121.798772,31.310352],[121.795866,31.329976],[121.796478,31.33542],[121.796005,31.345624],[121.793002,31.355074],[121.792377,31.363304],[121.790875,31.367059],[121.787886,31.37164],[121.780572,31.380154],[121.774135,31.386982],[121.76938,31.390749],[121.760857,31.395185],[121.753725,31.400362],[121.742185,31.407212],[121.737485,31.408814],[121.729296,31.410356],[121.723707,31.412364],[121.708316,31.419728],[121.697193,31.423995],[121.688294,31.425883],[121.673835,31.427748],[121.621752,31.444145],[121.606319,31.449403],[121.599812,31.450681],[121.585561,31.454672],[121.58303,31.456262],[121.575828,31.463813],[121.572811,31.469452],[121.567347,31.4835],[121.562356,31.486367],[121.549926,31.489747],[121.521132,31.493976],[121.516933,31.494298],[121.513457,31.493355],[121.509355,31.489795],[121.509105,31.485352],[121.510134,31.482581],[121.516849,31.477313],[121.529515,31.471172],[121.537413,31.466704],[121.54328,31.462403],[121.549773,31.457062],[121.558463,31.448793],[121.572255,31.436066],[121.590371,31.427545],[121.601425,31.421855],[121.641036,31.401115],[121.686682,31.376591],[121.727933,31.354799],[121.740766,31.346486],[121.744659,31.343675],[121.751166,31.337801],[121.76076,31.320344],[121.76425,31.315306],[121.770951,31.31168],[121.778862,31.310196]]],[[[122.242018,31.419082],[122.243562,31.417839],[122.247149,31.419333],[122.245369,31.421318],[122.242018,31.419082]]],[[[121.801775,31.356976],[121.802693,31.342789],[121.803152,31.332106],[121.80375,31.328445],[121.806642,31.324173],[121.81319,31.316228],[121.822617,31.307372],[121.832043,31.301711],[121.833601,31.299653],[121.840566,31.29544],[121.852885,31.292364],[121.856681,31.292818],[121.860782,31.294949],[121.865968,31.294937],[121.88959,31.292028],[121.900755,31.291167],[121.932261,31.283147],[121.975779,31.279998],[122.016447,31.282285],[122.072005,31.266829],[122.087285,31.257538],[122.097769,31.255658],[122.105207,31.262136],[122.122684,31.307205],[122.121975,31.315438],[122.116678,31.321229],[122.078012,31.323527],[122.04107,31.323814],[122.001556,31.329246],[121.951726,31.337274],[121.913074,31.350445],[121.870376,31.366007],[121.858516,31.369379],[121.852885,31.371376],[121.845586,31.374582],[121.831752,31.375526],[121.828401,31.376447],[121.824744,31.378588],[121.817445,31.380585],[121.803458,31.381219],[121.796756,31.381075],[121.793864,31.380477],[121.792808,31.377571],[121.797674,31.369642],[121.800566,31.363997],[121.801775,31.356976]]],[[[121.627049,31.444993],[121.631512,31.445101],[121.634001,31.445937],[121.636295,31.449881],[121.635044,31.452988],[121.631609,31.456823],[121.625172,31.462212],[121.61366,31.471339],[121.608571,31.474446],[121.602134,31.476835],[121.595293,31.478292],[121.586896,31.479535],[121.577149,31.479343],[121.575814,31.478197],[121.57612,31.474768],[121.577886,31.472486],[121.58627,31.464076],[121.594153,31.458568],[121.613855,31.447885],[121.616872,31.446643],[121.627049,31.444993]]]]}}]}
\ No newline at end of file
diff --git a/ui/public/img/ver.svg b/ui/public/img/ver.svg
new file mode 100644
index 0000000..34fd73b
--- /dev/null
+++ b/ui/public/img/ver.svg
@@ -0,0 +1,236 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 456 262.1" style="enable-background:new 0 0 456 262.1;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.4;fill:url(#SVGID_1_);enable-background:new    ;}
+	.st1{opacity:0.7;}
+	.st2{opacity:0.4;fill:url(#SVGID_2_);enable-background:new    ;}
+	.st3{opacity:0.4;fill:url(#SVGID_3_);enable-background:new    ;}
+	.st4{opacity:0.4;fill:url(#SVGID_4_);enable-background:new    ;}
+	.st5{opacity:0.4;fill:url(#SVGID_5_);enable-background:new    ;}
+	.st6{opacity:0.6;}
+	.st7{fill:#0073CD;}
+	.st8{fill:#40A8F5;}
+	.st9{fill:#53B9F5;}
+	.st10{fill:#85D3FF;}
+	.st11{fill:#8CD7FF;}
+	.st12{fill:#EBFCFF;}
+	.st13{fill:none;stroke:url(#SVGID_6_);stroke-width:2;stroke-miterlimit:10;}
+	.st14{fill:none;stroke:url(#SVGID_7_);stroke-width:2;stroke-miterlimit:10;}
+	.st15{fill:none;stroke:url(#SVGID_8_);stroke-width:2;stroke-miterlimit:10;}
+	.st16{fill:none;stroke:url(#SVGID_9_);stroke-width:2;stroke-miterlimit:10;}
+	.st17{fill:none;stroke:url(#SVGID_10_);stroke-width:2;stroke-miterlimit:10;}
+	.st18{fill:none;stroke:url(#SVGID_11_);stroke-width:2;stroke-miterlimit:10;}
+</style>
+<title>升级中</title>
+<g id="图层_2_1_">
+	<g id="图层_1-2">
+		
+			<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="232.745" y1="39.57" x2="232.745" y2="1.88" gradientTransform="matrix(1 0 0 -1 0 264)">
+			<stop  offset="0" style="stop-color:#81CFFF"/>
+			<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+		</linearGradient>
+		<path class="st0" d="M412.3,262.1c-23-23-61-37.7-179.5-37.7S76.2,239.1,53.2,262.1H412.3z"/>
+		<g class="st1">
+			
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="349.365" y1="237.3224" x2="349.365" y2="59.9676" gradientTransform="matrix(1 0 0 -1 0 264)">
+				<stop  offset="0" style="stop-color:#81CFFF"/>
+				<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+			</linearGradient>
+			<path class="st2" d="M380.7,26.7h-62.6c-1.5-0.1-2.8,1.1-2.8,2.6v172.2c0.1,1.5,1.3,2.7,2.8,2.6h62.6c1.5,0.1,2.7-1.1,2.8-2.6
+				V29.3C383.4,27.8,382.2,26.6,380.7,26.7z M328.3,147c0,0.5-0.4,0.9-0.9,0.9c0,0,0,0,0,0h-3.6c-0.5,0-0.9-0.4-0.9-0.8c0,0,0,0,0,0
+				v-19.7c0-0.5,0.4-0.9,0.9-0.9c0,0,0,0,0,0h3.6c0.5,0,0.9,0.4,0.9,0.9c0,0,0,0,0,0V147z M328.3,116.8c0,0.5-0.4,0.9-0.9,0.9
+				c0,0,0,0,0,0h-3.6c-0.5,0-0.9-0.4-0.9-0.9c0,0,0,0,0,0V97c0-0.5,0.4-0.9,0.9-0.9c0,0,0,0,0,0h3.6c0.5,0,0.9,0.4,0.9,0.9
+				c0,0,0,0,0,0V116.8z M328.3,86.5c0,0.5-0.4,0.9-0.9,0.9c0,0,0,0,0,0h-3.6c-0.5,0-0.9-0.4-0.9-0.9c0,0,0,0,0,0V66.8
+				c0-0.5,0.4-0.9,0.9-0.9c0,0,0,0,0,0h3.6c0.5,0,0.9,0.4,0.9,0.9c0,0,0,0,0,0V86.5z M328.3,56.3c0,0.5-0.4,0.9-0.9,0.9c0,0,0,0,0,0
+				h-3.6c-0.5,0-0.9-0.4-0.9-0.9c0,0,0,0,0,0V36.6c0-0.5,0.4-0.9,0.9-0.9c0,0,0,0,0,0h3.6c0.5,0,0.9,0.4,0.9,0.9c0,0,0,0,0,0V56.3z
+				 M340,147c0,0.5-0.4,0.9-0.9,0.9c0,0,0,0,0,0h-3.6c-0.5,0-0.9-0.4-0.9-0.9c0,0,0,0,0,0v-19.7c0-0.5,0.4-0.9,1-0.9h3.6
+				c0.5,0,0.9,0.4,0.9,0.9V147z M340,116.8c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-1-0.9V97c0-0.5,0.4-0.9,1-0.9h3.6
+				c0.5,0,0.9,0.4,0.9,0.9V116.8z M340,86.5c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-1-0.9V66.8c0-0.5,0.4-0.9,1-0.9h3.6
+				c0.5,0,0.9,0.4,0.9,0.9V86.5z M340,56.3c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-1-0.9V36.6c0-0.5,0.4-0.9,1-0.9h3.6
+				c0.5,0,0.9,0.4,0.9,0.9V56.3z M351.7,147c0,0.5-0.4,0.9-0.9,0.9c0,0,0,0,0,0h-3.6c-0.5,0-0.9-0.4-0.9-0.9c0,0,0,0,0,0v-19.7
+				c0-0.5,0.4-0.9,0.9-0.9h3.6c0.5,0,0.9,0.4,0.9,0.9V147z M351.7,116.8c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V97
+				c0-0.5,0.4-0.9,0.9-0.9h3.6c0.5,0,0.9,0.4,0.9,0.9V116.8z M351.7,86.5c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V66.8
+				c0-0.5,0.4-0.9,0.9-0.9h3.6c0.5,0,0.9,0.4,0.9,0.9V86.5z M351.7,56.3c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V36.6
+				c0-0.5,0.4-0.9,0.9-0.9h3.6c0.5,0,0.9,0.4,0.9,0.9V56.3z M363.4,147c0,0.5-0.4,0.9-0.9,0.9c0,0,0,0,0,0h-3.6
+				c-0.5,0-0.9-0.4-0.9-0.9c0,0,0,0,0,0v-19.7c0-0.5,0.4-0.9,0.9-0.9h3.6c0.5,0,0.9,0.4,0.9,0.9V147z M363.4,116.8
+				c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V97c0-0.5,0.4-0.9,0.9-0.9h3.6c0.5,0,0.9,0.4,0.9,0.9V116.8z M363.4,86.5
+				c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V66.8c0-0.5,0.4-0.9,0.9-0.9h3.6c0.5,0,0.9,0.4,0.9,0.9V86.5z M363.4,56.3
+				c0,0.5-0.4,0.9-0.9,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V36.6c0-0.5,0.4-0.9,0.9-0.9h3.6c0.5,0,0.9,0.4,0.9,0.9V56.3z M375.1,147
+				c0,0.5-0.4,0.9-0.9,0.9c0,0,0,0,0,0h-3.6c-0.5,0-0.9-0.4-0.9-0.9c0,0,0,0,0,0v-19.7c0-0.5,0.4-0.9,0.9-0.9h3.6
+				c0.5,0,0.9,0.4,1,0.9V147z M375.1,116.8c0,0.5-0.4,0.9-1,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V97c0-0.5,0.4-0.9,0.9-0.9h3.6
+				c0.5,0,0.9,0.4,1,0.9V116.8z M375.1,86.5c0,0.5-0.4,0.9-1,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V66.8c0-0.5,0.4-0.9,0.9-0.9h3.6
+				c0.5,0,0.9,0.4,1,0.9V86.5z M375.1,56.3c0,0.5-0.4,0.9-1,0.9h-3.6c-0.5,0-0.9-0.4-0.9-0.9V36.6c0-0.5,0.4-0.9,0.9-0.9h3.6
+				c0.5,0,0.9,0.4,1,0.9V56.3z"/>
+			
+				<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="201.46" y1="208.3924" x2="201.46" y2="59.9976" gradientTransform="matrix(1 0 0 -1 0 264)">
+				<stop  offset="0" style="stop-color:#81CFFF"/>
+				<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+			</linearGradient>
+			<path class="st3" d="M231.1,55.6h-59.3c-1.5-0.1-2.7,1.1-2.8,2.6v143.2c0.1,1.5,1.3,2.6,2.8,2.6h59.3c1.5,0.1,2.8-1.1,2.8-2.6
+				V58.2C233.9,56.7,232.6,55.5,231.1,55.6z M182.5,159.4c0,0.6-0.6,1.1-1.2,1.1h-5.4c-0.6,0-1.2-0.5-1.2-1.1v-5.2
+				c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V159.4z M182.5,146.5c0,0.6-0.6,1.1-1.2,1.1
+				c0,0,0,0,0,0h-5.4c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.5,1.2,1.1V146.5z
+				 M182.5,133.6c0,0.6-0.6,1.1-1.2,1.1h-5.4c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4
+				c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V133.6z M182.5,120.7c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0h-5.4c-0.6,0-1.2-0.5-1.2-1.1
+				c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.5,1.2,1.1V120.7z M182.5,107.8c0,0.6-0.6,1.1-1.2,1.1h-5.4
+				c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V107.8z M182.5,94.9
+				c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0h-5.4c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h5.4
+				c0.6,0,1.2,0.5,1.2,1.1V94.9z M182.5,82.1c0,0.6-0.6,1.1-1.2,1.1h-5.4c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1
+				c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V82.1z M182.5,69.2c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0h-5.4
+				c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0V64c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.5,1.2,1.1V69.2z M192.6,159.4
+				c0,0.6-0.6,1.1-1.2,1.1H186c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.5,1.2,1.1
+				c0,0,0,0,0,0L192.6,159.4z M192.6,146.5c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H186c-0.6,0-1.2-0.5-1.2-1.1v-5.2
+				c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1L192.6,146.5z M192.6,133.6c0,0.6-0.6,1.1-1.2,1.1H186
+				c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L192.6,133.6z
+				 M192.6,120.7c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H186c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4
+				c0.6,0,1.2,0.5,1.2,1.1L192.6,120.7z M192.6,107.8c0,0.6-0.6,1.1-1.2,1.1H186c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2
+				c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L192.6,107.8z M192.6,94.9c0,0.6-0.6,1.1-1.2,1.1
+				c0,0,0,0,0,0H186c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1L192.6,94.9z
+				 M192.6,82.1c0,0.6-0.6,1.1-1.2,1.1H186c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4
+				c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L192.6,82.1z M192.6,69.2c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H186c-0.6,0-1.2-0.5-1.2-1.1V64
+				c0-0.6,0.5-1.2,1.2-1.2c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1L192.6,69.2z M202.6,159.4c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H196
+				c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1L202.6,159.4z M202.6,146.5
+				c0,0.6-0.6,1.1-1.2,1.1H196c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.5,1.2,1.1
+				c0,0,0,0,0,0L202.6,146.5z M202.6,133.6c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H196c-0.6,0-1.2-0.5-1.2-1.1v-5.2
+				c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1L202.6,133.6z M202.6,120.7c0,0.6-0.6,1.1-1.2,1.1H196
+				c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L202.6,120.7z
+				 M202.6,107.8c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H196c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4
+				c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L202.6,107.8z M202.6,94.9c0,0.6-0.6,1.1-1.2,1.1H196c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0
+				v-5.2c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L202.6,94.9z M202.6,82.1c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0
+				H196c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h5.4c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L202.6,82.1z
+				 M202.6,69.2c0,0.6-0.6,1.1-1.2,1.1H196c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0V64c0-0.6,0.6-1.1,1.2-1.1h5.4c0.6,0,1.2,0.4,1.2,1.1
+				c0,0,0,0,0,0V69.2z M227.8,159.4c0,0.6-0.6,1.1-1.2,1.1h-20.5c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0
+				h20.5c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L227.8,159.4z M227.8,146.5c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0h-20.5
+				c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h20.5c0.6,0,1.2,0.5,1.2,1.1L227.8,146.5z M227.8,133.6
+				c0,0.6-0.6,1.1-1.2,1.1h-20.5c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h20.5c0.6,0,1.2,0.5,1.2,1.1
+				c0,0,0,0,0,0L227.8,133.6z M227.8,120.7c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0h-20.5c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2
+				c0-0.6,0.6-1.1,1.2-1.1h20.5c0.6,0,1.2,0.5,1.2,1.1L227.8,120.7z M227.8,107.8c0,0.6-0.6,1.1-1.2,1.1h-20.5
+				c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h20.5c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L227.8,107.8z
+				 M227.8,94.9c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0h-20.5c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1h20.5
+				c0.6,0,1.2,0.5,1.2,1.1L227.8,94.9z M227.8,82.1c0,0.6-0.6,1.1-1.2,1.1h-20.5c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1
+				c0,0,0,0,0,0h20.5c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0L227.8,82.1z M227.8,69.2c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0h-20.5
+				c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0V64c0-0.6,0.6-1.1,1.2-1.1h20.5c0.6,0,1.2,0.5,1.2,1.1L227.8,69.2z"/>
+			
+				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="122.975" y1="237.3228" x2="122.975" y2="59.9971" gradientTransform="matrix(1 0 0 -1 0 264)">
+				<stop  offset="0" style="stop-color:#81CFFF"/>
+				<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+			</linearGradient>
+			<path class="st4" d="M161.1,26.7H84.8c-1.5-0.1-2.8,1.1-2.8,2.6c0,0,0,0,0,0v172.2c0.1,1.5,1.3,2.6,2.8,2.6h76.3
+				c1.5,0.1,2.8-1.1,2.8-2.6V29.3C163.9,27.8,162.6,26.6,161.1,26.7z M154.3,161c0,0.6-0.6,1.1-1.2,1.1H92.8c-0.6,0-1.2-0.5-1.2-1.1
+				c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h60.3c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V161z M154.3,146.3
+				c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H92.8c-0.6,0-1.2-0.5-1.2-1.1v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h60.3
+				c0.6,0,1.2,0.5,1.2,1.1V146.3z M154.3,131.6c0,0.6-0.6,1.1-1.2,1.1H92.8c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2
+				c0-0.6,0.6-1.1,1.2-1.1h60.3c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V131.6z M154.3,117c0,0.6-0.6,1.1-1.2,1.1H92.8
+				c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.2c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h60.3c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V117z
+				 M154.3,102.3c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H92.8c-0.6,0-1.2-0.5-1.2-1.1V97c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h60.3
+				c0.6,0,1.2,0.5,1.2,1.1V102.3z M154.3,87.6c0,0.6-0.6,1.1-1.2,1.1H92.8c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.3
+				c0-0.6,0.6-1.1,1.2-1.1h60.3c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V87.6z M154.3,72.9c0,0.6-0.6,1.1-1.2,1.1H92.8
+				c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.3c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h60.3c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V72.9z
+				 M154.3,58.3c0,0.6-0.6,1.1-1.2,1.1c0,0,0,0,0,0H92.8c-0.6,0-1.2-0.5-1.2-1.1V53c0-0.6,0.6-1.1,1.2-1.1c0,0,0,0,0,0h60.3
+				c0.6,0,1.2,0.5,1.2,1.1V58.3z M154.3,43.6c0,0.6-0.6,1.1-1.2,1.1H92.8c-0.6,0-1.2-0.5-1.2-1.1c0,0,0,0,0,0v-5.3
+				c0-0.6,0.6-1.1,1.2-1.1h60.3c0.6,0,1.2,0.5,1.2,1.1c0,0,0,0,0,0V43.6z"/>
+			
+				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="273.51" y1="264" x2="273.51" y2="54.46" gradientTransform="matrix(1 0 0 -1 0 264)">
+				<stop  offset="0" style="stop-color:#81CFFF"/>
+				<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+			</linearGradient>
+			<path class="st5" d="M306.2,0h-65.4c-1.4,0-2.5,1.2-2.4,2.6v204.4c-0.1,1.4,1,2.5,2.4,2.6c0,0,0,0,0,0h65.4
+				c1.4-0.1,2.5-1.2,2.4-2.6V2.6C308.7,1.2,307.6,0.1,306.2,0z M300.4,119.6c0,0.6-0.4,1.1-1,1.1h-51.7c-0.6,0-1-0.5-1-1.1v-5.2
+				c0-0.6,0.4-1.1,1-1.1h51.7c0.6,0,1,0.5,1,1.1L300.4,119.6z M300.4,90.3c0,0.6-0.4,1.1-1,1.1h-51.7c-0.6,0-1-0.5-1-1.1V85
+				c0-0.6,0.4-1.1,1-1.1h51.7c0.6,0,1,0.5,1,1.1L300.4,90.3z M300.4,60.9c0,0.6-0.4,1.1-1,1.1h-51.7c-0.6,0-1-0.5-1-1.1v-5.2
+				c0-0.6,0.4-1.1,1-1.1h51.7c0.6,0,1,0.5,1,1.1L300.4,60.9z M300.4,31.5c0,0.6-0.4,1.1-1,1.1h-51.7c-0.6,0-1-0.5-1-1.1v-5.2
+				c0-0.6,0.4-1.1,1-1.1h51.7c0.6,0,1,0.5,1,1.1L300.4,31.5z M300.4,16.9c0,0.6-0.4,1.1-1,1.1h-51.7c-0.6,0-1-0.5-1-1.1v-5.2
+				c0-0.6,0.4-1.1,1-1.1h51.7c0.6,0,1,0.5,1,1.1L300.4,16.9z"/>
+		</g>
+		<g class="st6">
+			<path class="st7" d="M244.2,130.7c3.3,1.9,5.7,13.6,1,20.7c-5.3,6.8-7,9-6.1,14c-4.3-7.3-0.6-7.4-5.8-14.2
+				c-4.6-6.2-2.5-17.4,0.7-20.5C237.4,131.3,240.8,131.3,244.2,130.7L244.2,130.7z"/>
+			<path class="st8" d="M280.4,211.9c-0.1,0.6-0.1,1.2-0.1,1.7c0,0.7,0.1,1.3,0.2,2c-2.1-0.8-4.3-1.2-6.5-1.2
+				c-2.6,0-5.2,0.6-7.5,1.7c-0.8-4.2-4.8-7-9-6.2c-2.8,0.5-5,2.5-5.9,5.2c-3.4-2.1-7.7-2-11.1,0.1c-0.4-5.7-4.1-0.8-9.8-0.8
+				c-6,0-11.8-4.4-11.8,1.7c0,1.1,0.2,2.2,0.4,3.2c-1.1,0.1-2.1,0.5-3,1c-0.9-7-6.8-12.4-13.9-12.7c22.6-10.3,22.4-44.6,24.8-74.6
+				c0.1-1.7,1.2-4.1,1.8-4.4l0,0c1.5,1.1,3.2,1.8,5.1,2.1c-3.2,3.1-5.4,14.3-0.7,20.5c5.3,6.8,1.6,6.9,5.8,14.2
+				c-0.9-5,0.8-7.2,6.1-14c4.8-7.2,2.3-18.8-1-20.7c1.8-0.3,3.6-1,5.1-2.1l0,0c0.6,0.3,1.7,2.7,1.8,4.4
+				C253.6,164.6,250.4,198.5,280.4,211.9z"/>
+			<path class="st9" d="M303.3,203.2c-5.4,0-9.8,4.4-9.8,9.8c0,0.3,0,0.6,0,0.9c-1.5-1.7-3.7-2.6-6-2.5c-0.7,0-1.4,0.1-2.1,0.3
+				c0.7-1.3,1.1-2.8,1.1-4.3c-0.1-4.6-3.9-8.3-8.5-8.2c-4,0.1-7.4,3-8.1,6.9c-0.1,0.4-0.1,0.9-0.1,1.3c0,0.5,0,1,0.1,1.6
+				c-3.5-1.4-7.4-1.3-10.8,0.4c-0.7-3.2-3.9-5.3-7.2-4.6c-2,0.4-3.6,1.9-4.3,3.8c-1.3-0.8-2.7-1.2-4.2-1.2c-1.5,0-3.1,0.4-4.4,1.3
+				c-0.2-4.6-4.1-8.2-8.7-8s-8.2,4.1-8,8.7l0,0c0,0.8,0.1,1.7,0.3,2.5c-0.8,0.1-1.6,0.4-2.3,0.8c-0.7-5.4-5.2-9.6-10.7-9.8h-0.4
+				c-3.4,0-6.7,1.6-8.8,4.3c-3-6.2-10.4-8.9-16.7-5.9c-2.9,1.4-5.2,3.9-6.3,7c4.1,3,6.6,7.8,6.6,12.9c0,2.3-0.5,4.6-1.5,6.6
+				c2-2.2,4.8-3.4,7.8-3.4c0.9,0,1.8,0.1,2.7,0.3c-2.9-5-1.2-11.5,3.8-14.4c1.2-0.7,2.6-1.2,3.9-1.3c0.5-0.1,0.9-0.1,1.4-0.1
+				c5.8,0,10.6,4.7,10.6,10.6l0,0c0,0.6-0.1,1.3-0.2,1.9c4.4-1.7,9.3-1.6,13.6,0.4c0.9-4.1,4.9-6.7,9-5.8c2.6,0.6,4.7,2.4,5.5,4.9
+				c1.6-0.9,3.5-1.4,5.3-1.4c1.9,0,3.8,0.5,5.4,1.5l0.1,0.1c0.3-4.5,3.6-8.4,8-9.4c0.8-0.2,1.7-0.3,2.5-0.3
+				c5.8,0,10.6,4.7,10.6,10.6c0,1-0.2,2-0.4,3c1.1,0.1,2.1,0.5,3,1c1-7,7-12.1,14-12.1c1.5,0,3,0.2,4.4,0.7c2.6,0.8,5,2.5,6.7,4.6
+				c2.4-4.8,7-8.2,12.4-8.8C311.4,205.9,307.6,203.2,303.3,203.2z"/>
+			<path class="st10" d="M314.4,209.9c-0.6,0-1.2,0-1.8,0.1c-5.4,0.6-10.1,3.9-12.5,8.7c-1.7-2.2-4-3.8-6.7-4.6
+				c-1.4-0.5-2.9-0.7-4.4-0.7c-7,0-13,5.2-14,12.1c-0.9-0.5-1.9-0.9-3-1c0.3-1,0.4-2,0.4-3c0-5.8-4.7-10.5-10.5-10.5
+				c-0.8,0-1.7,0.1-2.5,0.3c-4.4,1.1-7.7,4.9-8,9.4l-0.1-0.1c-1.6-1-3.5-1.5-5.4-1.5c-1.9,0-3.7,0.5-5.3,1.4c-1.4-3.9-5.7-6-9.6-4.6
+				c-2.5,0.9-4.3,3-4.9,5.5c-4.3-2-9.2-2.1-13.6-0.4c0.1-0.6,0.2-1.3,0.2-1.9c0-5.8-4.7-10.6-10.6-10.6l0,0c-0.5,0-0.9,0-1.4,0.1
+				c-5.8,0.8-9.9,6.1-9.1,11.8c0.2,1.4,0.6,2.7,1.3,3.9c-0.9-0.2-1.8-0.3-2.7-0.3c-2.9,0-5.8,1.2-7.8,3.4c1-2.1,1.5-4.3,1.5-6.6
+				c0-5.1-2.4-9.9-6.6-12.9l0,0c-7.1-5.2-17-3.6-22.2,3.5c-5.2,7.1-3.6,17,3.5,22.2c6.8,5,16.4,3.7,21.7-2.8
+				c-2.1,5.5,0.7,11.6,6.1,13.6c5.5,2.1,11.6-0.7,13.6-6.1c0.5-1.2,0.7-2.5,0.7-3.7c0-1.9,0.4-0.1,0.4,2.7c0,9.7,7.8,17.6,17.5,17.6
+				c9.7,0,17.6-7.8,17.6-17.5c0-2.4-0.5-4.8-1.4-7l0.5-0.1c0.5,5.8,5.7,10.1,11.5,9.5c5-0.5,9-4.4,9.5-9.4c1.7,1,3.6,1.6,5.5,1.6
+				c0.6,0,1.2,0,1.7-0.1v0.1c0,4.2,3.4,7.6,7.6,7.5c2.6,0,5-1.4,6.4-3.6c4.7,6.3,13.5,7.5,19.8,2.9c1.5-1.1,2.8-2.5,3.7-4.2
+				c4.9,7.3,14.8,9.1,22.1,4.2s9.1-14.8,4.2-22.1C324.5,212.5,319.6,209.9,314.4,209.9L314.4,209.9z"/>
+		</g>
+		<path class="st11" d="M239.1,70c6.4,0,11.6,5.2,11.6,11.6c0,6.4-5.2,11.6-11.6,11.6c-6.4,0-11.6-5.2-11.6-11.6c0,0,0,0,0,0
+			C227.5,75.2,232.7,70,239.1,70z"/>
+		<path class="st8" d="M239.1,137.2c8.3,0,13.5-1.7,16.6-7.9c0,3.2-1.5,6.2-4.1,8.1c-1.9,1.3-4,2.2-6.2,2.6c-4.1,0.8-8.4,0.8-12.5,0
+			c-2.2-0.4-4.3-1.3-6.2-2.6c-2.6-1.9-4.2-4.9-4.2-8.1C225.6,135.5,230.7,137.2,239.1,137.2z"/>
+		<path class="st8" d="M288.4,151.7c0,0.5-0.3,0.8-0.8,0.8c-0.3,0-0.5-0.1-0.7-0.3c-7.6-10.3-25.5-25-30.4-24.7
+			c2.4-6.1,3.4-15.9,3.6-31.2C271.5,100.3,288.3,122.4,288.4,151.7z"/>
+		<path class="st8" d="M218.1,96.3c0.3,15.2,1.2,25,3.6,31.1l-0.2,0.1c-4.9-0.3-22.8,14.5-30.4,24.7c-0.3,0.4-0.8,0.5-1.1,0.2
+			c-0.2-0.2-0.4-0.4-0.3-0.7C189.7,122.3,206.6,100.2,218.1,96.3L218.1,96.3z"/>
+		<path class="st8" d="M250.7,81.6c0-6.4-5.2-11.6-11.6-11.6c-6.4,0-11.6,5.2-11.6,11.6s5.2,11.6,11.6,11.6l0,0
+			C245.5,93.2,250.7,88,250.7,81.6z M252.9,81.6c0,7.6-6.2,13.8-13.8,13.8c-7.6,0-13.8-6.2-13.8-13.8c0-7.6,6.2-13.8,13.8-13.8
+			c0,0,0,0,0,0C246.7,67.8,252.9,74,252.9,81.6z"/>
+		<path class="st8" d="M239.1,48.7c5.7,0,10.7-2,13.8-4.9c0.5,1.3,1,2.6,1.4,4c-3.3,3.3-8.9,5.4-15.3,5.4s-11.9-2.1-15.3-5.4
+			c0.5-1.3,1-2.7,1.4-4C228.4,46.8,233.4,48.7,239.1,48.7z"/>
+		<path class="st9" d="M252.9,43.8c-3.1,3-8.1,4.9-13.8,4.9s-10.7-2-13.8-4.9c2-5.1,4.5-10,7.6-14.5c0.5-0.7,0.9-1.3,1.4-1.9
+			c2-2.7,5.8-3.2,8.5-1.2c0.4,0.3,0.8,0.7,1.2,1.2c0.5,0.6,0.9,1.2,1.4,1.9C248.4,33.8,250.9,38.7,252.9,43.8z"/>
+		<path class="st10" d="M260.1,96.4c-0.3,15.3-1.2,25-3.6,31.2c-0.2,0.6-0.5,1.2-0.8,1.7c-3.1,6.2-8.3,7.9-16.6,7.9
+			s-13.5-1.7-16.6-7.9c-0.3-0.6-0.5-1.1-0.8-1.8c-2.4-6.2-3.4-15.9-3.6-31.1c-0.1-3.4-0.1-7.1-0.1-11.1c-0.1-12.7,1.8-25.4,5.8-37.5
+			c3.3,3.3,8.9,5.4,15.3,5.4s11.9-2.1,15.3-5.4c4,12.1,6,24.8,5.8,37.5C260.2,89.2,260.1,92.9,260.1,96.4z M252.9,81.6
+			c0-7.6-6.2-13.8-13.8-13.8c-7.6,0-13.8,6.2-13.8,13.8c0,7.6,6.2,13.8,13.8,13.8c0,0,0,0,0,0C246.7,95.4,252.9,89.2,252.9,81.6
+			L252.9,81.6z"/>
+		<path class="st12" d="M139.2,246.1l18.4,0.4v0.7l-19.4-0.4v-0.7V246C138.4,246.1,138.6,246.1,139.2,246.1z"/>
+		
+			<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="112.2357" y1="190.775" x2="112.2357" y2="101.005" gradientTransform="matrix(1 0 0 -1 0 264)">
+			<stop  offset="0" style="stop-color:#81CFFF"/>
+			<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+		</linearGradient>
+		<line class="st13" x1="112.2" y1="73.2" x2="112.2" y2="163"/>
+		
+			<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="348.955" y1="195.605" x2="348.955" y2="105.835" gradientTransform="matrix(1 0 0 -1 0 264)">
+			<stop  offset="0" style="stop-color:#81CFFF"/>
+			<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+		</linearGradient>
+		<line class="st14" x1="349" y1="68.4" x2="349" y2="158.2"/>
+		
+			<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="40.9" y1="120.12" x2="40.9" y2="64.49" gradientTransform="matrix(1 0 0 -1 0 264)">
+			<stop  offset="0" style="stop-color:#81CFFF"/>
+			<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+		</linearGradient>
+		<line class="st15" x1="40.9" y1="143.9" x2="40.9" y2="199.5"/>
+		
+			<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="64.97" y1="168.64" x2="64.97" y2="140.83" gradientTransform="matrix(1 0 0 -1 0 264)">
+			<stop  offset="0" style="stop-color:#81CFFF"/>
+			<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+		</linearGradient>
+		<line class="st16" x1="65" y1="95.4" x2="65" y2="123.2"/>
+		
+			<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="397.23" y1="159.8" x2="397.23" y2="131.98" gradientTransform="matrix(1 0 0 -1 0 264)">
+			<stop  offset="0" style="stop-color:#81CFFF"/>
+			<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+		</linearGradient>
+		<line class="st17" x1="397.2" y1="104.2" x2="397.2" y2="132"/>
+		
+			<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="424.75" y1="130.51" x2="424.75" y2="74.87" gradientTransform="matrix(1 0 0 -1 0 264)">
+			<stop  offset="0" style="stop-color:#81CFFF"/>
+			<stop  offset="1" style="stop-color:#5ECFFF;stop-opacity:0"/>
+		</linearGradient>
+		<line class="st18" x1="424.8" y1="133.5" x2="424.8" y2="189.1"/>
+	</g>
+</g>
+</svg>
diff --git a/ui/public/index.html b/ui/public/index.html
new file mode 100644
index 0000000..c150256
--- /dev/null
+++ b/ui/public/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width,initial-scale=1.0">
+		<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+		<title><%= htmlWebpackPlugin.options.title %></title>
+		<script type="text/javascript">
+			document.write("<script src='config.js?"+new Date().getTime()+"'><\/script>");
+		</script>
+	</head>
+	<body>
+		<noscript>
+			<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript
+				enabled. Please enable it to continue.</strong>
+		</noscript>
+		<script type="text/javascript">
+			var theme = window.localStorage.getItem('APP_THEME');
+			if(theme){
+				document.body.setAttribute('data-theme',  JSON.parse(theme))
+			}
+		</script>
+		<div id="app" class="aminui">
+			<div class="app-loading">
+				<div class="app-loading__logo">
+					<img src="img/logo.png"/>
+				</div>
+				<div class="app-loading__loader"></div>
+				<div class="app-loading__title"><%= htmlWebpackPlugin.options.title %></div>
+			</div>
+			<style>
+				.app-loading {position: absolute;top:0px;left:0px;right:0px;bottom:0px;display: flex;justify-content: center;align-items: center;flex-direction: column;background: #fff;}
+				.app-loading__logo {margin-bottom: 30px;}
+				.app-loading__logo img {width: 90px;vertical-align: bottom;}
+				.app-loading__loader {box-sizing: border-box;width: 35px;height: 35px;border: 5px solid transparent;border-top-color: #000;border-radius: 50%;animation: .5s loader linear infinite;position: relative;}
+				.app-loading__loader:before {box-sizing: border-box;content: '';display: block;width: inherit;height: inherit;position: absolute;top: -5px;left: -5px;border: 5px solid #ccc;border-radius: 50%;opacity: .5;}
+				.app-loading__title {font-size: 24px;color: #333;margin-top: 30px;}
+				[data-theme='dark'] .app-loading {background: #222225;}
+				[data-theme='dark'] .app-loading__loader {border-top-color: #fff;}
+				[data-theme='dark'] .app-loading__title {color: #d0d0d0;}
+				@keyframes loader {
+				    0% {
+				        transform: rotate(0deg);
+				    }
+				    100% {
+				        transform: rotate(360deg);
+				    }
+				}
+			</style>
+		</div>
+		<!-- built files will be auto injected -->
+	</body>
+	<div id="versionCheck" style="display: none;position: absolute;z-index: 99;top:0;left:0;right:0;bottom:0;padding:40px;background:rgba(255,255,255,0.9);color: #333;">
+		<h2 style="line-height: 1;margin: 0;font-size: 24px;">当前使用的浏览器内核版本过低 :(</h2>
+		<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 20px;opacity: 0.8;">当前版本：<span id="versionCheck-type">--</span> <span id="versionCheck-version">--</span></p>
+		<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 10px;opacity: 0.8;">最低版本要求：Chrome 71+、Firefox 65+、Safari 12+、Edge 97+。</p>
+		<p style="line-height: 1;margin: 0;font-size: 14px;margin-top: 10px;opacity: 0.8;">请升级浏览器版本，或更换现代浏览器，如果你使用的是双核浏览器,请切换到极速/高速模式。</p>
+	</div>
+	<script type="text/javascript">
+	function getBrowerInfo(){
+		var userAgent = window.navigator.userAgent;
+		var browerInfo = {
+			type: 'unknown',
+			version: 'unknown',
+			userAgent: userAgent
+		};
+		if(document.documentMode){
+			browerInfo.type = "IE"
+			browerInfo.version = document.documentMode + ''
+		}else if(indexOf(userAgent, "Firefox")){
+			browerInfo.type = "Firefox"
+			browerInfo.version = userAgent.match(/Firefox\/([\d.]+)/)[1]
+		}else if(indexOf(userAgent, "Opera")){
+			browerInfo.type = "Opera"
+			browerInfo.version = userAgent.match(/Opera\/([\d.]+)/)[1]
+		}else if(indexOf(userAgent, "Edg")){
+			browerInfo.type = "Edg"
+			browerInfo.version = userAgent.match(/Edg\/([\d.]+)/)[1]
+		}else if(indexOf(userAgent, "Chrome")){
+			browerInfo.type = "Chrome"
+			browerInfo.version = userAgent.match(/Chrome\/([\d.]+)/)[1]
+		}else if(indexOf(userAgent, "Safari")){
+			browerInfo.type = "Safari"
+			browerInfo.version = userAgent.match(/Safari\/([\d.]+)/)[1]
+		}
+		return browerInfo
+	}
+    function indexOf(userAgent, brower) {
+        return userAgent.indexOf(brower) > -1
+    }
+	function isSatisfyBrower(){
+		var minVer = {
+			"Chrome": 71,
+			"Firefox": 65,
+			"Safari": 12,
+			"Edg": 97,
+			"IE": 999
+		}
+		var browerInfo = getBrowerInfo()
+		var materVer = browerInfo.version.split('.')[0]
+        return materVer >= minVer[browerInfo.type]
+	}
+	if(!isSatisfyBrower()){
+		document.getElementById('versionCheck').style.display = 'block';
+		document.getElementById('versionCheck-type').innerHTML = getBrowerInfo().type;
+		document.getElementById('versionCheck-version').innerHTML = getBrowerInfo().version;
+	}
+	</script>
+</html>
diff --git a/ui/public/tinymce/langs/zh_CN.js b/ui/public/tinymce/langs/zh_CN.js
new file mode 100644
index 0000000..89b106c
--- /dev/null
+++ b/ui/public/tinymce/langs/zh_CN.js
@@ -0,0 +1,419 @@
+tinymce.addI18n('zh_CN',{
+"Redo": "\u91cd\u505a",
+"Undo": "\u64a4\u9500",
+"Cut": "\u526a\u5207",
+"Copy": "\u590d\u5236",
+"Paste": "\u7c98\u8d34",
+"Select all": "\u5168\u9009",
+"New document": "\u65b0\u6587\u4ef6",
+"Ok": "\u786e\u5b9a",
+"Cancel": "\u53d6\u6d88",
+"Visual aids": "\u7f51\u683c\u7ebf",
+"Bold": "\u7c97\u4f53",
+"Italic": "\u659c\u4f53",
+"Underline": "\u4e0b\u5212\u7ebf",
+"Strikethrough": "\u5220\u9664\u7ebf",
+"Superscript": "\u4e0a\u6807",
+"Subscript": "\u4e0b\u6807",
+"Clear formatting": "\u6e05\u9664\u683c\u5f0f",
+"Align left": "\u5de6\u8fb9\u5bf9\u9f50",
+"Align center": "\u4e2d\u95f4\u5bf9\u9f50",
+"Align right": "\u53f3\u8fb9\u5bf9\u9f50",
+"Justify": "\u4e24\u7aef\u5bf9\u9f50",
+"Bullet list": "\u9879\u76ee\u7b26\u53f7",
+"Numbered list": "\u7f16\u53f7\u5217\u8868",
+"Decrease indent": "\u51cf\u5c11\u7f29\u8fdb",
+"Increase indent": "\u589e\u52a0\u7f29\u8fdb",
+"Close": "\u5173\u95ed",
+"Formats": "\u683c\u5f0f",
+"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "\u4f60\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6253\u5f00\u526a\u8d34\u677f\uff0c\u8bf7\u4f7f\u7528Ctrl+X\/C\/V\u7b49\u5feb\u6377\u952e\u3002",
+"Headers": "\u6807\u9898",
+"Header 1": "\u6807\u98981",
+"Header 2": "\u6807\u98982",
+"Header 3": "\u6807\u98983",
+"Header 4": "\u6807\u98984",
+"Header 5": "\u6807\u98985",
+"Header 6": "\u6807\u98986",
+"Headings": "\u6807\u9898",
+"Heading 1": "\u6807\u98981",
+"Heading 2": "\u6807\u98982",
+"Heading 3": "\u6807\u98983",
+"Heading 4": "\u6807\u98984",
+"Heading 5": "\u6807\u98985",
+"Heading 6": "\u6807\u98986",
+"Preformatted": "\u9884\u5148\u683c\u5f0f\u5316\u7684",
+"Div": "Div",
+"Pre": "Pre",
+"Code": "\u4ee3\u7801",
+"Paragraph": "\u6bb5\u843d",
+"Blockquote": "\u5f15\u6587\u533a\u5757",
+"Inline": "\u6587\u672c",
+"Blocks": "\u57fa\u5757",
+"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "\u5f53\u524d\u4e3a\u7eaf\u6587\u672c\u7c98\u8d34\u6a21\u5f0f\uff0c\u518d\u6b21\u70b9\u51fb\u53ef\u4ee5\u56de\u5230\u666e\u901a\u7c98\u8d34\u6a21\u5f0f\u3002",
+"Fonts": "\u5b57\u4f53",
+"Font Sizes": "\u5b57\u53f7",
+"Class": "\u7c7b\u578b",
+"Browse for an image": "\u6d4f\u89c8\u56fe\u50cf",
+"OR": "\u6216",
+"Drop an image here": "\u62d6\u653e\u4e00\u5f20\u56fe\u50cf\u81f3\u6b64",
+"Upload": "\u4e0a\u4f20",
+"Block": "\u5757",
+"Align": "\u5bf9\u9f50",
+"Default": "\u9ed8\u8ba4",
+"Circle": "\u7a7a\u5fc3\u5706",
+"Disc": "\u5b9e\u5fc3\u5706",
+"Square": "\u65b9\u5757",
+"Lower Alpha": "\u5c0f\u5199\u82f1\u6587\u5b57\u6bcd",
+"Lower Greek": "\u5c0f\u5199\u5e0c\u814a\u5b57\u6bcd",
+"Lower Roman": "\u5c0f\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Upper Alpha": "\u5927\u5199\u82f1\u6587\u5b57\u6bcd",
+"Upper Roman": "\u5927\u5199\u7f57\u9a6c\u5b57\u6bcd",
+"Anchor...": "\u951a\u70b9...",
+"Name": "\u540d\u79f0",
+"Id": "\u6807\u8bc6\u7b26",
+"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "\u6807\u8bc6\u7b26\u5e94\u8be5\u4ee5\u5b57\u6bcd\u5f00\u5934\uff0c\u540e\u8ddf\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u7834\u6298\u53f7\u3001\u70b9\u3001\u5192\u53f7\u6216\u4e0b\u5212\u7ebf\u3002",
+"You have unsaved changes are you sure you want to navigate away?": "\u4f60\u8fd8\u6709\u6587\u6863\u5c1a\u672a\u4fdd\u5b58\uff0c\u786e\u5b9a\u8981\u79bb\u5f00\uff1f",
+"Restore last draft": "\u6062\u590d\u4e0a\u6b21\u7684\u8349\u7a3f",
+"Special character...": "\u7279\u6b8a\u5b57\u7b26...",
+"Source code": "\u6e90\u4ee3\u7801",
+"Insert\/Edit code sample": "\u63d2\u5165\/\u7f16\u8f91\u4ee3\u7801\u793a\u4f8b",
+"Language": "\u8bed\u8a00",
+"Code sample...": "\u793a\u4f8b\u4ee3\u7801...",
+"Color Picker": "\u9009\u8272\u5668",
+"R": "R",
+"G": "G",
+"B": "B",
+"Left to right": "\u4ece\u5de6\u5230\u53f3",
+"Right to left": "\u4ece\u53f3\u5230\u5de6",
+"Emoticons...": "\u8868\u60c5\u7b26\u53f7...",
+"Metadata and Document Properties": "\u5143\u6570\u636e\u548c\u6587\u6863\u5c5e\u6027",
+"Title": "\u6807\u9898",
+"Keywords": "\u5173\u952e\u8bcd",
+"Description": "\u63cf\u8ff0",
+"Robots": "\u673a\u5668\u4eba",
+"Author": "\u4f5c\u8005",
+"Encoding": "\u7f16\u7801",
+"Fullscreen": "\u5168\u5c4f",
+"Action": "\u64cd\u4f5c",
+"Shortcut": "\u5feb\u6377\u952e",
+"Help": "\u5e2e\u52a9",
+"Address": "\u5730\u5740",
+"Focus to menubar": "\u79fb\u52a8\u7126\u70b9\u5230\u83dc\u5355\u680f",
+"Focus to toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u5de5\u5177\u680f",
+"Focus to element path": "\u79fb\u52a8\u7126\u70b9\u5230\u5143\u7d20\u8def\u5f84",
+"Focus to contextual toolbar": "\u79fb\u52a8\u7126\u70b9\u5230\u4e0a\u4e0b\u6587\u83dc\u5355",
+"Insert link (if link plugin activated)": "\u63d2\u5165\u94fe\u63a5 (\u5982\u679c\u94fe\u63a5\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Save (if save plugin activated)": "\u4fdd\u5b58(\u5982\u679c\u4fdd\u5b58\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Find (if searchreplace plugin activated)": "\u67e5\u627e(\u5982\u679c\u67e5\u627e\u66ff\u6362\u63d2\u4ef6\u5df2\u6fc0\u6d3b)",
+"Plugins installed ({0}):": "\u5df2\u5b89\u88c5\u63d2\u4ef6 ({0}):",
+"Premium plugins:": "\u4f18\u79c0\u63d2\u4ef6\uff1a",
+"Learn more...": "\u4e86\u89e3\u66f4\u591a...",
+"You are using {0}": "\u4f60\u6b63\u5728\u4f7f\u7528 {0}",
+"Plugins": "\u63d2\u4ef6",
+"Handy Shortcuts": "\u5feb\u6377\u952e",
+"Horizontal line": "\u6c34\u5e73\u5206\u5272\u7ebf",
+"Insert\/edit image": "\u63d2\u5165\/\u7f16\u8f91\u56fe\u7247",
+"Image description": "\u56fe\u7247\u63cf\u8ff0",
+"Source": "\u5730\u5740",
+"Dimensions": "\u5927\u5c0f",
+"Constrain proportions": "\u4fdd\u6301\u7eb5\u6a2a\u6bd4",
+"General": "\u666e\u901a",
+"Advanced": "\u9ad8\u7ea7",
+"Style": "\u6837\u5f0f",
+"Vertical space": "\u5782\u76f4\u8fb9\u8ddd",
+"Horizontal space": "\u6c34\u5e73\u8fb9\u8ddd",
+"Border": "\u8fb9\u6846",
+"Insert image": "\u63d2\u5165\u56fe\u7247",
+"Image...": "\u56fe\u7247...",
+"Image list": "\u56fe\u7247\u5217\u8868",
+"Rotate counterclockwise": "\u9006\u65f6\u9488\u65cb\u8f6c",
+"Rotate clockwise": "\u987a\u65f6\u9488\u65cb\u8f6c",
+"Flip vertically": "\u5782\u76f4\u7ffb\u8f6c",
+"Flip horizontally": "\u6c34\u5e73\u7ffb\u8f6c",
+"Edit image": "\u7f16\u8f91\u56fe\u7247",
+"Image options": "\u56fe\u7247\u9009\u9879",
+"Zoom in": "\u653e\u5927",
+"Zoom out": "\u7f29\u5c0f",
+"Crop": "\u88c1\u526a",
+"Resize": "\u8c03\u6574\u5927\u5c0f",
+"Orientation": "\u65b9\u5411",
+"Brightness": "\u4eae\u5ea6",
+"Sharpen": "\u9510\u5316",
+"Contrast": "\u5bf9\u6bd4\u5ea6",
+"Color levels": "\u989c\u8272\u5c42\u6b21",
+"Gamma": "\u4f3d\u9a6c\u503c",
+"Invert": "\u53cd\u8f6c",
+"Apply": "\u5e94\u7528",
+"Back": "\u540e\u9000",
+"Insert date\/time": "\u63d2\u5165\u65e5\u671f\/\u65f6\u95f4",
+"Date\/time": "\u65e5\u671f\/\u65f6\u95f4",
+"Insert\/Edit Link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Insert\/edit link": "\u63d2\u5165\/\u7f16\u8f91\u94fe\u63a5",
+"Text to display": "\u663e\u793a\u6587\u5b57",
+"Url": "\u5730\u5740",
+"Open link in...": "\u94fe\u63a5\u6253\u5f00\u4f4d\u7f6e...",
+"Current window": "\u5f53\u524d\u7a97\u53e3",
+"None": "\u65e0",
+"New window": "\u5728\u65b0\u7a97\u53e3\u6253\u5f00",
+"Remove link": "\u5220\u9664\u94fe\u63a5",
+"Anchors": "\u951a\u70b9",
+"Link...": "\u94fe\u63a5...",
+"Paste or type a link": "\u7c98\u8d34\u6216\u8f93\u5165\u94fe\u63a5",
+"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u4e3a\u90ae\u4ef6\u5730\u5740\uff0c\u9700\u8981\u52a0\u4e0amailto:\u524d\u7f00\u5417\uff1f",
+"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "\u4f60\u6240\u586b\u5199\u7684URL\u5730\u5740\u5c5e\u4e8e\u5916\u90e8\u94fe\u63a5\uff0c\u9700\u8981\u52a0\u4e0ahttp:\/\/:\u524d\u7f00\u5417\uff1f",
+"Link list": "\u94fe\u63a5\u5217\u8868",
+"Insert video": "\u63d2\u5165\u89c6\u9891",
+"Insert\/edit video": "\u63d2\u5165\/\u7f16\u8f91\u89c6\u9891",
+"Insert\/edit media": "\u63d2\u5165\/\u7f16\u8f91\u5a92\u4f53",
+"Alternative source": "\u955c\u50cf",
+"Alternative source URL": "\u66ff\u4ee3\u6765\u6e90\u7f51\u5740",
+"Media poster (Image URL)": "\u5c01\u9762(\u56fe\u7247\u5730\u5740)",
+"Paste your embed code below:": "\u5c06\u5185\u5d4c\u4ee3\u7801\u7c98\u8d34\u5728\u4e0b\u9762:",
+"Embed": "\u5185\u5d4c",
+"Media...": "\u591a\u5a92\u4f53...",
+"Nonbreaking space": "\u4e0d\u95f4\u65ad\u7a7a\u683c",
+"Page break": "\u5206\u9875\u7b26",
+"Paste as text": "\u7c98\u8d34\u4e3a\u6587\u672c",
+"Preview": "\u9884\u89c8",
+"Print...": "\u6253\u5370...",
+"Save": "\u4fdd\u5b58",
+"Find": "\u67e5\u627e",
+"Replace with": "\u66ff\u6362\u4e3a",
+"Replace": "\u66ff\u6362",
+"Replace all": "\u5168\u90e8\u66ff\u6362",
+"Previous": "\u4e0a\u4e00\u4e2a",
+"Next": "\u4e0b\u4e00\u4e2a",
+"Find and replace...": "\u67e5\u627e\u5e76\u66ff\u6362...",
+"Could not find the specified string.": "\u672a\u627e\u5230\u641c\u7d22\u5185\u5bb9.",
+"Match case": "\u533a\u5206\u5927\u5c0f\u5199",
+"Find whole words only": "\u5168\u5b57\u5339\u914d",
+"Spell check": "\u62fc\u5199\u68c0\u67e5",
+"Ignore": "\u5ffd\u7565",
+"Ignore all": "\u5168\u90e8\u5ffd\u7565",
+"Finish": "\u5b8c\u6210",
+"Add to Dictionary": "\u6dfb\u52a0\u5230\u5b57\u5178",
+"Insert table": "\u63d2\u5165\u8868\u683c",
+"Table properties": "\u8868\u683c\u5c5e\u6027",
+"Delete table": "\u5220\u9664\u8868\u683c",
+"Cell": "\u5355\u5143\u683c",
+"Row": "\u884c",
+"Column": "\u5217",
+"Cell properties": "\u5355\u5143\u683c\u5c5e\u6027",
+"Merge cells": "\u5408\u5e76\u5355\u5143\u683c",
+"Split cell": "\u62c6\u5206\u5355\u5143\u683c",
+"Insert row before": "\u5728\u4e0a\u65b9\u63d2\u5165",
+"Insert row after": "\u5728\u4e0b\u65b9\u63d2\u5165",
+"Delete row": "\u5220\u9664\u884c",
+"Row properties": "\u884c\u5c5e\u6027",
+"Cut row": "\u526a\u5207\u884c",
+"Copy row": "\u590d\u5236\u884c",
+"Paste row before": "\u7c98\u8d34\u5230\u4e0a\u65b9",
+"Paste row after": "\u7c98\u8d34\u5230\u4e0b\u65b9",
+"Insert column before": "\u5728\u5de6\u4fa7\u63d2\u5165",
+"Insert column after": "\u5728\u53f3\u4fa7\u63d2\u5165",
+"Delete column": "\u5220\u9664\u5217",
+"Cols": "\u5217",
+"Rows": "\u884c",
+"Width": "\u5bbd",
+"Height": "\u9ad8",
+"Cell spacing": "\u5355\u5143\u683c\u5916\u95f4\u8ddd",
+"Cell padding": "\u5355\u5143\u683c\u5185\u8fb9\u8ddd",
+"Show caption": "\u663e\u793a\u6807\u9898",
+"Left": "\u5de6\u5bf9\u9f50",
+"Center": "\u5c45\u4e2d",
+"Right": "\u53f3\u5bf9\u9f50",
+"Cell type": "\u5355\u5143\u683c\u7c7b\u578b",
+"Scope": "\u8303\u56f4",
+"Alignment": "\u5bf9\u9f50\u65b9\u5f0f",
+"H Align": "\u6c34\u5e73\u5bf9\u9f50",
+"V Align": "\u5782\u76f4\u5bf9\u9f50",
+"Top": "\u9876\u90e8\u5bf9\u9f50",
+"Middle": "\u5782\u76f4\u5c45\u4e2d",
+"Bottom": "\u5e95\u90e8\u5bf9\u9f50",
+"Header cell": "\u8868\u5934\u5355\u5143\u683c",
+"Row group": "\u884c\u7ec4",
+"Column group": "\u5217\u7ec4",
+"Row type": "\u884c\u7c7b\u578b",
+"Header": "\u8868\u5934",
+"Body": "\u8868\u4f53",
+"Footer": "\u8868\u5c3e",
+"Border color": "\u8fb9\u6846\u989c\u8272",
+"Insert template...": "\u63d2\u5165\u6a21\u677f...",
+"Templates": "\u6a21\u677f",
+"Template": "\u6a21\u677f",
+"Text color": "\u6587\u5b57\u989c\u8272",
+"Background color": "\u80cc\u666f\u8272",
+"Custom...": "\u81ea\u5b9a\u4e49...",
+"Custom color": "\u81ea\u5b9a\u4e49\u989c\u8272",
+"No color": "\u65e0",
+"Remove color": "\u79fb\u9664\u989c\u8272",
+"Table of Contents": "\u5185\u5bb9\u5217\u8868",
+"Show blocks": "\u663e\u793a\u533a\u5757\u8fb9\u6846",
+"Show invisible characters": "\u663e\u793a\u4e0d\u53ef\u89c1\u5b57\u7b26",
+"Word count": "\u5b57\u6570",
+"Count": "\u8ba1\u6570",
+"Document": "\u6587\u6863",
+"Selection": "\u9009\u62e9",
+"Words": "\u5355\u8bcd",
+"Words: {0}": "\u5b57\u6570\uff1a{0}",
+"{0} words": "{0} \u5b57",
+"File": "\u6587\u4ef6",
+"Edit": "\u7f16\u8f91",
+"Insert": "\u63d2\u5165",
+"View": "\u89c6\u56fe",
+"Format": "\u683c\u5f0f",
+"Table": "\u8868\u683c",
+"Tools": "\u5de5\u5177",
+"Powered by {0}": "\u7531{0}\u9a71\u52a8",
+"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "\u5728\u7f16\u8f91\u533a\u6309ALT-F9\u6253\u5f00\u83dc\u5355\uff0c\u6309ALT-F10\u6253\u5f00\u5de5\u5177\u680f\uff0c\u6309ALT-0\u67e5\u770b\u5e2e\u52a9",
+"Image title": "\u56fe\u7247\u6807\u9898",
+"Border width": "\u8fb9\u6846\u5bbd\u5ea6",
+"Border style": "\u8fb9\u6846\u6837\u5f0f",
+"Error": "\u9519\u8bef",
+"Warn": "\u8b66\u544a",
+"Valid": "\u6709\u6548",
+"To open the popup, press Shift+Enter": "\u6309Shitf+Enter\u952e\u6253\u5f00\u5bf9\u8bdd\u6846",
+"Rich Text Area. Press ALT-0 for help.": "\u7f16\u8f91\u533a\u3002\u6309Alt+0\u952e\u6253\u5f00\u5e2e\u52a9\u3002",
+"System Font": "\u7cfb\u7edf\u5b57\u4f53",
+"Failed to upload image: {0}": "\u56fe\u7247\u4e0a\u4f20\u5931\u8d25: {0}",
+"Failed to load plugin: {0} from url {1}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25: {0} \u6765\u81ea\u94fe\u63a5 {1}",
+"Failed to load plugin url: {0}": "\u63d2\u4ef6\u52a0\u8f7d\u5931\u8d25 \u94fe\u63a5: {0}",
+"Failed to initialize plugin: {0}": "\u63d2\u4ef6\u521d\u59cb\u5316\u5931\u8d25: {0}",
+"example": "\u793a\u4f8b",
+"Search": "\u641c\u7d22",
+"All": "\u5168\u90e8",
+"Currency": "\u8d27\u5e01",
+"Text": "\u6587\u5b57",
+"Quotations": "\u5f15\u7528",
+"Mathematical": "\u6570\u5b66",
+"Extended Latin": "\u62c9\u4e01\u8bed\u6269\u5145",
+"Symbols": "\u7b26\u53f7",
+"Arrows": "\u7bad\u5934",
+"User Defined": "\u81ea\u5b9a\u4e49",
+"dollar sign": "\u7f8e\u5143\u7b26\u53f7",
+"currency sign": "\u8d27\u5e01\u7b26\u53f7",
+"euro-currency sign": "\u6b27\u5143\u7b26\u53f7",
+"colon sign": "\u5192\u53f7",
+"cruzeiro sign": "\u514b\u9c81\u8d5b\u7f57\u5e01\u7b26\u53f7",
+"french franc sign": "\u6cd5\u90ce\u7b26\u53f7",
+"lira sign": "\u91cc\u62c9\u7b26\u53f7",
+"mill sign": "\u5bc6\u5c14\u7b26\u53f7",
+"naira sign": "\u5948\u62c9\u7b26\u53f7",
+"peseta sign": "\u6bd4\u585e\u5854\u7b26\u53f7",
+"rupee sign": "\u5362\u6bd4\u7b26\u53f7",
+"won sign": "\u97e9\u5143\u7b26\u53f7",
+"new sheqel sign": "\u65b0\u8c22\u514b\u5c14\u7b26\u53f7",
+"dong sign": "\u8d8a\u5357\u76fe\u7b26\u53f7",
+"kip sign": "\u8001\u631d\u57fa\u666e\u7b26\u53f7",
+"tugrik sign": "\u56fe\u683c\u91cc\u514b\u7b26\u53f7",
+"drachma sign": "\u5fb7\u62c9\u514b\u9a6c\u7b26\u53f7",
+"german penny symbol": "\u5fb7\u56fd\u4fbf\u58eb\u7b26\u53f7",
+"peso sign": "\u6bd4\u7d22\u7b26\u53f7",
+"guarani sign": "\u74dc\u62c9\u5c3c\u7b26\u53f7",
+"austral sign": "\u6fb3\u5143\u7b26\u53f7",
+"hryvnia sign": "\u683c\u91cc\u592b\u5c3c\u4e9a\u7b26\u53f7",
+"cedi sign": "\u585e\u5730\u7b26\u53f7",
+"livre tournois sign": "\u91cc\u5f17\u5f17\u5c14\u7b26\u53f7",
+"spesmilo sign": "spesmilo\u7b26\u53f7",
+"tenge sign": "\u575a\u6208\u7b26\u53f7",
+"indian rupee sign": "\u5370\u5ea6\u5362\u6bd4",
+"turkish lira sign": "\u571f\u8033\u5176\u91cc\u62c9",
+"nordic mark sign": "\u5317\u6b27\u9a6c\u514b",
+"manat sign": "\u9a6c\u7eb3\u7279\u7b26\u53f7",
+"ruble sign": "\u5362\u5e03\u7b26\u53f7",
+"yen character": "\u65e5\u5143\u5b57\u6837",
+"yuan character": "\u4eba\u6c11\u5e01\u5143\u5b57\u6837",
+"yuan character, in hong kong and taiwan": "\u5143\u5b57\u6837\uff08\u6e2f\u53f0\u5730\u533a\uff09",
+"yen\/yuan character variant one": "\u5143\u5b57\u6837\uff08\u5927\u5199\uff09",
+"Loading emoticons...": "\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7...",
+"Could not load emoticons": "\u4e0d\u80fd\u52a0\u8f7d\u8868\u60c5\u7b26\u53f7",
+"People": "\u4eba\u7c7b",
+"Animals and Nature": "\u52a8\u7269\u548c\u81ea\u7136",
+"Food and Drink": "\u98df\u7269\u548c\u996e\u54c1",
+"Activity": "\u6d3b\u52a8",
+"Travel and Places": "\u65c5\u6e38\u548c\u5730\u70b9",
+"Objects": "\u7269\u4ef6",
+"Flags": "\u65d7\u5e1c",
+"Characters": "\u5b57\u7b26",
+"Characters (no spaces)": "\u5b57\u7b26(\u65e0\u7a7a\u683c)",
+"{0} characters": "{0} \u4e2a\u5b57\u7b26",
+"Error: Form submit field collision.": "\u9519\u8bef: \u8868\u5355\u63d0\u4ea4\u5b57\u6bb5\u51b2\u7a81\u3002",
+"Error: No form element found.": "\u9519\u8bef: \u6ca1\u6709\u8868\u5355\u63a7\u4ef6\u3002",
+"Update": "\u66f4\u65b0",
+"Color swatch": "\u989c\u8272\u6837\u672c",
+"Turquoise": "\u9752\u7eff\u8272",
+"Green": "\u7eff\u8272",
+"Blue": "\u84dd\u8272",
+"Purple": "\u7d2b\u8272",
+"Navy Blue": "\u6d77\u519b\u84dd",
+"Dark Turquoise": "\u6df1\u84dd\u7eff\u8272",
+"Dark Green": "\u6df1\u7eff\u8272",
+"Medium Blue": "\u4e2d\u84dd\u8272",
+"Medium Purple": "\u4e2d\u7d2b\u8272",
+"Midnight Blue": "\u6df1\u84dd\u8272",
+"Yellow": "\u9ec4\u8272",
+"Orange": "\u6a59\u8272",
+"Red": "\u7ea2\u8272",
+"Light Gray": "\u6d45\u7070\u8272",
+"Gray": "\u7070\u8272",
+"Dark Yellow": "\u6697\u9ec4\u8272",
+"Dark Orange": "\u6df1\u6a59\u8272",
+"Dark Red": "\u6df1\u7ea2\u8272",
+"Medium Gray": "\u4e2d\u7070\u8272",
+"Dark Gray": "\u6df1\u7070\u8272",
+"Light Green": "\u6d45\u7eff\u8272",
+"Light Yellow": "\u6d45\u9ec4\u8272",
+"Light Red": "\u6d45\u7ea2\u8272",
+"Light Purple": "\u6d45\u7d2b\u8272",
+"Light Blue": "\u6d45\u84dd\u8272",
+"Dark Purple": "\u6df1\u7d2b\u8272",
+"Dark Blue": "\u6df1\u84dd\u8272",
+"Black": "\u9ed1\u8272",
+"White": "\u767d\u8272",
+"Switch to or from fullscreen mode": "\u5207\u6362\u5168\u5c4f\u6a21\u5f0f",
+"Open help dialog": "\u6253\u5f00\u5e2e\u52a9\u5bf9\u8bdd\u6846",
+"history": "\u5386\u53f2",
+"styles": "\u6837\u5f0f",
+"formatting": "\u683c\u5f0f\u5316",
+"alignment": "\u5bf9\u9f50",
+"indentation": "\u7f29\u8fdb",
+"permanent pen": "\u8bb0\u53f7\u7b14",
+"comments": "\u5907\u6ce8",
+"Format Painter": "\u683c\u5f0f\u5237",
+"Insert\/edit iframe": "\u63d2\u5165\/\u7f16\u8f91\u6846\u67b6",
+"Capitalization": "\u5927\u5199",
+"lowercase": "\u5c0f\u5199",
+"UPPERCASE": "\u5927\u5199",
+"Title Case": "\u9996\u5b57\u6bcd\u5927\u5199",
+"Permanent Pen Properties": "\u6c38\u4e45\u7b14\u5c5e\u6027",
+"Permanent pen properties...": "\u6c38\u4e45\u7b14\u5c5e\u6027...",
+"Font": "\u5b57\u4f53",
+"Size": "\u5b57\u53f7",
+"More...": "\u66f4\u591a...",
+"Spellcheck Language": "\u62fc\u5199\u68c0\u67e5\u8bed\u8a00",
+"Select...": "\u9009\u62e9...",
+"Preferences": "\u9996\u9009\u9879",
+"Yes": "\u662f",
+"No": "\u5426",
+"Keyboard Navigation": "\u952e\u76d8\u6307\u5f15",
+"Version": "\u7248\u672c",
+"Anchor": "\u951a\u70b9",
+"Special character": "\u7279\u6b8a\u7b26\u53f7",
+"Code sample": "\u4ee3\u7801\u793a\u4f8b",
+"Color": "\u989c\u8272",
+"Emoticons": "\u8868\u60c5",
+"Document properties": "\u6587\u6863\u5c5e\u6027",
+"Image": "\u56fe\u7247",
+"Insert link": "\u63d2\u5165\u94fe\u63a5",
+"Target": "\u6253\u5f00\u65b9\u5f0f",
+"Link": "\u94fe\u63a5",
+"Poster": "\u5c01\u9762",
+"Media": "\u5a92\u4f53",
+"Print": "\u6253\u5370",
+"Prev": "\u4e0a\u4e00\u4e2a",
+"Find and replace": "\u67e5\u627e\u548c\u66ff\u6362",
+"Whole words": "\u5168\u5b57\u5339\u914d",
+"Spellcheck": "\u62fc\u5199\u68c0\u67e5",
+"Caption": "\u6807\u9898",
+"Insert template": "\u63d2\u5165\u6a21\u677f"
+});
\ No newline at end of file
diff --git a/ui/public/tinymce/skins/content/dark/content.css b/ui/public/tinymce/skins/content/dark/content.css
new file mode 100644
index 0000000..bae7923
--- /dev/null
+++ b/ui/public/tinymce/skins/content/dark/content.css
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body {
+  background-color: #2f3742;
+  color: #dfe0e4;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  margin: 1rem;
+}
+a {
+  color: #4099ff;
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #6d737b;
+}
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+figure figcaption {
+  color: #8a8f97;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #6d737b;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+code {
+  background-color: #6d737b;
+  border-radius: 3px;
+  padding: 0.1rem 0.2rem;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #6d737b;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #6d737b;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}
diff --git a/ui/public/tinymce/skins/content/dark/content.min.css b/ui/public/tinymce/skins/content/dark/content.min.css
new file mode 100644
index 0000000..07d40c2
--- /dev/null
+++ b/ui/public/tinymce/skins/content/dark/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body{background-color:#2f3742;color:#dfe0e4;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem}a{color:#4099ff}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#6d737b}figure{display:table;margin:1rem auto}figure figcaption{color:#8a8f97;display:block;margin-top:.25rem;text-align:center}hr{border-color:#6d737b;border-style:solid;border-width:1px 0 0 0}code{background-color:#6d737b;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #6d737b;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #6d737b;margin-right:1.5rem;padding-right:1rem}
diff --git a/ui/public/tinymce/skins/content/default/content.css b/ui/public/tinymce/skins/content/default/content.css
new file mode 100644
index 0000000..dd6a5c1
--- /dev/null
+++ b/ui/public/tinymce/skins/content/default/content.css
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  margin: 1rem;
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #ccc;
+}
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+figure figcaption {
+  color: #999;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+code {
+  background-color: #e8e8e8;
+  border-radius: 3px;
+  padding: 0.1rem 0.2rem;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #ccc;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #ccc;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}
diff --git a/ui/public/tinymce/skins/content/default/content.min.css b/ui/public/tinymce/skins/content/default/content.min.css
new file mode 100644
index 0000000..29cd987
--- /dev/null
+++ b/ui/public/tinymce/skins/content/default/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#ccc}figure{display:table;margin:1rem auto}figure figcaption{color:#999;display:block;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}code{background-color:#e8e8e8;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
diff --git a/ui/public/tinymce/skins/content/document/content.css b/ui/public/tinymce/skins/content/document/content.css
new file mode 100644
index 0000000..75f637a
--- /dev/null
+++ b/ui/public/tinymce/skins/content/document/content.css
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+@media screen {
+  html {
+    background: #f4f4f4;
+    min-height: 100%;
+  }
+}
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+@media screen {
+  body {
+    background-color: #fff;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+    box-sizing: border-box;
+    margin: 1rem auto 0;
+    max-width: 820px;
+    min-height: calc(100vh - 1rem);
+    padding: 4rem 6rem 6rem 6rem;
+  }
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #ccc;
+}
+figure figcaption {
+  color: #999;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #ccc;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #ccc;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}
diff --git a/ui/public/tinymce/skins/content/document/content.min.css b/ui/public/tinymce/skins/content/document/content.min.css
new file mode 100644
index 0000000..a1feef4
--- /dev/null
+++ b/ui/public/tinymce/skins/content/document/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+@media screen{html{background:#f4f4f4;min-height:100%}}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif}@media screen{body{background-color:#fff;box-shadow:0 0 4px rgba(0,0,0,.15);box-sizing:border-box;margin:1rem auto 0;max-width:820px;min-height:calc(100vh - 1rem);padding:4rem 6rem 6rem 6rem}}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#ccc}figure figcaption{color:#999;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
diff --git a/ui/public/tinymce/skins/content/writer/content.css b/ui/public/tinymce/skins/content/writer/content.css
new file mode 100644
index 0000000..ceee359
--- /dev/null
+++ b/ui/public/tinymce/skins/content/writer/content.css
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  margin: 1rem auto;
+  max-width: 900px;
+}
+table {
+  border-collapse: collapse;
+}
+/* Apply a default padding if legacy cellpadding attribute is missing */
+table:not([cellpadding]) th,
+table:not([cellpadding]) td {
+  padding: 0.4rem;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-width"]) th,
+table[border]:not([border="0"]):not([style*="border-width"]) td {
+  border-width: 1px;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-style"]) th,
+table[border]:not([border="0"]):not([style*="border-style"]) td {
+  border-style: solid;
+}
+/* Set default table styles if a table has a positive border attribute
+   and no inline css */
+table[border]:not([border="0"]):not([style*="border-color"]) th,
+table[border]:not([border="0"]):not([style*="border-color"]) td {
+  border-color: #ccc;
+}
+figure {
+  display: table;
+  margin: 1rem auto;
+}
+figure figcaption {
+  color: #999;
+  display: block;
+  margin-top: 0.25rem;
+  text-align: center;
+}
+hr {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 1px 0 0 0;
+}
+code {
+  background-color: #e8e8e8;
+  border-radius: 3px;
+  padding: 0.1rem 0.2rem;
+}
+.mce-content-body:not([dir=rtl]) blockquote {
+  border-left: 2px solid #ccc;
+  margin-left: 1.5rem;
+  padding-left: 1rem;
+}
+.mce-content-body[dir=rtl] blockquote {
+  border-right: 2px solid #ccc;
+  margin-right: 1.5rem;
+  padding-right: 1rem;
+}
diff --git a/ui/public/tinymce/skins/content/writer/content.min.css b/ui/public/tinymce/skins/content/writer/content.min.css
new file mode 100644
index 0000000..0d8f5d3
--- /dev/null
+++ b/ui/public/tinymce/skins/content/writer/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.4;margin:1rem auto;max-width:900px}table{border-collapse:collapse}table:not([cellpadding]) td,table:not([cellpadding]) th{padding:.4rem}table[border]:not([border="0"]):not([style*=border-width]) td,table[border]:not([border="0"]):not([style*=border-width]) th{border-width:1px}table[border]:not([border="0"]):not([style*=border-style]) td,table[border]:not([border="0"]):not([style*=border-style]) th{border-style:solid}table[border]:not([border="0"]):not([style*=border-color]) td,table[border]:not([border="0"]):not([style*=border-color]) th{border-color:#ccc}figure{display:table;margin:1rem auto}figure figcaption{color:#999;display:block;margin-top:.25rem;text-align:center}hr{border-color:#ccc;border-style:solid;border-width:1px 0 0 0}code{background-color:#e8e8e8;border-radius:3px;padding:.1rem .2rem}.mce-content-body:not([dir=rtl]) blockquote{border-left:2px solid #ccc;margin-left:1.5rem;padding-left:1rem}.mce-content-body[dir=rtl] blockquote{border-right:2px solid #ccc;margin-right:1.5rem;padding-right:1rem}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/content.css b/ui/public/tinymce/skins/ui/oxide-dark/content.css
new file mode 100644
index 0000000..a6871c8
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/content.css
@@ -0,0 +1,714 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%236d737b%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #282a36;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6272a4;
+}
+.token.punctuation {
+  color: #f8f8f2;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #ff79c6;
+}
+.token.boolean,
+.token.number {
+  color: #bd93f9;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #50fa7b;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #f8f8f2;
+}
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #f1fa8c;
+}
+.token.keyword {
+  color: #8be9fd;
+}
+.token.regex,
+.token.important {
+  color: #ffb86c;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(34, 47, 62, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 10000;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::-moz-selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #4099ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #4099ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #4099ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #4099ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #4099ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #4099ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #4099ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::-moz-selection,
+.mce-content-body th[data-mce-selected]::-moz-selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid transparent;
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: lighten;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::-moz-selection {
+  background: none;
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #4099ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/content.inline.css b/ui/public/tinymce/skins/ui/oxide-dark/content.inline.css
new file mode 100644
index 0000000..df6ed08
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/content.inline.css
@@ -0,0 +1,726 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(34, 47, 62, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 10000;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::-moz-selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #b4d7ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::-moz-selection,
+.mce-content-body th[data-mce-selected]::-moz-selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid rgba(180, 215, 255, 0.7);
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: multiply;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::-moz-selection {
+  background: none;
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #b4d7ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/content.inline.min.css b/ui/public/tinymce/skins/ui/oxide-dark/content.inline.min.css
new file mode 100644
index 0000000..0a3d965
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/content.inline.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(34,47,62,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:10000}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:700;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::-moz-selection{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #b4d7ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #b4d7ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#b4d7ff}.mce-content-body .mce-edit-focus{outline:3px solid #b4d7ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background:0 0}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);bottom:-1px;content:'';left:-1px;mix-blend-mode:multiply;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::-moz-selection{background:0 0}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#b4d7ff;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/content.min.css b/ui/public/tinymce/skins/ui/oxide-dark/content.min.css
new file mode 100644
index 0000000..0706740
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%236d737b%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#282a36}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#6272a4}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#ff79c6}.token.boolean,.token.number{color:#bd93f9}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#50fa7b}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#f1fa8c}.token.keyword{color:#8be9fd}.token.important,.token.regex{color:#ffb86c}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(34,47,62,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:10000}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:700;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::-moz-selection{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #4099ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #4099ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #4099ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #4099ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #4099ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#4099ff}.mce-content-body .mce-edit-focus{outline:3px solid #4099ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background:0 0}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid transparent;bottom:-1px;content:'';left:-1px;mix-blend-mode:lighten;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::-moz-selection{background:0 0}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#4099ff;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}body{font-family:sans-serif}table{border-collapse:collapse}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/content.mobile.css b/ui/public/tinymce/skins/ui/oxide-dark/content.mobile.css
new file mode 100644
index 0000000..4bdb8ba
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/content.mobile.css
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection {
+  /* Note: this file is used inside the content, so isn't part of theming */
+  background-color: green;
+  display: inline-block;
+  opacity: 0.5;
+  position: absolute;
+}
+body {
+  -webkit-text-size-adjust: none;
+}
+body img {
+  /* this is related to the content margin */
+  max-width: 96vw;
+}
+body table img {
+  max-width: 95%;
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/content.mobile.min.css b/ui/public/tinymce/skins/ui/oxide-dark/content.mobile.min.css
new file mode 100644
index 0000000..35f7dc0
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/content.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/fonts/tinymce-mobile.woff b/ui/public/tinymce/skins/ui/oxide-dark/fonts/tinymce-mobile.woff
new file mode 100644
index 0000000..1e3be03
Binary files /dev/null and b/ui/public/tinymce/skins/ui/oxide-dark/fonts/tinymce-mobile.woff differ
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/skin.css b/ui/public/tinymce/skins/ui/oxide-dark/skin.css
new file mode 100644
index 0000000..769655f
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/skin.css
@@ -0,0 +1,3034 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox {
+  box-shadow: none;
+  box-sizing: content-box;
+  color: #2A3746;
+  cursor: auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  vertical-align: initial;
+  white-space: normal;
+}
+.tox *:not(svg):not(rect) {
+  box-sizing: inherit;
+  color: inherit;
+  cursor: inherit;
+  direction: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  -webkit-tap-highlight-color: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-shadow: inherit;
+  text-transform: inherit;
+  vertical-align: inherit;
+  white-space: inherit;
+}
+.tox *:not(svg):not(rect) {
+  /* stylelint-disable-line no-duplicate-selectors */
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  float: none;
+  height: auto;
+  margin: 0;
+  max-width: none;
+  outline: 0;
+  padding: 0;
+  position: static;
+  width: auto;
+}
+.tox:not([dir=rtl]) {
+  direction: ltr;
+  text-align: left;
+}
+.tox[dir=rtl] {
+  direction: rtl;
+  text-align: right;
+}
+.tox-tinymce {
+  border: 1px solid #000000;
+  border-radius: 0;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  overflow: hidden;
+  position: relative;
+  visibility: inherit !important;
+}
+.tox-tinymce-inline {
+  border: none;
+  box-shadow: none;
+}
+.tox-tinymce-inline .tox-editor-header {
+  background-color: transparent;
+  border: 1px solid #000000;
+  border-radius: 0;
+  box-shadow: none;
+}
+.tox-tinymce-aux {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  z-index: 1300;
+}
+.tox-tinymce *:focus,
+.tox-tinymce-aux *:focus {
+  outline: none;
+}
+button::-moz-focus-inner {
+  border: 0;
+}
+.tox .accessibility-issue__header {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4px;
+}
+.tox .accessibility-issue__description {
+  align-items: stretch;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .accessibility-issue__description > div {
+  padding-bottom: 4px;
+}
+.tox .accessibility-issue__description > div > div {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4px;
+}
+.tox .accessibility-issue__description > *:last-child:not(:only-child) {
+  border-color: #000000;
+  border-style: solid;
+}
+.tox .accessibility-issue__repair {
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description {
+  background-color: rgba(32, 122, 183, 0.5);
+  border-color: #207ab7;
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description > *:last-child {
+  border-color: #207ab7;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description {
+  background-color: rgba(255, 165, 0, 0.5);
+  border-color: rgba(255, 165, 0, 0.8);
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description > *:last-child {
+  border-color: rgba(255, 165, 0, 0.8);
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description {
+  background-color: rgba(204, 0, 0, 0.5);
+  border-color: rgba(204, 0, 0, 0.8);
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description > *:last-child {
+  border-color: rgba(204, 0, 0, 0.8);
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description {
+  background-color: rgba(120, 171, 70, 0.5);
+  border-color: rgba(120, 171, 70, 0.8);
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description > *:last-child {
+  border-color: rgba(120, 171, 70, 0.8);
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2 {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon {
+  color: #fff;
+}
+.tox .tox-dialog__body-content .accessibility-issue__header h1,
+.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 {
+  margin-top: 0;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-left: auto;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description {
+  padding: 4px 4px 4px 8px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-left-width: 1px;
+  padding-left: 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-right: auto;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description {
+  padding: 4px 8px 4px 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-right-width: 1px;
+  padding-right: 4px;
+}
+.tox .tox-anchorbar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-bar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-button {
+  background-color: #207ab7;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #207ab7;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  line-height: 24px;
+  margin: 0;
+  outline: none;
+  padding: 4px 16px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-button[disabled] {
+  background-color: #207ab7;
+  background-image: none;
+  border-color: #207ab7;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-button:focus:not(:disabled) {
+  background-color: #1c6ca1;
+  background-image: none;
+  border-color: #1c6ca1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:hover:not(:disabled) {
+  background-color: #1c6ca1;
+  background-image: none;
+  border-color: #1c6ca1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:active:not(:disabled) {
+  background-color: #185d8c;
+  background-image: none;
+  border-color: #185d8c;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary {
+  background-color: #3d546f;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #3d546f;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  color: #fff;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  outline: none;
+  padding: 4px 16px;
+  text-decoration: none;
+  text-transform: none;
+}
+.tox .tox-button--secondary[disabled] {
+  background-color: #3d546f;
+  background-image: none;
+  border-color: #3d546f;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-button--secondary:focus:not(:disabled) {
+  background-color: #34485f;
+  background-image: none;
+  border-color: #34485f;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary:hover:not(:disabled) {
+  background-color: #34485f;
+  background-image: none;
+  border-color: #34485f;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary:active:not(:disabled) {
+  background-color: #2b3b4e;
+  background-image: none;
+  border-color: #2b3b4e;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--icon,
+.tox .tox-button.tox-button--icon,
+.tox .tox-button.tox-button--secondary.tox-button--icon {
+  padding: 4px;
+}
+.tox .tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg {
+  display: block;
+  fill: currentColor;
+}
+.tox .tox-button-link {
+  background: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+.tox .tox-button-link--sm {
+  font-size: 14px;
+}
+.tox .tox-button--naked {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #fff;
+}
+.tox .tox-button--naked[disabled] {
+  background-color: #3d546f;
+  border-color: #3d546f;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-button--naked:hover:not(:disabled) {
+  background-color: #34485f;
+  border-color: #34485f;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--naked:focus:not(:disabled) {
+  background-color: #34485f;
+  border-color: #34485f;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--naked:active:not(:disabled) {
+  background-color: #2b3b4e;
+  border-color: #2b3b4e;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--naked .tox-icon svg {
+  fill: currentColor;
+}
+.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
+  color: #fff;
+}
+.tox .tox-checkbox {
+  align-items: center;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  height: 36px;
+  min-width: 36px;
+}
+.tox .tox-checkbox__input {
+  /* Hide from view but visible to screen readers */
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+.tox .tox-checkbox__icons {
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px transparent;
+  box-sizing: content-box;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  padding: calc(4px - 1px);
+  width: 24px;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: block;
+  fill: rgba(255, 255, 255, 0.2);
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: none;
+  fill: #207ab7;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: none;
+  fill: #207ab7;
+}
+.tox .tox-checkbox--disabled {
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px #207ab7;
+  padding: calc(4px - 1px);
+}
+.tox:not([dir=rtl]) .tox-checkbox__label {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-checkbox__input {
+  left: -10000px;
+}
+.tox:not([dir=rtl]) .tox-bar .tox-checkbox {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-checkbox__label {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-checkbox__input {
+  right: -10000px;
+}
+.tox[dir=rtl] .tox-bar .tox-checkbox {
+  margin-right: 4px;
+}
+.tox {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox .tox-collection--toolbar .tox-collection__group {
+  display: flex;
+  padding: 0;
+}
+.tox .tox-collection--grid .tox-collection__group {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 208px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+}
+.tox .tox-collection--list .tox-collection__group {
+  border-bottom-width: 0;
+  border-color: #1a1a1a;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-style: solid;
+  border-top-width: 1px;
+  padding: 4px 0;
+}
+.tox .tox-collection--list .tox-collection__group:first-child {
+  border-top-width: 0;
+}
+.tox .tox-collection__group-heading {
+  background-color: #333333;
+  color: #fff;
+  cursor: default;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  margin-bottom: 4px;
+  margin-top: -4px;
+  padding: 4px 8px;
+  text-transform: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection__item {
+  align-items: center;
+  color: #fff;
+  cursor: pointer;
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection--list .tox-collection__item {
+  padding: 4px 8px;
+}
+.tox .tox-collection--toolbar .tox-collection__item {
+  border-radius: 3px;
+  padding: 4px;
+}
+.tox .tox-collection--grid .tox-collection__item {
+  border-radius: 3px;
+  padding: 4px;
+}
+.tox .tox-collection--list .tox-collection__item--enabled {
+  background-color: #2b3b4e;
+  color: #fff;
+}
+.tox .tox-collection--list .tox-collection__item--active {
+  background-color: #4a5562;
+}
+.tox .tox-collection--toolbar .tox-collection__item--enabled {
+  background-color: #757d87;
+  color: #fff;
+}
+.tox .tox-collection--toolbar .tox-collection__item--active {
+  background-color: #4a5562;
+}
+.tox .tox-collection--grid .tox-collection__item--enabled {
+  background-color: #757d87;
+  color: #fff;
+}
+.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  background-color: #4a5562;
+  color: #fff;
+}
+.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: #fff;
+}
+.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: #fff;
+}
+.tox .tox-collection__item--state-disabled {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-collection__item-icon,
+.tox .tox-collection__item-checkmark {
+  align-items: center;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+.tox .tox-collection__item-icon svg,
+.tox .tox-collection__item-checkmark svg {
+  fill: currentColor;
+}
+.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
+  height: 48px;
+  width: 48px;
+}
+.tox .tox-collection__item-label {
+  color: currentColor;
+  display: inline-block;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 24px;
+  text-transform: none;
+  word-break: break-all;
+}
+.tox .tox-collection__item-accessory {
+  color: rgba(255, 255, 255, 0.5);
+  display: inline-block;
+  font-size: 14px;
+  height: 24px;
+  line-height: 24px;
+  text-transform: none;
+}
+.tox .tox-collection__item-caret {
+  align-items: center;
+  display: flex;
+  min-height: 24px;
+}
+.tox .tox-collection__item-caret::after {
+  content: '';
+  font-size: 0;
+  min-height: inherit;
+}
+.tox .tox-collection__item-caret svg {
+  fill: #fff;
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg {
+  display: none;
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark {
+  display: none;
+}
+.tox .tox-collection--horizontal {
+  background-color: #2b3b4e;
+  border: 1px solid #1a1a1a;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  margin-bottom: 0;
+  overflow-x: auto;
+  padding: 0;
+}
+.tox .tox-collection--horizontal .tox-collection__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item {
+  height: 34px;
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item-label {
+  white-space: nowrap;
+}
+.tox .tox-collection--horizontal .tox-collection__item-caret {
+  margin-left: 4px;
+}
+.tox .tox-collection__item-container {
+  display: flex;
+}
+.tox .tox-collection__item-container--row {
+  align-items: center;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-left {
+  margin-right: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-right {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top {
+  align-items: flex-start;
+  margin-bottom: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle {
+  align-items: center;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom {
+  align-items: flex-end;
+  margin-top: auto;
+}
+.tox .tox-collection__item-container--column {
+  -ms-grid-row-align: center;
+      align-self: center;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-left {
+  align-items: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-right {
+  align-items: flex-end;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top {
+  align-self: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle {
+  -ms-grid-row-align: center;
+      align-self: center;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom {
+  align-self: flex-end;
+}
+.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-right: 1px solid #000000;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-collection__item-accessory {
+  margin-left: 16px;
+  text-align: right;
+}
+.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret {
+  margin-left: 16px;
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-left: 1px solid #000000;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-collection__item-icon-rtl {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg {
+  transform: rotateY(180deg);
+}
+.tox[dir=rtl] .tox-collection__item-accessory {
+  margin-right: 16px;
+  text-align: left;
+}
+.tox[dir=rtl] .tox-collection .tox-collection__item-caret {
+  margin-right: 16px;
+  transform: rotateY(180deg);
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret {
+  margin-right: 4px;
+}
+.tox .tox-color-picker-container {
+  display: flex;
+  flex-direction: row;
+  height: 225px;
+  margin: 0;
+}
+.tox .tox-sv-palette {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+}
+.tox .tox-sv-palette-spectrum {
+  height: 100%;
+}
+.tox .tox-sv-palette,
+.tox .tox-sv-palette-spectrum {
+  width: 225px;
+}
+.tox .tox-sv-palette-thumb {
+  background: none;
+  border: 1px solid black;
+  border-radius: 50%;
+  box-sizing: content-box;
+  height: 12px;
+  position: absolute;
+  width: 12px;
+}
+.tox .tox-sv-palette-inner-thumb {
+  border: 1px solid white;
+  border-radius: 50%;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox .tox-hue-slider {
+  box-sizing: border-box;
+  height: 100%;
+  width: 25px;
+}
+.tox .tox-hue-slider-spectrum {
+  background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00);
+  height: 100%;
+  width: 100%;
+}
+.tox .tox-hue-slider,
+.tox .tox-hue-slider-spectrum {
+  width: 20px;
+}
+.tox .tox-hue-slider-thumb {
+  background: white;
+  border: 1px solid black;
+  box-sizing: content-box;
+  height: 4px;
+  width: 100%;
+}
+.tox .tox-rgb-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.tox .tox-rgb-form div {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  width: inherit;
+}
+.tox .tox-rgb-form input {
+  width: 6em;
+}
+.tox .tox-rgb-form input.tox-invalid {
+  /* Need !important to override Chrome's focus styling unfortunately */
+  border: 1px solid red !important;
+}
+.tox .tox-rgb-form .tox-rgba-preview {
+  border: 1px solid black;
+  flex-grow: 2;
+  margin-bottom: 0;
+}
+.tox:not([dir=rtl]) .tox-sv-palette {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider-thumb {
+  margin-left: -1px;
+}
+.tox:not([dir=rtl]) .tox-rgb-form label {
+  margin-right: 0.5em;
+}
+.tox[dir=rtl] .tox-sv-palette {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider-thumb {
+  margin-right: -1px;
+}
+.tox[dir=rtl] .tox-rgb-form label {
+  margin-left: 0.5em;
+}
+.tox .tox-toolbar .tox-swatches,
+.tox .tox-toolbar__primary .tox-swatches,
+.tox .tox-toolbar__overflow .tox-swatches {
+  margin: 2px 0 3px 4px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-swatches-menu {
+  border: 0;
+  margin: -4px 0;
+}
+.tox .tox-swatches__row {
+  display: flex;
+}
+.tox .tox-swatch {
+  height: 30px;
+  transition: transform 0.15s, box-shadow 0.15s;
+  width: 30px;
+}
+.tox .tox-swatch:hover,
+.tox .tox-swatch:focus {
+  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset;
+  transform: scale(0.8);
+}
+.tox .tox-swatch--remove {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-swatch--remove svg path {
+  stroke: #e74c3c;
+}
+.tox .tox-swatches__picker-btn {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  width: 30px;
+}
+.tox .tox-swatches__picker-btn svg {
+  height: 24px;
+  width: 24px;
+}
+.tox .tox-swatches__picker-btn:hover {
+  background: #4a5562;
+}
+.tox:not([dir=rtl]) .tox-swatches__picker-btn {
+  margin-left: auto;
+}
+.tox[dir=rtl] .tox-swatches__picker-btn {
+  margin-right: auto;
+}
+.tox .tox-comment-thread {
+  background: #2b3b4e;
+  position: relative;
+}
+.tox .tox-comment-thread > *:not(:first-child) {
+  margin-top: 8px;
+}
+.tox .tox-comment {
+  background: #2b3b4e;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(42, 55, 70, 0.1);
+  padding: 8px 8px 16px 8px;
+  position: relative;
+}
+.tox .tox-comment__header {
+  align-items: center;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .tox-comment__date {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+}
+.tox .tox-comment__body {
+  color: #fff;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin-top: 8px;
+  position: relative;
+  text-transform: initial;
+}
+.tox .tox-comment__body textarea {
+  resize: none;
+  white-space: normal;
+  width: 100%;
+}
+.tox .tox-comment__expander {
+  padding-top: 8px;
+}
+.tox .tox-comment__expander p {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 14px;
+  font-style: normal;
+}
+.tox .tox-comment__body p {
+  margin: 0;
+}
+.tox .tox-comment__buttonspacing {
+  padding-top: 16px;
+  text-align: center;
+}
+.tox .tox-comment-thread__overlay::after {
+  background: #2b3b4e;
+  bottom: 0;
+  content: "";
+  display: flex;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__reply {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.tox .tox-comment__reply > *:first-child {
+  margin-bottom: 8px;
+  width: 100%;
+}
+.tox .tox-comment__edit {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+.tox .tox-comment__gradient::after {
+  background: linear-gradient(rgba(43, 59, 78, 0), #2b3b4e);
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 5em;
+  margin-top: -40px;
+  position: absolute;
+  width: 100%;
+}
+.tox .tox-comment__overlay {
+  background: #2b3b4e;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__loading-text {
+  align-items: center;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.tox .tox-comment__loading-text > div {
+  padding-bottom: 16px;
+}
+.tox .tox-comment__overlaytext {
+  bottom: 0;
+  flex-direction: column;
+  font-size: 14px;
+  left: 0;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+.tox .tox-comment__overlaytext p {
+  background-color: #2b3b4e;
+  box-shadow: 0 0 8px 8px #2b3b4e;
+  color: #fff;
+  text-align: center;
+}
+.tox .tox-comment__overlaytext div:nth-of-type(2) {
+  font-size: 0.8em;
+}
+.tox .tox-comment__busy-spinner {
+  align-items: center;
+  background-color: #2b3b4e;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 20;
+}
+.tox .tox-comment__scroll {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  overflow: auto;
+}
+.tox .tox-conversations {
+  margin: 8px;
+}
+.tox:not([dir=rtl]) .tox-comment__edit {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__edit > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__reply > *:last-child {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-comment__edit {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-comment__buttonspacing > *:last-child,
+.tox[dir=rtl] .tox-comment__edit > *:last-child,
+.tox[dir=rtl] .tox-comment__reply > *:last-child {
+  margin-right: 8px;
+}
+.tox .tox-user {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-user__avatar svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-user__name {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.tox:not([dir=rtl]) .tox-user__avatar svg {
+  margin-right: 8px;
+}
+.tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-user__avatar svg {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-user__avatar + .tox-user__name {
+  margin-right: 8px;
+}
+.tox .tox-dialog-wrap {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1100;
+}
+.tox .tox-dialog-wrap__backdrop {
+  background-color: rgba(34, 47, 62, 0.75);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.tox .tox-dialog-wrap__backdrop--opaque {
+  background-color: #222f3e;
+}
+.tox .tox-dialog {
+  background-color: #2b3b4e;
+  border-color: #000000;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0 16px 16px -10px rgba(42, 55, 70, 0.15), 0 0 40px 1px rgba(42, 55, 70, 0.15);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 480px;
+  overflow: hidden;
+  position: relative;
+  width: 95vw;
+  z-index: 2;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog {
+    align-self: flex-start;
+    margin: 8px auto;
+    width: calc(100vw - 16px);
+  }
+}
+.tox .tox-dialog-inline {
+  z-index: 1100;
+}
+.tox .tox-dialog__header {
+  align-items: center;
+  background-color: #2b3b4e;
+  border-bottom: none;
+  color: #fff;
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  padding: 8px 16px 0 16px;
+  position: relative;
+}
+.tox .tox-dialog__header .tox-button {
+  z-index: 1;
+}
+.tox .tox-dialog__draghandle {
+  cursor: grab;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tox .tox-dialog__draghandle:active {
+  cursor: grabbing;
+}
+.tox .tox-dialog__dismiss {
+  margin-left: auto;
+}
+.tox .tox-dialog__title {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  text-transform: none;
+}
+.tox .tox-dialog__body {
+  color: #fff;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  min-width: 0;
+  text-align: left;
+  text-transform: none;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body {
+    flex-direction: column;
+  }
+}
+.tox .tox-dialog__body-nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
+    flex-direction: row;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    padding-bottom: 0;
+  }
+}
+.tox .tox-dialog__body-nav-item {
+  border-bottom: 2px solid transparent;
+  color: rgba(255, 255, 255, 0.5);
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 8px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.tox .tox-dialog__body-nav-item:focus {
+  background-color: rgba(32, 122, 183, 0.1);
+}
+.tox .tox-dialog__body-nav-item--active {
+  border-bottom: 2px solid #207ab7;
+  color: #207ab7;
+}
+.tox .tox-dialog__body-content {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+  max-height: 650px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px 16px;
+}
+.tox .tox-dialog__body-content > * {
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content > *:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content a {
+  color: #207ab7;
+  cursor: pointer;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:hover,
+.tox .tox-dialog__body-content a:focus {
+  color: #185d8c;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:active {
+  color: #185d8c;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content svg {
+  fill: #fff;
+}
+.tox .tox-dialog__body-content ul {
+  display: block;
+  list-style-type: disc;
+  margin-bottom: 16px;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-padding-start: 2.5rem;
+          padding-inline-start: 2.5rem;
+}
+.tox .tox-dialog__body-content .tox-form__group h1 {
+  color: #fff;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group h2 {
+  color: #fff;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group p {
+  margin-bottom: 16px;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:first-child,
+.tox .tox-dialog__body-content .tox-form__group h2:first-child,
+.tox .tox-dialog__body-content .tox-form__group p:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:last-child,
+.tox .tox-dialog__body-content .tox-form__group h2:last-child,
+.tox .tox-dialog__body-content .tox-form__group p:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:only-child,
+.tox .tox-dialog__body-content .tox-form__group h2:only-child,
+.tox .tox-dialog__body-content .tox-form__group p:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog--width-lg {
+  height: 650px;
+  max-width: 1200px;
+}
+.tox .tox-dialog--width-md {
+  max-width: 800px;
+}
+.tox .tox-dialog--width-md .tox-dialog__body-content {
+  overflow: auto;
+}
+.tox .tox-dialog__body-content--centered {
+  text-align: center;
+}
+.tox .tox-dialog__footer {
+  align-items: center;
+  background-color: #2b3b4e;
+  border-top: 1px solid #000000;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+}
+.tox .tox-dialog__footer-start,
+.tox .tox-dialog__footer-end {
+  display: flex;
+}
+.tox .tox-dialog__busy-spinner {
+  align-items: center;
+  background-color: rgba(34, 47, 62, 0.75);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
+}
+.tox .tox-dialog__table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.tox .tox-dialog__table thead th {
+  font-weight: bold;
+  padding-bottom: 8px;
+}
+.tox .tox-dialog__table tbody tr {
+  border-bottom: 1px solid #000000;
+}
+.tox .tox-dialog__table tbody tr:last-child {
+  border-bottom: none;
+}
+.tox .tox-dialog__table td {
+  padding-bottom: 8px;
+  padding-top: 8px;
+}
+.tox .tox-dialog__popups {
+  position: absolute;
+  width: 100%;
+  z-index: 1100;
+}
+.tox .tox-dialog__body-iframe {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox .tox-dialog-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox .tox-dialog-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox .tox-dialog-dock-transition {
+  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
+}
+.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein {
+  transition-delay: 0s;
+}
+.tox.tox-platform-ie {
+  /* IE11 CSS styles go here */
+}
+.tox.tox-platform-ie .tox-dialog-wrap {
+  position: -ms-device-fixed;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav {
+    margin-right: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) {
+    margin-left: 8px;
+  }
+}
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-dialog__body {
+  text-align: right;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav {
+    margin-left: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) {
+    margin-right: 8px;
+  }
+}
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-right: 8px;
+}
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox .tox-dropzone-container {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dropzone {
+  align-items: center;
+  background: #fff;
+  border: 2px dashed #000000;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  min-height: 100px;
+  padding: 10px;
+}
+.tox .tox-dropzone p {
+  color: rgba(255, 255, 255, 0.5);
+  margin: 0 0 16px 0;
+}
+.tox .tox-edit-area {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  overflow: hidden;
+  position: relative;
+}
+.tox .tox-edit-area__iframe {
+  background-color: #fff;
+  border: 0;
+  box-sizing: border-box;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tox.tox-inline-edit-area {
+  border: 1px dotted #000000;
+}
+.tox .tox-editor-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tox .tox-editor-header {
+  z-index: 1;
+}
+.tox:not(.tox-tinymce-inline) .tox-editor-header {
+  box-shadow: none;
+  transition: box-shadow 0.5s;
+}
+.tox.tox-tinymce--toolbar-bottom .tox-editor-header,
+.tox.tox-tinymce-inline .tox-editor-header {
+  margin-bottom: -1px;
+}
+.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+  background-color: transparent;
+  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25);
+}
+.tox-editor-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox-editor-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox-editor-dock-transition {
+  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+.tox-editor-dock-transition.tox-editor-dock-fadein {
+  transition-delay: 0s;
+}
+.tox .tox-control-wrap {
+  flex: 1;
+  position: relative;
+}
+.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid {
+  display: none;
+}
+.tox .tox-control-wrap svg {
+  display: block;
+}
+.tox .tox-control-wrap__status-icon-wrap {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-control-wrap__status-icon-invalid svg {
+  fill: #c00;
+}
+.tox .tox-control-wrap__status-icon-unknown svg {
+  fill: orange;
+}
+.tox .tox-control-wrap__status-icon-valid svg {
+  fill: green;
+}
+.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield {
+  padding-right: 32px;
+}
+.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap {
+  right: 4px;
+}
+.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield {
+  padding-left: 32px;
+}
+.tox[dir=rtl] .tox-control-wrap__status-icon-wrap {
+  left: 4px;
+}
+.tox .tox-autocompleter {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-menu {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-autocompleter-highlight {
+  font-weight: bold;
+}
+.tox .tox-color-input {
+  display: flex;
+  position: relative;
+  z-index: 1;
+}
+.tox .tox-color-input .tox-textfield {
+  z-index: -1;
+}
+.tox .tox-color-input span {
+  border-color: rgba(42, 55, 70, 0.2);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  height: 24px;
+  position: absolute;
+  top: 6px;
+  width: 24px;
+}
+.tox .tox-color-input span:hover:not([aria-disabled=true]),
+.tox .tox-color-input span:focus:not([aria-disabled=true]) {
+  border-color: #207ab7;
+  cursor: pointer;
+}
+.tox .tox-color-input span::before {
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.25) 75%);
+  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
+  background-size: 12px 12px;
+  border: 1px solid #2b3b4e;
+  border-radius: 3px;
+  box-sizing: border-box;
+  content: '';
+  height: 24px;
+  left: -1px;
+  position: absolute;
+  top: -1px;
+  width: 24px;
+  z-index: -1;
+}
+.tox .tox-color-input span[aria-disabled=true] {
+  cursor: not-allowed;
+}
+.tox:not([dir=rtl]) .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-color-input .tox-textfield {
+  padding-left: 36px;
+}
+.tox:not([dir=rtl]) .tox-color-input span {
+  left: 6px;
+}
+.tox[dir="rtl"] .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir="rtl"] .tox-color-input .tox-textfield {
+  padding-right: 36px;
+}
+.tox[dir="rtl"] .tox-color-input span {
+  right: 6px;
+}
+.tox .tox-label,
+.tox .tox-toolbar-label {
+  color: rgba(255, 255, 255, 0.5);
+  display: block;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  padding: 0 8px 0 0;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-toolbar-label {
+  padding: 0 8px;
+}
+.tox[dir=rtl] .tox-label {
+  padding: 0 0 0 8px;
+}
+.tox .tox-form {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group {
+  box-sizing: border-box;
+  margin-bottom: 4px;
+}
+.tox .tox-form-group--maximize {
+  flex: 1;
+}
+.tox .tox-form__group--error {
+  color: #c00;
+}
+.tox .tox-form__group--collection {
+  display: flex;
+}
+.tox .tox-form__grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.tox .tox-form__grid--2col > .tox-form__group {
+  width: calc(50% - (8px / 2));
+}
+.tox .tox-form__grid--3col > .tox-form__group {
+  width: calc(100% / 3 - (8px / 2));
+}
+.tox .tox-form__grid--4col > .tox-form__group {
+  width: calc(25% - (8px / 2));
+}
+.tox .tox-form__controls-h-stack {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--inline {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--stretched {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-textarea {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-right: 4px;
+}
+.tox .tox-lock.tox-locked .tox-lock-icon__unlock,
+.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock {
+  display: none;
+}
+.tox .tox-textfield,
+.tox .tox-toolbar-textfield,
+.tox .tox-listboxfield .tox-listbox--select,
+.tox .tox-textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #2b3b4e;
+  border-color: #000000;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 4.75px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-textfield[disabled],
+.tox .tox-textarea[disabled] {
+  background-color: #222f3e;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-textfield:focus,
+.tox .tox-listboxfield .tox-listbox--select:focus,
+.tox .tox-textarea:focus {
+  background-color: #2b3b4e;
+  border-color: #207ab7;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-toolbar-textfield {
+  border-width: 0;
+  margin-bottom: 3px;
+  margin-top: 2px;
+  max-width: 250px;
+}
+.tox .tox-naked-btn {
+  background-color: transparent;
+  border: 0;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #207ab7;
+  cursor: pointer;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+.tox .tox-naked-btn svg {
+  display: block;
+  fill: #fff;
+}
+.tox:not([dir=rtl]) .tox-toolbar-textfield + * {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-toolbar-textfield + * {
+  margin-right: 4px;
+}
+.tox .tox-listboxfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-listboxfield .tox-listbox--select[disabled] {
+  background-color: #19232e;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-listbox__select-label {
+  cursor: default;
+  flex: 1;
+  margin: 0 4px;
+}
+.tox .tox-listbox__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+}
+.tox .tox-listbox__select-chevron svg {
+  fill: #fff;
+}
+.tox .tox-listboxfield .tox-listbox--select {
+  align-items: center;
+  display: flex;
+}
+.tox:not([dir=rtl]) .tox-listboxfield svg {
+  right: 8px;
+}
+.tox[dir=rtl] .tox-listboxfield svg {
+  left: 8px;
+}
+.tox .tox-selectfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-selectfield select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #2b3b4e;
+  border-color: #000000;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 4.75px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-selectfield select[disabled] {
+  background-color: #19232e;
+  color: rgba(255, 255, 255, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-selectfield select::-ms-expand {
+  display: none;
+}
+.tox .tox-selectfield select:focus {
+  background-color: #2b3b4e;
+  border-color: #207ab7;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-selectfield svg {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox:not([dir=rtl]) .tox-selectfield select[size="0"],
+.tox:not([dir=rtl]) .tox-selectfield select[size="1"] {
+  padding-right: 24px;
+}
+.tox:not([dir=rtl]) .tox-selectfield svg {
+  right: 8px;
+}
+.tox[dir=rtl] .tox-selectfield select[size="0"],
+.tox[dir=rtl] .tox-selectfield select[size="1"] {
+  padding-left: 24px;
+}
+.tox[dir=rtl] .tox-selectfield svg {
+  left: 8px;
+}
+.tox .tox-textarea {
+  -webkit-appearance: textarea;
+     -moz-appearance: textarea;
+          appearance: textarea;
+  white-space: pre-wrap;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+  z-index: 1200;
+}
+.tox-shadowhost.tox-fullscreen {
+  z-index: 1200;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
+.tox .tox-help__more-link {
+  list-style: none;
+  margin-top: 1em;
+}
+.tox .tox-image-tools {
+  width: 100%;
+}
+.tox .tox-image-tools__toolbar {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-image-tools__image {
+  background-color: #666;
+  height: 380px;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+.tox .tox-image-tools__image,
+.tox .tox-image-tools__image + .tox-image-tools__toolbar {
+  margin-top: 8px;
+}
+.tox .tox-image-tools__image-bg {
+  background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==);
+}
+.tox .tox-image-tools__toolbar > .tox-spacer {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-croprect-block {
+  background: black;
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+  position: absolute;
+  zoom: 1;
+}
+.tox .tox-croprect-handle {
+  border: 2px solid white;
+  height: 20px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+.tox .tox-croprect-handle-move {
+  border: 0;
+  cursor: move;
+  position: absolute;
+}
+.tox .tox-croprect-handle-nw {
+  border-width: 2px 0 0 2px;
+  cursor: nw-resize;
+  left: 100px;
+  margin: -2px 0 0 -2px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-ne {
+  border-width: 2px 2px 0 0;
+  cursor: ne-resize;
+  left: 200px;
+  margin: -2px 0 0 -20px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-sw {
+  border-width: 0 0 2px 2px;
+  cursor: sw-resize;
+  left: 100px;
+  margin: -20px 2px 0 -2px;
+  top: 200px;
+}
+.tox .tox-croprect-handle-se {
+  border-width: 0 2px 2px 0;
+  cursor: se-resize;
+  left: 200px;
+  margin: -20px 0 0 -20px;
+  top: 200px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-left: 32px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-left: 32px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-right: 32px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-right: 32px;
+}
+.tox .tox-insert-table-picker {
+  display: flex;
+  flex-wrap: wrap;
+  width: 170px;
+}
+.tox .tox-insert-table-picker > div {
+  border-color: #000000;
+  border-style: solid;
+  border-width: 0 1px 1px 0;
+  box-sizing: border-box;
+  height: 17px;
+  width: 17px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker {
+  margin: -4px 0;
+}
+.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
+  background-color: rgba(32, 122, 183, 0.5);
+  border-color: rgba(32, 122, 183, 0.5);
+}
+.tox .tox-insert-table-picker__label {
+  color: #fff;
+  display: block;
+  font-size: 14px;
+  padding: 4px;
+  text-align: center;
+  width: 100%;
+}
+.tox:not([dir=rtl]) {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) {
+  border-right: 0;
+}
+.tox[dir=rtl] {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) {
+  border-right: 0;
+}
+.tox {
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+.tox .tox-menu {
+  background-color: #2b3b4e;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(42, 55, 70, 0.1);
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  z-index: 1150;
+}
+.tox .tox-menu.tox-collection.tox-collection--list {
+  padding: 0;
+}
+.tox .tox-menu.tox-collection.tox-collection--toolbar {
+  padding: 4px;
+}
+.tox .tox-menu.tox-collection.tox-collection--grid {
+  padding: 4px;
+}
+.tox .tox-menu__label h1,
+.tox .tox-menu__label h2,
+.tox .tox-menu__label h3,
+.tox .tox-menu__label h4,
+.tox .tox-menu__label h5,
+.tox .tox-menu__label h6,
+.tox .tox-menu__label p,
+.tox .tox-menu__label blockquote,
+.tox .tox-menu__label code {
+  margin: 0;
+}
+.tox .tox-menubar {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;
+  background-color: #222f3e;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 4px 0 4px;
+}
+.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar {
+  border-top: 1px solid #000000;
+}
+/* Deprecated. Remove in next major release */
+.tox .tox-mbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0 4px;
+  text-transform: none;
+  width: auto;
+}
+.tox .tox-mbtn[disabled] {
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-mbtn:focus:not(:disabled) {
+  background: #4a5562;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-mbtn--active {
+  background: #757d87;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
+  background: #4a5562;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-mbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-mbtn[disabled] .tox-mbtn__select-label {
+  cursor: not-allowed;
+}
+.tox .tox-mbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+  display: none;
+}
+.tox .tox-notification {
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: -ms-grid;
+  display: grid;
+  font-size: 14px;
+  font-weight: normal;
+  -ms-grid-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+      grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+  margin-top: 4px;
+  opacity: 0;
+  padding: 4px;
+  transition: transform 100ms ease-in, opacity 150ms ease-in;
+}
+.tox .tox-notification p {
+  font-size: 14px;
+  font-weight: normal;
+}
+.tox .tox-notification a {
+  text-decoration: underline;
+}
+.tox .tox-notification--in {
+  opacity: 1;
+}
+.tox .tox-notification--success {
+  background-color: #e4eeda;
+  border-color: #d7e6c8;
+  color: #fff;
+}
+.tox .tox-notification--success p {
+  color: #fff;
+}
+.tox .tox-notification--success a {
+  color: #547831;
+}
+.tox .tox-notification--success svg {
+  fill: #fff;
+}
+.tox .tox-notification--error {
+  background-color: #f8dede;
+  border-color: #f2bfbf;
+  color: #fff;
+}
+.tox .tox-notification--error p {
+  color: #fff;
+}
+.tox .tox-notification--error a {
+  color: #c00;
+}
+.tox .tox-notification--error svg {
+  fill: #fff;
+}
+.tox .tox-notification--warn,
+.tox .tox-notification--warning {
+  background-color: #fffaea;
+  border-color: #ffe89d;
+  color: #fff;
+}
+.tox .tox-notification--warn p,
+.tox .tox-notification--warning p {
+  color: #fff;
+}
+.tox .tox-notification--warn a,
+.tox .tox-notification--warning a {
+  color: #fff;
+}
+.tox .tox-notification--warn svg,
+.tox .tox-notification--warning svg {
+  fill: #fff;
+}
+.tox .tox-notification--info {
+  background-color: #d9edf7;
+  border-color: #779ecb;
+  color: #fff;
+}
+.tox .tox-notification--info p {
+  color: #fff;
+}
+.tox .tox-notification--info a {
+  color: #fff;
+}
+.tox .tox-notification--info svg {
+  fill: #fff;
+}
+.tox .tox-notification__body {
+  -ms-grid-row-align: center;
+      align-self: center;
+  color: #fff;
+  font-size: 14px;
+  -ms-grid-column-span: 1;
+  grid-column-end: 3;
+  -ms-grid-column: 2;
+      grid-column-start: 2;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  text-align: center;
+  white-space: normal;
+  word-break: break-all;
+  word-break: break-word;
+}
+.tox .tox-notification__body > * {
+  margin: 0;
+}
+.tox .tox-notification__body > * + * {
+  margin-top: 1rem;
+}
+.tox .tox-notification__icon {
+  -ms-grid-row-align: center;
+      align-self: center;
+  -ms-grid-column-span: 1;
+  grid-column-end: 2;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification__icon svg {
+  display: block;
+}
+.tox .tox-notification__dismiss {
+  -ms-grid-row-align: start;
+      align-self: start;
+  -ms-grid-column-span: 1;
+  grid-column-end: 4;
+  -ms-grid-column: 3;
+      grid-column-start: 3;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification .tox-progress-bar {
+  -ms-grid-column-span: 3;
+  grid-column-end: 4;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 3;
+  -ms-grid-row: 2;
+      grid-row-start: 2;
+  -ms-grid-column-align: center;
+      justify-self: center;
+}
+.tox .tox-pop {
+  display: inline-block;
+  position: relative;
+}
+.tox .tox-pop--resizing {
+  transition: width 0.1s ease;
+}
+.tox .tox-pop--resizing .tox-toolbar {
+  flex-wrap: nowrap;
+}
+.tox .tox-pop__dialog {
+  background-color: #222f3e;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  min-width: 0;
+  overflow: hidden;
+}
+.tox .tox-pop__dialog > *:not(.tox-toolbar) {
+  margin: 4px 4px 4px 8px;
+}
+.tox .tox-pop__dialog .tox-toolbar {
+  background-color: transparent;
+  margin-bottom: -1px;
+}
+.tox .tox-pop::before,
+.tox .tox-pop::after {
+  border-style: solid;
+  content: '';
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+.tox .tox-pop.tox-pop--bottom::before,
+.tox .tox-pop.tox-pop--bottom::after {
+  left: 50%;
+  top: 100%;
+}
+.tox .tox-pop.tox-pop--bottom::after {
+  border-color: #222f3e transparent transparent transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: -1px;
+}
+.tox .tox-pop.tox-pop--bottom::before {
+  border-color: #000000 transparent transparent transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--top::before,
+.tox .tox-pop.tox-pop--top::after {
+  left: 50%;
+  top: 0;
+  transform: translateY(-100%);
+}
+.tox .tox-pop.tox-pop--top::after {
+  border-color: transparent transparent #222f3e transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: 1px;
+}
+.tox .tox-pop.tox-pop--top::before {
+  border-color: transparent transparent #000000 transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--left::before,
+.tox .tox-pop.tox-pop--left::after {
+  left: 0;
+  top: calc(50% - 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--left::after {
+  border-color: transparent #222f3e transparent transparent;
+  border-width: 8px;
+  margin-left: -15px;
+}
+.tox .tox-pop.tox-pop--left::before {
+  border-color: transparent #000000 transparent transparent;
+  border-width: 10px;
+  margin-left: -19px;
+}
+.tox .tox-pop.tox-pop--right::before,
+.tox .tox-pop.tox-pop--right::after {
+  left: 100%;
+  top: calc(50% + 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--right::after {
+  border-color: transparent transparent transparent #222f3e;
+  border-width: 8px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--right::before {
+  border-color: transparent transparent transparent #000000;
+  border-width: 10px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--align-left::before,
+.tox .tox-pop.tox-pop--align-left::after {
+  left: 20px;
+}
+.tox .tox-pop.tox-pop--align-right::before,
+.tox .tox-pop.tox-pop--align-right::after {
+  left: calc(100% - 20px);
+}
+.tox .tox-sidebar-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  min-height: 0;
+}
+.tox .tox-sidebar {
+  background-color: #222f3e;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+.tox .tox-sidebar__slider {
+  display: flex;
+  overflow: hidden;
+}
+.tox .tox-sidebar__pane-container {
+  display: flex;
+}
+.tox .tox-sidebar__pane {
+  display: flex;
+}
+.tox .tox-sidebar--sliding-closed {
+  opacity: 0;
+}
+.tox .tox-sidebar--sliding-open {
+  opacity: 1;
+}
+.tox .tox-sidebar--sliding-growing,
+.tox .tox-sidebar--sliding-shrinking {
+  transition: width 0.5s ease, opacity 0.5s ease;
+}
+.tox .tox-selector {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox.tox-platform-touch .tox-selector {
+  height: 12px;
+  width: 12px;
+}
+.tox .tox-slider {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 24px;
+  justify-content: center;
+  position: relative;
+}
+.tox .tox-slider__rail {
+  background-color: transparent;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  height: 10px;
+  min-width: 120px;
+  width: 100%;
+}
+.tox .tox-slider__handle {
+  background-color: #207ab7;
+  border: 2px solid #185d8c;
+  border-radius: 3px;
+  box-shadow: none;
+  height: 24px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 14px;
+}
+.tox .tox-source-code {
+  overflow: auto;
+}
+.tox .tox-spinner {
+  display: flex;
+}
+.tox .tox-spinner > div {
+  animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+}
+.tox .tox-spinner > div:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.tox .tox-spinner > div:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes tam-bouncing-dots {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+.tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-spinner > div:not(:first-child) {
+  margin-right: 4px;
+}
+.tox .tox-statusbar {
+  align-items: center;
+  background-color: #222f3e;
+  border-top: 1px solid #000000;
+  color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 12px;
+  font-weight: normal;
+  height: 18px;
+  overflow: hidden;
+  padding: 0 8px;
+  position: relative;
+  text-transform: uppercase;
+}
+.tox .tox-statusbar__text-container {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.tox .tox-statusbar__path {
+  display: flex;
+  flex: 1 1 auto;
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__path > * {
+  display: inline;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__wordcount {
+  flex: 0 0 auto;
+  margin-left: 1ch;
+}
+.tox .tox-statusbar a,
+.tox .tox-statusbar__path-item,
+.tox .tox-statusbar__wordcount {
+  color: #fff;
+  text-decoration: none;
+}
+.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]) {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.tox .tox-statusbar__resize-handle {
+  align-items: flex-end;
+  align-self: stretch;
+  cursor: nwse-resize;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-left: auto;
+  margin-right: -8px;
+  padding-left: 1ch;
+}
+.tox .tox-statusbar__resize-handle svg {
+  display: block;
+  fill: #fff;
+}
+.tox .tox-statusbar__resize-handle:focus svg {
+  background-color: #4a5562;
+  border-radius: 1px;
+  box-shadow: 0 0 0 2px #4a5562;
+}
+.tox:not([dir=rtl]) .tox-statusbar__path > * {
+  margin-right: 4px;
+}
+.tox:not([dir=rtl]) .tox-statusbar__branding {
+  margin-left: 1ch;
+}
+.tox[dir=rtl] .tox-statusbar {
+  flex-direction: row-reverse;
+}
+.tox[dir=rtl] .tox-statusbar__path > * {
+  margin-left: 4px;
+}
+.tox .tox-throbber {
+  z-index: 1299;
+}
+.tox .tox-throbber__busy-spinner {
+  align-items: center;
+  background-color: rgba(34, 47, 62, 0.6);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.tox .tox-tbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  text-transform: none;
+  width: 34px;
+}
+.tox .tox-tbtn svg {
+  display: block;
+  fill: #fff;
+}
+.tox .tox-tbtn.tox-tbtn-more {
+  padding-left: 5px;
+  padding-right: 5px;
+  width: inherit;
+}
+.tox .tox-tbtn:focus {
+  background: #4a5562;
+  border: 0;
+  box-shadow: none;
+}
+.tox .tox-tbtn:hover {
+  background: #4a5562;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-tbtn:hover svg {
+  fill: #fff;
+}
+.tox .tox-tbtn:active {
+  background: #757d87;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-tbtn:active svg {
+  fill: #fff;
+}
+.tox .tox-tbtn--disabled,
+.tox .tox-tbtn--disabled:hover,
+.tox .tox-tbtn:disabled,
+.tox .tox-tbtn:disabled:hover {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-tbtn--disabled svg,
+.tox .tox-tbtn--disabled:hover svg,
+.tox .tox-tbtn:disabled svg,
+.tox .tox-tbtn:disabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-tbtn--enabled,
+.tox .tox-tbtn--enabled:hover {
+  background: #757d87;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-tbtn--enabled > *,
+.tox .tox-tbtn--enabled:hover > * {
+  transform: none;
+}
+.tox .tox-tbtn--enabled svg,
+.tox .tox-tbtn--enabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: #fff;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
+  color: #fff;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg {
+  fill: #fff;
+}
+.tox .tox-tbtn:active > * {
+  transform: none;
+}
+.tox .tox-tbtn--md {
+  height: 51px;
+  width: 51px;
+}
+.tox .tox-tbtn--lg {
+  flex-direction: column;
+  height: 68px;
+  width: 68px;
+}
+.tox .tox-tbtn--return {
+  -ms-grid-row-align: stretch;
+      align-self: stretch;
+  height: unset;
+  width: 16px;
+}
+.tox .tox-tbtn--labeled {
+  padding: 0 4px;
+  width: unset;
+}
+.tox .tox-tbtn__vlabel {
+  display: block;
+  font-size: 10px;
+  font-weight: normal;
+  letter-spacing: -0.025em;
+  margin-bottom: 4px;
+  white-space: nowrap;
+}
+.tox .tox-tbtn--select {
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+  width: auto;
+}
+.tox .tox-tbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-tbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+}
+.tox .tox-tbtn__select-chevron svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 7em;
+}
+.tox .tox-split-button {
+  border: 0;
+  border-radius: 3px;
+  box-sizing: border-box;
+  display: flex;
+  margin: 2px 0 3px 0;
+  overflow: hidden;
+}
+.tox .tox-split-button:hover {
+  box-shadow: 0 0 0 1px #4a5562 inset;
+}
+.tox .tox-split-button:focus {
+  background: #4a5562;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-split-button > * {
+  border-radius: 0;
+}
+.tox .tox-split-button__chevron {
+  width: 16px;
+}
+.tox .tox-split-button__chevron svg {
+  fill: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-split-button .tox-tbtn {
+  margin: 0;
+}
+.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child {
+  width: 30px;
+}
+.tox.tox-platform-touch .tox-split-button__chevron {
+  width: 20px;
+}
+.tox .tox-split-button.tox-tbtn--disabled:hover,
+.tox .tox-split-button.tox-tbtn--disabled:focus,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
+  background: transparent;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+}
+.tox .tox-toolbar-overlord {
+  background-color: #222f3e;
+}
+.tox .tox-toolbar,
+.tox .tox-toolbar__primary,
+.tox .tox-toolbar__overflow {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;
+  background-color: #222f3e;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 0;
+}
+.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
+  height: 0;
+  opacity: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+  visibility: hidden;
+}
+.tox .tox-toolbar__overflow--growing {
+  transition: height 0.3s ease, opacity 0.2s linear 0.1s;
+}
+.tox .tox-toolbar__overflow--shrinking {
+  transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s;
+}
+.tox .tox-menubar + .tox-toolbar,
+.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
+  border-top: 1px solid #000000;
+  margin-top: -1px;
+}
+.tox .tox-toolbar--scrolling {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.tox .tox-pop .tox-toolbar {
+  border-width: 0;
+}
+.tox .tox-toolbar--no-divider {
+  background-image: none;
+}
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child,
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary {
+  border-top: 1px solid #000000;
+}
+.tox.tox-tinymce-aux .tox-toolbar__overflow {
+  background-color: #222f3e;
+  border: 1px solid #000000;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+.tox[dir=rtl] .tox-tbtn__icon-rtl svg {
+  transform: rotateY(180deg);
+}
+.tox .tox-toolbar__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0;
+  padding: 0 4px 0 4px;
+}
+.tox .tox-toolbar__group--pull-right {
+  margin-left: auto;
+}
+.tox .tox-toolbar--scrolling .tox-toolbar__group {
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
+  border-right: 1px solid #000000;
+}
+.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) {
+  border-left: 1px solid #000000;
+}
+.tox .tox-tooltip {
+  display: inline-block;
+  padding: 8px;
+  position: relative;
+}
+.tox .tox-tooltip__body {
+  background-color: #3d546f;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(42, 55, 70, 0.3);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  padding: 4px 8px;
+  text-transform: none;
+}
+.tox .tox-tooltip__arrow {
+  position: absolute;
+}
+.tox .tox-tooltip--down .tox-tooltip__arrow {
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #3d546f;
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--up .tox-tooltip__arrow {
+  border-bottom: 8px solid #3d546f;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--right .tox-tooltip__arrow {
+  border-bottom: 8px solid transparent;
+  border-left: 8px solid #3d546f;
+  border-top: 8px solid transparent;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-tooltip--left .tox-tooltip__arrow {
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid #3d546f;
+  border-top: 8px solid transparent;
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-well {
+  border: 1px solid #000000;
+  border-radius: 3px;
+  padding: 8px;
+  width: 100%;
+}
+.tox .tox-well > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-well > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-well > *:only-child {
+  margin: 0;
+}
+.tox .tox-custom-editor {
+  border: 1px solid #000000;
+  border-radius: 3px;
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+/* stylelint-disable */
+.tox {
+  /* stylelint-enable */
+}
+.tox .tox-dialog-loading::before {
+  background-color: rgba(0, 0, 0, 0.5);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+.tox .tox-tab {
+  cursor: pointer;
+}
+.tox .tox-dialog__content-js {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-content .tox-collection {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-image-tools-edit-panel {
+  height: 60px;
+}
+.tox .tox-image-tools__sidebar {
+  height: 60px;
+}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/skin.min.css b/ui/public/tinymce/skins/ui/oxide-dark/skin.min.css
new file mode 100644
index 0000000..8d4e9ec
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/skin.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox{box-shadow:none;box-sizing:content-box;color:#2a3746;cursor:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:normal;-webkit-tap-highlight-color:transparent;text-decoration:none;text-shadow:none;text-transform:none;vertical-align:initial;white-space:normal}.tox :not(svg):not(rect){box-sizing:inherit;color:inherit;cursor:inherit;direction:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;-webkit-tap-highlight-color:inherit;text-align:inherit;text-decoration:inherit;text-shadow:inherit;text-transform:inherit;vertical-align:inherit;white-space:inherit}.tox :not(svg):not(rect){background:0 0;border:0;box-shadow:none;float:none;height:auto;margin:0;max-width:none;outline:0;padding:0;position:static;width:auto}.tox:not([dir=rtl]){direction:ltr;text-align:left}.tox[dir=rtl]{direction:rtl;text-align:right}.tox-tinymce{border:1px solid #000;border-radius:0;box-shadow:none;box-sizing:border-box;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;overflow:hidden;position:relative;visibility:inherit!important}.tox-tinymce-inline{border:none;box-shadow:none}.tox-tinymce-inline .tox-editor-header{background-color:transparent;border:1px solid #000;border-radius:0;box-shadow:none}.tox-tinymce-aux{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;z-index:1300}.tox-tinymce :focus,.tox-tinymce-aux :focus{outline:0}button::-moz-focus-inner{border:0}.tox .accessibility-issue__header{align-items:center;display:flex;margin-bottom:4px}.tox .accessibility-issue__description{align-items:stretch;border:1px solid #000;border-radius:3px;display:flex;justify-content:space-between}.tox .accessibility-issue__description>div{padding-bottom:4px}.tox .accessibility-issue__description>div>div{align-items:center;display:flex;margin-bottom:4px}.tox .accessibility-issue__description>:last-child:not(:only-child){border-color:#000;border-style:solid}.tox .accessibility-issue__repair{margin-top:16px}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description{background-color:rgba(32,122,183,.5);border-color:#207ab7;color:#fff}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description>:last-child{border-color:#207ab7}.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg{fill:#fff}.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description{background-color:rgba(255,165,0,.5);border-color:rgba(255,165,0,.8);color:#fff}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description>:last-child{border-color:rgba(255,165,0,.8)}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg{fill:#fff}.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description{background-color:rgba(204,0,0,.5);border-color:rgba(204,0,0,.8);color:#fff}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description>:last-child{border-color:rgba(204,0,0,.8)}.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg{fill:#fff}.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description{background-color:rgba(120,171,70,.5);border-color:rgba(120,171,70,.8);color:#fff}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description>:last-child{border-color:rgba(120,171,70,.8)}.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2{color:#fff}.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg{fill:#fff}.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon{color:#fff}.tox .tox-dialog__body-content .accessibility-issue__header h1,.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2{margin-top:0}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-left:4px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-left:auto}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description{padding:4px 4px 4px 8px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description>:last-child{border-left-width:1px;padding-left:4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-right:4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-right:auto}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description{padding:4px 8px 4px 4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description>:last-child{border-right-width:1px;padding-right:4px}.tox .tox-anchorbar{display:flex;flex:0 0 auto}.tox .tox-bar{display:flex;flex:0 0 auto}.tox .tox-button{background-color:#207ab7;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#207ab7;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:14px;font-style:normal;font-weight:700;letter-spacing:normal;line-height:24px;margin:0;outline:0;padding:4px 16px;text-align:center;text-decoration:none;text-transform:none;white-space:nowrap}.tox .tox-button[disabled]{background-color:#207ab7;background-image:none;border-color:#207ab7;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-button:focus:not(:disabled){background-color:#1c6ca1;background-image:none;border-color:#1c6ca1;box-shadow:none;color:#fff}.tox .tox-button:hover:not(:disabled){background-color:#1c6ca1;background-image:none;border-color:#1c6ca1;box-shadow:none;color:#fff}.tox .tox-button:active:not(:disabled){background-color:#185d8c;background-image:none;border-color:#185d8c;box-shadow:none;color:#fff}.tox .tox-button--secondary{background-color:#3d546f;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#3d546f;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;color:#fff;font-size:14px;font-style:normal;font-weight:700;letter-spacing:normal;outline:0;padding:4px 16px;text-decoration:none;text-transform:none}.tox .tox-button--secondary[disabled]{background-color:#3d546f;background-image:none;border-color:#3d546f;box-shadow:none;color:rgba(255,255,255,.5)}.tox .tox-button--secondary:focus:not(:disabled){background-color:#34485f;background-image:none;border-color:#34485f;box-shadow:none;color:#fff}.tox .tox-button--secondary:hover:not(:disabled){background-color:#34485f;background-image:none;border-color:#34485f;box-shadow:none;color:#fff}.tox .tox-button--secondary:active:not(:disabled){background-color:#2b3b4e;background-image:none;border-color:#2b3b4e;box-shadow:none;color:#fff}.tox .tox-button--icon,.tox .tox-button.tox-button--icon,.tox .tox-button.tox-button--secondary.tox-button--icon{padding:4px}.tox .tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg{display:block;fill:currentColor}.tox .tox-button-link{background:0;border:none;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;white-space:nowrap}.tox .tox-button-link--sm{font-size:14px}.tox .tox-button--naked{background-color:transparent;border-color:transparent;box-shadow:unset;color:#fff}.tox .tox-button--naked[disabled]{background-color:#3d546f;border-color:#3d546f;box-shadow:none;color:rgba(255,255,255,.5)}.tox .tox-button--naked:hover:not(:disabled){background-color:#34485f;border-color:#34485f;box-shadow:none;color:#fff}.tox .tox-button--naked:focus:not(:disabled){background-color:#34485f;border-color:#34485f;box-shadow:none;color:#fff}.tox .tox-button--naked:active:not(:disabled){background-color:#2b3b4e;border-color:#2b3b4e;box-shadow:none;color:#fff}.tox .tox-button--naked .tox-icon svg{fill:currentColor}.tox .tox-button--naked.tox-button--icon:hover:not(:disabled){color:#fff}.tox .tox-checkbox{align-items:center;border-radius:3px;cursor:pointer;display:flex;height:36px;min-width:36px}.tox .tox-checkbox__input{height:1px;overflow:hidden;position:absolute;top:auto;width:1px}.tox .tox-checkbox__icons{align-items:center;border-radius:3px;box-shadow:0 0 0 2px transparent;box-sizing:content-box;display:flex;height:24px;justify-content:center;padding:calc(4px - 1px);width:24px}.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:block;fill:rgba(255,255,255,.2)}.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:none;fill:#207ab7}.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg{display:none;fill:#207ab7}.tox .tox-checkbox--disabled{color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg{fill:rgba(255,255,255,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{fill:rgba(255,255,255,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{fill:rgba(255,255,255,.5)}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__checked svg{display:block}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:block}.tox input.tox-checkbox__input:focus+.tox-checkbox__icons{border-radius:3px;box-shadow:inset 0 0 0 1px #207ab7;padding:calc(4px - 1px)}.tox:not([dir=rtl]) .tox-checkbox__label{margin-left:4px}.tox:not([dir=rtl]) .tox-checkbox__input{left:-10000px}.tox:not([dir=rtl]) .tox-bar .tox-checkbox{margin-left:4px}.tox[dir=rtl] .tox-checkbox__label{margin-right:4px}.tox[dir=rtl] .tox-checkbox__input{right:-10000px}.tox[dir=rtl] .tox-bar .tox-checkbox{margin-right:4px}.tox .tox-collection--toolbar .tox-collection__group{display:flex;padding:0}.tox .tox-collection--grid .tox-collection__group{display:flex;flex-wrap:wrap;max-height:208px;overflow-x:hidden;overflow-y:auto;padding:0}.tox .tox-collection--list .tox-collection__group{border-bottom-width:0;border-color:#1a1a1a;border-left-width:0;border-right-width:0;border-style:solid;border-top-width:1px;padding:4px 0}.tox .tox-collection--list .tox-collection__group:first-child{border-top-width:0}.tox .tox-collection__group-heading{background-color:#333;color:#fff;cursor:default;font-size:12px;font-style:normal;font-weight:400;margin-bottom:4px;margin-top:-4px;padding:4px 8px;text-transform:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection__item{align-items:center;color:#fff;cursor:pointer;display:flex;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection--list .tox-collection__item{padding:4px 8px}.tox .tox-collection--toolbar .tox-collection__item{border-radius:3px;padding:4px}.tox .tox-collection--grid .tox-collection__item{border-radius:3px;padding:4px}.tox .tox-collection--list .tox-collection__item--enabled{background-color:#2b3b4e;color:#fff}.tox .tox-collection--list .tox-collection__item--active{background-color:#4a5562}.tox .tox-collection--toolbar .tox-collection__item--enabled{background-color:#757d87;color:#fff}.tox .tox-collection--toolbar .tox-collection__item--active{background-color:#4a5562}.tox .tox-collection--grid .tox-collection__item--enabled{background-color:#757d87;color:#fff}.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled){background-color:#4a5562;color:#fff}.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:#fff}.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:#fff}.tox .tox-collection__item--state-disabled{background-color:transparent;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-collection__item-checkmark,.tox .tox-collection__item-icon{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.tox .tox-collection__item-checkmark svg,.tox .tox-collection__item-icon svg{fill:currentColor}.tox .tox-collection--toolbar-lg .tox-collection__item-icon{height:48px;width:48px}.tox .tox-collection__item-label{color:currentColor;display:inline-block;flex:1;-ms-flex-preferred-size:auto;font-size:14px;font-style:normal;font-weight:400;line-height:24px;text-transform:none;word-break:break-all}.tox .tox-collection__item-accessory{color:rgba(255,255,255,.5);display:inline-block;font-size:14px;height:24px;line-height:24px;text-transform:none}.tox .tox-collection__item-caret{align-items:center;display:flex;min-height:24px}.tox .tox-collection__item-caret::after{content:'';font-size:0;min-height:inherit}.tox .tox-collection__item-caret svg{fill:#fff}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg{display:none}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory+.tox-collection__item-checkmark{display:none}.tox .tox-collection--horizontal{background-color:#2b3b4e;border:1px solid #1a1a1a;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:nowrap;margin-bottom:0;overflow-x:auto;padding:0}.tox .tox-collection--horizontal .tox-collection__group{align-items:center;display:flex;flex-wrap:nowrap;margin:0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item{height:34px;margin:2px 0 3px 0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item-label{white-space:nowrap}.tox .tox-collection--horizontal .tox-collection__item-caret{margin-left:4px}.tox .tox-collection__item-container{display:flex}.tox .tox-collection__item-container--row{align-items:center;flex:1 1 auto;flex-direction:row}.tox .tox-collection__item-container--row.tox-collection__item-container--align-left{margin-right:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--align-right{justify-content:flex-end;margin-left:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top{align-items:flex-start;margin-bottom:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle{align-items:center}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom{align-items:flex-end;margin-top:auto}.tox .tox-collection__item-container--column{-ms-grid-row-align:center;align-self:center;flex:1 1 auto;flex-direction:column}.tox .tox-collection__item-container--column.tox-collection__item-container--align-left{align-items:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--align-right{align-items:flex-end}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top{align-self:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle{-ms-grid-row-align:center;align-self:center}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom{align-self:flex-end}.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-right:1px solid #000}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>:not(:first-child){margin-left:8px}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-left:4px}.tox:not([dir=rtl]) .tox-collection__item-accessory{margin-left:16px;text-align:right}.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret{margin-left:16px}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-left:1px solid #000}.tox[dir=rtl] .tox-collection--list .tox-collection__item>:not(:first-child){margin-right:8px}.tox[dir=rtl] .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-right:4px}.tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg{transform:rotateY(180deg)}.tox[dir=rtl] .tox-collection__item-accessory{margin-right:16px;text-align:left}.tox[dir=rtl] .tox-collection .tox-collection__item-caret{margin-right:16px;transform:rotateY(180deg)}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret{margin-right:4px}.tox .tox-color-picker-container{display:flex;flex-direction:row;height:225px;margin:0}.tox .tox-sv-palette{box-sizing:border-box;display:flex;height:100%}.tox .tox-sv-palette-spectrum{height:100%}.tox .tox-sv-palette,.tox .tox-sv-palette-spectrum{width:225px}.tox .tox-sv-palette-thumb{background:0 0;border:1px solid #000;border-radius:50%;box-sizing:content-box;height:12px;position:absolute;width:12px}.tox .tox-sv-palette-inner-thumb{border:1px solid #fff;border-radius:50%;height:10px;position:absolute;width:10px}.tox .tox-hue-slider{box-sizing:border-box;height:100%;width:25px}.tox .tox-hue-slider-spectrum{background:linear-gradient(to bottom,red,#ff0080,#f0f,#8000ff,#00f,#0080ff,#0ff,#00ff80,#0f0,#80ff00,#ff0,#ff8000,red);height:100%;width:100%}.tox .tox-hue-slider,.tox .tox-hue-slider-spectrum{width:20px}.tox .tox-hue-slider-thumb{background:#fff;border:1px solid #000;box-sizing:content-box;height:4px;width:100%}.tox .tox-rgb-form{display:flex;flex-direction:column;justify-content:space-between}.tox .tox-rgb-form div{align-items:center;display:flex;justify-content:space-between;margin-bottom:5px;width:inherit}.tox .tox-rgb-form input{width:6em}.tox .tox-rgb-form input.tox-invalid{border:1px solid red!important}.tox .tox-rgb-form .tox-rgba-preview{border:1px solid #000;flex-grow:2;margin-bottom:0}.tox:not([dir=rtl]) .tox-sv-palette{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider-thumb{margin-left:-1px}.tox:not([dir=rtl]) .tox-rgb-form label{margin-right:.5em}.tox[dir=rtl] .tox-sv-palette{margin-left:15px}.tox[dir=rtl] .tox-hue-slider{margin-left:15px}.tox[dir=rtl] .tox-hue-slider-thumb{margin-right:-1px}.tox[dir=rtl] .tox-rgb-form label{margin-left:.5em}.tox .tox-toolbar .tox-swatches,.tox .tox-toolbar__overflow .tox-swatches,.tox .tox-toolbar__primary .tox-swatches{margin:2px 0 3px 4px}.tox .tox-collection--list .tox-collection__group .tox-swatches-menu{border:0;margin:-4px 0}.tox .tox-swatches__row{display:flex}.tox .tox-swatch{height:30px;transition:transform .15s,box-shadow .15s;width:30px}.tox .tox-swatch:focus,.tox .tox-swatch:hover{box-shadow:0 0 0 1px rgba(127,127,127,.3) inset;transform:scale(.8)}.tox .tox-swatch--remove{align-items:center;display:flex;justify-content:center}.tox .tox-swatch--remove svg path{stroke:#e74c3c}.tox .tox-swatches__picker-btn{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;height:30px;justify-content:center;outline:0;padding:0;width:30px}.tox .tox-swatches__picker-btn svg{height:24px;width:24px}.tox .tox-swatches__picker-btn:hover{background:#4a5562}.tox:not([dir=rtl]) .tox-swatches__picker-btn{margin-left:auto}.tox[dir=rtl] .tox-swatches__picker-btn{margin-right:auto}.tox .tox-comment-thread{background:#2b3b4e;position:relative}.tox .tox-comment-thread>:not(:first-child){margin-top:8px}.tox .tox-comment{background:#2b3b4e;border:1px solid #000;border-radius:3px;box-shadow:0 4px 8px 0 rgba(42,55,70,.1);padding:8px 8px 16px 8px;position:relative}.tox .tox-comment__header{align-items:center;color:#fff;display:flex;justify-content:space-between}.tox .tox-comment__date{color:rgba(255,255,255,.5);font-size:12px}.tox .tox-comment__body{color:#fff;font-size:14px;font-style:normal;font-weight:400;line-height:1.3;margin-top:8px;position:relative;text-transform:initial}.tox .tox-comment__body textarea{resize:none;white-space:normal;width:100%}.tox .tox-comment__expander{padding-top:8px}.tox .tox-comment__expander p{color:rgba(255,255,255,.5);font-size:14px;font-style:normal}.tox .tox-comment__body p{margin:0}.tox .tox-comment__buttonspacing{padding-top:16px;text-align:center}.tox .tox-comment-thread__overlay::after{background:#2b3b4e;bottom:0;content:"";display:flex;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:5}.tox .tox-comment__reply{display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}.tox .tox-comment__reply>:first-child{margin-bottom:8px;width:100%}.tox .tox-comment__edit{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}.tox .tox-comment__gradient::after{background:linear-gradient(rgba(43,59,78,0),#2b3b4e);bottom:0;content:"";display:block;height:5em;margin-top:-40px;position:absolute;width:100%}.tox .tox-comment__overlay{background:#2b3b4e;bottom:0;display:flex;flex-direction:column;flex-grow:1;left:0;opacity:.9;position:absolute;right:0;text-align:center;top:0;z-index:5}.tox .tox-comment__loading-text{align-items:center;color:#fff;display:flex;flex-direction:column;position:relative}.tox .tox-comment__loading-text>div{padding-bottom:16px}.tox .tox-comment__overlaytext{bottom:0;flex-direction:column;font-size:14px;left:0;padding:1em;position:absolute;right:0;top:0;z-index:10}.tox .tox-comment__overlaytext p{background-color:#2b3b4e;box-shadow:0 0 8px 8px #2b3b4e;color:#fff;text-align:center}.tox .tox-comment__overlaytext div:nth-of-type(2){font-size:.8em}.tox .tox-comment__busy-spinner{align-items:center;background-color:#2b3b4e;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:20}.tox .tox-comment__scroll{display:flex;flex-direction:column;flex-shrink:1;overflow:auto}.tox .tox-conversations{margin:8px}.tox:not([dir=rtl]) .tox-comment__edit{margin-left:8px}.tox:not([dir=rtl]) .tox-comment__buttonspacing>:last-child,.tox:not([dir=rtl]) .tox-comment__edit>:last-child,.tox:not([dir=rtl]) .tox-comment__reply>:last-child{margin-left:8px}.tox[dir=rtl] .tox-comment__edit{margin-right:8px}.tox[dir=rtl] .tox-comment__buttonspacing>:last-child,.tox[dir=rtl] .tox-comment__edit>:last-child,.tox[dir=rtl] .tox-comment__reply>:last-child{margin-right:8px}.tox .tox-user{align-items:center;display:flex}.tox .tox-user__avatar svg{fill:rgba(255,255,255,.5)}.tox .tox-user__name{color:rgba(255,255,255,.5);font-size:12px;font-style:normal;font-weight:700;text-transform:uppercase}.tox:not([dir=rtl]) .tox-user__avatar svg{margin-right:8px}.tox:not([dir=rtl]) .tox-user__avatar+.tox-user__name{margin-left:8px}.tox[dir=rtl] .tox-user__avatar svg{margin-left:8px}.tox[dir=rtl] .tox-user__avatar+.tox-user__name{margin-right:8px}.tox .tox-dialog-wrap{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1100}.tox .tox-dialog-wrap__backdrop{background-color:rgba(34,47,62,.75);bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.tox .tox-dialog-wrap__backdrop--opaque{background-color:#222f3e}.tox .tox-dialog{background-color:#2b3b4e;border-color:#000;border-radius:3px;border-style:solid;border-width:1px;box-shadow:0 16px 16px -10px rgba(42,55,70,.15),0 0 40px 1px rgba(42,55,70,.15);display:flex;flex-direction:column;max-height:100%;max-width:480px;overflow:hidden;position:relative;width:95vw;z-index:2}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog{align-self:flex-start;margin:8px auto;width:calc(100vw - 16px)}}.tox .tox-dialog-inline{z-index:1100}.tox .tox-dialog__header{align-items:center;background-color:#2b3b4e;border-bottom:none;color:#fff;display:flex;font-size:16px;justify-content:space-between;padding:8px 16px 0 16px;position:relative}.tox .tox-dialog__header .tox-button{z-index:1}.tox .tox-dialog__draghandle{cursor:grab;height:100%;left:0;position:absolute;top:0;width:100%}.tox .tox-dialog__draghandle:active{cursor:grabbing}.tox .tox-dialog__dismiss{margin-left:auto}.tox .tox-dialog__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:1.3;margin:0;text-transform:none}.tox .tox-dialog__body{color:#fff;display:flex;flex:1;-ms-flex-preferred-size:auto;font-size:16px;font-style:normal;font-weight:400;line-height:1.3;min-width:0;text-align:left;text-transform:none}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body{flex-direction:column}}.tox .tox-dialog__body-nav{align-items:flex-start;display:flex;flex-direction:column;padding:16px 16px}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body-nav{flex-direction:row;-webkit-overflow-scrolling:touch;overflow-x:auto;padding-bottom:0}}.tox .tox-dialog__body-nav-item{border-bottom:2px solid transparent;color:rgba(255,255,255,.5);display:inline-block;font-size:14px;line-height:1.3;margin-bottom:8px;text-decoration:none;white-space:nowrap}.tox .tox-dialog__body-nav-item:focus{background-color:rgba(32,122,183,.1)}.tox .tox-dialog__body-nav-item--active{border-bottom:2px solid #207ab7;color:#207ab7}.tox .tox-dialog__body-content{box-sizing:border-box;display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto;max-height:650px;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px 16px}.tox .tox-dialog__body-content>*{margin-bottom:0;margin-top:16px}.tox .tox-dialog__body-content>:first-child{margin-top:0}.tox .tox-dialog__body-content>:last-child{margin-bottom:0}.tox .tox-dialog__body-content>:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog__body-content a{color:#207ab7;cursor:pointer;text-decoration:none}.tox .tox-dialog__body-content a:focus,.tox .tox-dialog__body-content a:hover{color:#185d8c;text-decoration:none}.tox .tox-dialog__body-content a:active{color:#185d8c;text-decoration:none}.tox .tox-dialog__body-content svg{fill:#fff}.tox .tox-dialog__body-content ul{display:block;list-style-type:disc;margin-bottom:16px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.tox .tox-dialog__body-content .tox-form__group h1{color:#fff;font-size:20px;font-style:normal;font-weight:700;letter-spacing:normal;margin-bottom:16px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group h2{color:#fff;font-size:16px;font-style:normal;font-weight:700;letter-spacing:normal;margin-bottom:16px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group p{margin-bottom:16px}.tox .tox-dialog__body-content .tox-form__group h1:first-child,.tox .tox-dialog__body-content .tox-form__group h2:first-child,.tox .tox-dialog__body-content .tox-form__group p:first-child{margin-top:0}.tox .tox-dialog__body-content .tox-form__group h1:last-child,.tox .tox-dialog__body-content .tox-form__group h2:last-child,.tox .tox-dialog__body-content .tox-form__group p:last-child{margin-bottom:0}.tox .tox-dialog__body-content .tox-form__group h1:only-child,.tox .tox-dialog__body-content .tox-form__group h2:only-child,.tox .tox-dialog__body-content .tox-form__group p:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog--width-lg{height:650px;max-width:1200px}.tox .tox-dialog--width-md{max-width:800px}.tox .tox-dialog--width-md .tox-dialog__body-content{overflow:auto}.tox .tox-dialog__body-content--centered{text-align:center}.tox .tox-dialog__footer{align-items:center;background-color:#2b3b4e;border-top:1px solid #000;display:flex;justify-content:space-between;padding:8px 16px}.tox .tox-dialog__footer-end,.tox .tox-dialog__footer-start{display:flex}.tox .tox-dialog__busy-spinner{align-items:center;background-color:rgba(34,47,62,.75);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:3}.tox .tox-dialog__table{border-collapse:collapse;width:100%}.tox .tox-dialog__table thead th{font-weight:700;padding-bottom:8px}.tox .tox-dialog__table tbody tr{border-bottom:1px solid #000}.tox .tox-dialog__table tbody tr:last-child{border-bottom:none}.tox .tox-dialog__table td{padding-bottom:8px;padding-top:8px}.tox .tox-dialog__popups{position:absolute;width:100%;z-index:1100}.tox .tox-dialog__body-iframe{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox .tox-dialog-dock-fadeout{opacity:0;visibility:hidden}.tox .tox-dialog-dock-fadein{opacity:1;visibility:visible}.tox .tox-dialog-dock-transition{transition:visibility 0s linear .3s,opacity .3s ease}.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein{transition-delay:0s}.tox.tox-platform-ie .tox-dialog-wrap{position:-ms-device-fixed}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav{margin-right:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child){margin-left:8px}}.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end>*,.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start>*{margin-left:8px}.tox[dir=rtl] .tox-dialog__body{text-align:right}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav{margin-left:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child){margin-right:8px}}.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end>*,.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start>*{margin-right:8px}body.tox-dialog__disable-scroll{overflow:hidden}.tox .tox-dropzone-container{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dropzone{align-items:center;background:#fff;border:2px dashed #000;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;justify-content:center;min-height:100px;padding:10px}.tox .tox-dropzone p{color:rgba(255,255,255,.5);margin:0 0 16px 0}.tox .tox-edit-area{display:flex;flex:1;-ms-flex-preferred-size:auto;overflow:hidden;position:relative}.tox .tox-edit-area__iframe{background-color:#fff;border:0;box-sizing:border-box;flex:1;-ms-flex-preferred-size:auto;height:100%;position:absolute;width:100%}.tox.tox-inline-edit-area{border:1px dotted #000}.tox .tox-editor-container{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.tox .tox-editor-header{z-index:1}.tox:not(.tox-tinymce-inline) .tox-editor-header{box-shadow:none;transition:box-shadow .5s}.tox.tox-tinymce--toolbar-bottom .tox-editor-header,.tox.tox-tinymce-inline .tox-editor-header{margin-bottom:-1px}.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header{background-color:transparent;box-shadow:0 4px 4px -3px rgba(0,0,0,.25)}.tox-editor-dock-fadeout{opacity:0;visibility:hidden}.tox-editor-dock-fadein{opacity:1;visibility:visible}.tox-editor-dock-transition{transition:visibility 0s linear .25s,opacity .25s ease}.tox-editor-dock-transition.tox-editor-dock-fadein{transition-delay:0s}.tox .tox-control-wrap{flex:1;position:relative}.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid{display:none}.tox .tox-control-wrap svg{display:block}.tox .tox-control-wrap__status-icon-wrap{position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-control-wrap__status-icon-invalid svg{fill:#c00}.tox .tox-control-wrap__status-icon-unknown svg{fill:orange}.tox .tox-control-wrap__status-icon-valid svg{fill:green}.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield{padding-right:32px}.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap{right:4px}.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield{padding-left:32px}.tox[dir=rtl] .tox-control-wrap__status-icon-wrap{left:4px}.tox .tox-autocompleter{max-width:25em}.tox .tox-autocompleter .tox-menu{max-width:25em}.tox .tox-autocompleter .tox-autocompleter-highlight{font-weight:700}.tox .tox-color-input{display:flex;position:relative;z-index:1}.tox .tox-color-input .tox-textfield{z-index:-1}.tox .tox-color-input span{border-color:rgba(42,55,70,.2);border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;height:24px;position:absolute;top:6px;width:24px}.tox .tox-color-input span:focus:not([aria-disabled=true]),.tox .tox-color-input span:hover:not([aria-disabled=true]){border-color:#207ab7;cursor:pointer}.tox .tox-color-input span::before{background-image:linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.25) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.25) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.25) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;border:1px solid #2b3b4e;border-radius:3px;box-sizing:border-box;content:'';height:24px;left:-1px;position:absolute;top:-1px;width:24px;z-index:-1}.tox .tox-color-input span[aria-disabled=true]{cursor:not-allowed}.tox:not([dir=rtl]) .tox-color-input .tox-textfield{padding-left:36px}.tox:not([dir=rtl]) .tox-color-input span{left:6px}.tox[dir=rtl] .tox-color-input .tox-textfield{padding-right:36px}.tox[dir=rtl] .tox-color-input span{right:6px}.tox .tox-label,.tox .tox-toolbar-label{color:rgba(255,255,255,.5);display:block;font-size:14px;font-style:normal;font-weight:400;line-height:1.3;padding:0 8px 0 0;text-transform:none;white-space:nowrap}.tox .tox-toolbar-label{padding:0 8px}.tox[dir=rtl] .tox-label{padding:0 0 0 8px}.tox .tox-form{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group{box-sizing:border-box;margin-bottom:4px}.tox .tox-form-group--maximize{flex:1}.tox .tox-form__group--error{color:#c00}.tox .tox-form__group--collection{display:flex}.tox .tox-form__grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.tox .tox-form__grid--2col>.tox-form__group{width:calc(50% - (8px / 2))}.tox .tox-form__grid--3col>.tox-form__group{width:calc(100% / 3 - (8px / 2))}.tox .tox-form__grid--4col>.tox-form__group{width:calc(25% - (8px / 2))}.tox .tox-form__controls-h-stack{align-items:center;display:flex}.tox .tox-form__group--inline{align-items:center;display:flex}.tox .tox-form__group--stretched{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-textarea{flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox:not([dir=rtl]) .tox-form__controls-h-stack>:not(:first-child){margin-left:4px}.tox[dir=rtl] .tox-form__controls-h-stack>:not(:first-child){margin-right:4px}.tox .tox-lock.tox-locked .tox-lock-icon__unlock,.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock{display:none}.tox .tox-listboxfield .tox-listbox--select,.tox .tox-textarea,.tox .tox-textfield,.tox .tox-toolbar-textfield{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#2b3b4e;border-color:#000;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 4.75px;resize:none;width:100%}.tox .tox-textarea[disabled],.tox .tox-textfield[disabled]{background-color:#222f3e;color:rgba(255,255,255,.85);cursor:not-allowed}.tox .tox-listboxfield .tox-listbox--select:focus,.tox .tox-textarea:focus,.tox .tox-textfield:focus{background-color:#2b3b4e;border-color:#207ab7;box-shadow:none;outline:0}.tox .tox-toolbar-textfield{border-width:0;margin-bottom:3px;margin-top:2px;max-width:250px}.tox .tox-naked-btn{background-color:transparent;border:0;border-color:transparent;box-shadow:unset;color:#207ab7;cursor:pointer;display:block;margin:0;padding:0}.tox .tox-naked-btn svg{display:block;fill:#fff}.tox:not([dir=rtl]) .tox-toolbar-textfield+*{margin-left:4px}.tox[dir=rtl] .tox-toolbar-textfield+*{margin-right:4px}.tox .tox-listboxfield{cursor:pointer;position:relative}.tox .tox-listboxfield .tox-listbox--select[disabled]{background-color:#19232e;color:rgba(255,255,255,.85);cursor:not-allowed}.tox .tox-listbox__select-label{cursor:default;flex:1;margin:0 4px}.tox .tox-listbox__select-chevron{align-items:center;display:flex;justify-content:center;width:16px}.tox .tox-listbox__select-chevron svg{fill:#fff}.tox .tox-listboxfield .tox-listbox--select{align-items:center;display:flex}.tox:not([dir=rtl]) .tox-listboxfield svg{right:8px}.tox[dir=rtl] .tox-listboxfield svg{left:8px}.tox .tox-selectfield{cursor:pointer;position:relative}.tox .tox-selectfield select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#2b3b4e;border-color:#000;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 4.75px;resize:none;width:100%}.tox .tox-selectfield select[disabled]{background-color:#19232e;color:rgba(255,255,255,.85);cursor:not-allowed}.tox .tox-selectfield select::-ms-expand{display:none}.tox .tox-selectfield select:focus{background-color:#2b3b4e;border-color:#207ab7;box-shadow:none;outline:0}.tox .tox-selectfield svg{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.tox:not([dir=rtl]) .tox-selectfield select[size="0"],.tox:not([dir=rtl]) .tox-selectfield select[size="1"]{padding-right:24px}.tox:not([dir=rtl]) .tox-selectfield svg{right:8px}.tox[dir=rtl] .tox-selectfield select[size="0"],.tox[dir=rtl] .tox-selectfield select[size="1"]{padding-left:24px}.tox[dir=rtl] .tox-selectfield svg{left:8px}.tox .tox-textarea{-webkit-appearance:textarea;-moz-appearance:textarea;appearance:textarea;white-space:pre-wrap}.tox-fullscreen{border:0;height:100%;left:0;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;position:fixed;top:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox.tox-tinymce.tox-fullscreen{background-color:transparent;z-index:1200}.tox-shadowhost.tox-fullscreen{z-index:1200}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}.tox .tox-help__more-link{list-style:none;margin-top:1em}.tox .tox-image-tools{width:100%}.tox .tox-image-tools__toolbar{align-items:center;display:flex;justify-content:center}.tox .tox-image-tools__image{background-color:#666;height:380px;overflow:auto;position:relative;width:100%}.tox .tox-image-tools__image,.tox .tox-image-tools__image+.tox-image-tools__toolbar{margin-top:8px}.tox .tox-image-tools__image-bg{background:url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==)}.tox .tox-image-tools__toolbar>.tox-spacer{flex:1;-ms-flex-preferred-size:auto}.tox .tox-croprect-block{background:#000;opacity:.5;position:absolute;zoom:1}.tox .tox-croprect-handle{border:2px solid #fff;height:20px;left:0;position:absolute;top:0;width:20px}.tox .tox-croprect-handle-move{border:0;cursor:move;position:absolute}.tox .tox-croprect-handle-nw{border-width:2px 0 0 2px;cursor:nw-resize;left:100px;margin:-2px 0 0 -2px;top:100px}.tox .tox-croprect-handle-ne{border-width:2px 2px 0 0;cursor:ne-resize;left:200px;margin:-2px 0 0 -20px;top:100px}.tox .tox-croprect-handle-sw{border-width:0 0 2px 2px;cursor:sw-resize;left:100px;margin:-20px 2px 0 -2px;top:200px}.tox .tox-croprect-handle-se{border-width:0 2px 2px 0;cursor:se-resize;left:200px;margin:-20px 0 0 -20px;top:200px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-left:8px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-left:32px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-left:32px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-right:8px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-right:32px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-right:32px}.tox .tox-insert-table-picker{display:flex;flex-wrap:wrap;width:170px}.tox .tox-insert-table-picker>div{border-color:#000;border-style:solid;border-width:0 1px 1px 0;box-sizing:border-box;height:17px;width:17px}.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker{margin:-4px 0}.tox .tox-insert-table-picker .tox-insert-table-picker__selected{background-color:rgba(32,122,183,.5);border-color:rgba(32,122,183,.5)}.tox .tox-insert-table-picker__label{color:#fff;display:block;font-size:14px;padding:4px;text-align:center;width:100%}.tox:not([dir=rtl]) .tox-insert-table-picker>div:nth-child(10n){border-right:0}.tox[dir=rtl] .tox-insert-table-picker>div:nth-child(10n+1){border-right:0}.tox .tox-menu{background-color:#2b3b4e;border:1px solid #000;border-radius:3px;box-shadow:0 4px 8px 0 rgba(42,55,70,.1);display:inline-block;overflow:hidden;vertical-align:top;z-index:1150}.tox .tox-menu.tox-collection.tox-collection--list{padding:0}.tox .tox-menu.tox-collection.tox-collection--toolbar{padding:4px}.tox .tox-menu.tox-collection.tox-collection--grid{padding:4px}.tox .tox-menu__label blockquote,.tox .tox-menu__label code,.tox .tox-menu__label h1,.tox .tox-menu__label h2,.tox .tox-menu__label h3,.tox .tox-menu__label h4,.tox .tox-menu__label h5,.tox .tox-menu__label h6,.tox .tox-menu__label p{margin:0}.tox .tox-menubar{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;background-color:#222f3e;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 4px 0 4px}.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar{border-top:1px solid #000}.tox .tox-mbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#fff;display:flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0 4px;text-transform:none;width:auto}.tox .tox-mbtn[disabled]{background-color:transparent;border:0;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-mbtn:focus:not(:disabled){background:#4a5562;border:0;box-shadow:none;color:#fff}.tox .tox-mbtn--active{background:#757d87;border:0;box-shadow:none;color:#fff}.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active){background:#4a5562;border:0;box-shadow:none;color:#fff}.tox .tox-mbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-mbtn[disabled] .tox-mbtn__select-label{cursor:not-allowed}.tox .tox-mbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px;display:none}.tox .tox-notification{border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;display:-ms-grid;display:grid;font-size:14px;font-weight:400;-ms-grid-columns:minmax(40px,1fr) auto minmax(40px,1fr);grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);margin-top:4px;opacity:0;padding:4px;transition:transform .1s ease-in,opacity 150ms ease-in}.tox .tox-notification p{font-size:14px;font-weight:400}.tox .tox-notification a{text-decoration:underline}.tox .tox-notification--in{opacity:1}.tox .tox-notification--success{background-color:#e4eeda;border-color:#d7e6c8;color:#fff}.tox .tox-notification--success p{color:#fff}.tox .tox-notification--success a{color:#547831}.tox .tox-notification--success svg{fill:#fff}.tox .tox-notification--error{background-color:#f8dede;border-color:#f2bfbf;color:#fff}.tox .tox-notification--error p{color:#fff}.tox .tox-notification--error a{color:#c00}.tox .tox-notification--error svg{fill:#fff}.tox .tox-notification--warn,.tox .tox-notification--warning{background-color:#fffaea;border-color:#ffe89d;color:#fff}.tox .tox-notification--warn p,.tox .tox-notification--warning p{color:#fff}.tox .tox-notification--warn a,.tox .tox-notification--warning a{color:#fff}.tox .tox-notification--warn svg,.tox .tox-notification--warning svg{fill:#fff}.tox .tox-notification--info{background-color:#d9edf7;border-color:#779ecb;color:#fff}.tox .tox-notification--info p{color:#fff}.tox .tox-notification--info a{color:#fff}.tox .tox-notification--info svg{fill:#fff}.tox .tox-notification__body{-ms-grid-row-align:center;align-self:center;color:#fff;font-size:14px;-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;text-align:center;white-space:normal;word-break:break-all;word-break:break-word}.tox .tox-notification__body>*{margin:0}.tox .tox-notification__body>*+*{margin-top:1rem}.tox .tox-notification__icon{-ms-grid-row-align:center;align-self:center;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification__icon svg{display:block}.tox .tox-notification__dismiss{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification .tox-progress-bar{-ms-grid-column-span:3;grid-column-end:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2;-ms-grid-column-align:center;justify-self:center}.tox .tox-pop{display:inline-block;position:relative}.tox .tox-pop--resizing{transition:width .1s ease}.tox .tox-pop--resizing .tox-toolbar{flex-wrap:nowrap}.tox .tox-pop__dialog{background-color:#222f3e;border:1px solid #000;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);min-width:0;overflow:hidden}.tox .tox-pop__dialog>:not(.tox-toolbar){margin:4px 4px 4px 8px}.tox .tox-pop__dialog .tox-toolbar{background-color:transparent;margin-bottom:-1px}.tox .tox-pop::after,.tox .tox-pop::before{border-style:solid;content:'';display:block;height:0;position:absolute;width:0}.tox .tox-pop.tox-pop--bottom::after,.tox .tox-pop.tox-pop--bottom::before{left:50%;top:100%}.tox .tox-pop.tox-pop--bottom::after{border-color:#222f3e transparent transparent transparent;border-width:8px;margin-left:-8px;margin-top:-1px}.tox .tox-pop.tox-pop--bottom::before{border-color:#000 transparent transparent transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--top::after,.tox .tox-pop.tox-pop--top::before{left:50%;top:0;transform:translateY(-100%)}.tox .tox-pop.tox-pop--top::after{border-color:transparent transparent #222f3e transparent;border-width:8px;margin-left:-8px;margin-top:1px}.tox .tox-pop.tox-pop--top::before{border-color:transparent transparent #000 transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--left::after,.tox .tox-pop.tox-pop--left::before{left:0;top:calc(50% - 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--left::after{border-color:transparent #222f3e transparent transparent;border-width:8px;margin-left:-15px}.tox .tox-pop.tox-pop--left::before{border-color:transparent #000 transparent transparent;border-width:10px;margin-left:-19px}.tox .tox-pop.tox-pop--right::after,.tox .tox-pop.tox-pop--right::before{left:100%;top:calc(50% + 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--right::after{border-color:transparent transparent transparent #222f3e;border-width:8px;margin-left:-1px}.tox .tox-pop.tox-pop--right::before{border-color:transparent transparent transparent #000;border-width:10px;margin-left:-1px}.tox .tox-pop.tox-pop--align-left::after,.tox .tox-pop.tox-pop--align-left::before{left:20px}.tox .tox-pop.tox-pop--align-right::after,.tox .tox-pop.tox-pop--align-right::before{left:calc(100% - 20px)}.tox .tox-sidebar-wrap{display:flex;flex-direction:row;flex-grow:1;-ms-flex-preferred-size:0;min-height:0}.tox .tox-sidebar{background-color:#222f3e;display:flex;flex-direction:row;justify-content:flex-end}.tox .tox-sidebar__slider{display:flex;overflow:hidden}.tox .tox-sidebar__pane-container{display:flex}.tox .tox-sidebar__pane{display:flex}.tox .tox-sidebar--sliding-closed{opacity:0}.tox .tox-sidebar--sliding-open{opacity:1}.tox .tox-sidebar--sliding-growing,.tox .tox-sidebar--sliding-shrinking{transition:width .5s ease,opacity .5s ease}.tox .tox-selector{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;display:inline-block;height:10px;position:absolute;width:10px}.tox.tox-platform-touch .tox-selector{height:12px;width:12px}.tox .tox-slider{align-items:center;display:flex;flex:1;-ms-flex-preferred-size:auto;height:24px;justify-content:center;position:relative}.tox .tox-slider__rail{background-color:transparent;border:1px solid #000;border-radius:3px;height:10px;min-width:120px;width:100%}.tox .tox-slider__handle{background-color:#207ab7;border:2px solid #185d8c;border-radius:3px;box-shadow:none;height:24px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:14px}.tox .tox-source-code{overflow:auto}.tox .tox-spinner{display:flex}.tox .tox-spinner>div{animation:tam-bouncing-dots 1.5s ease-in-out 0s infinite both;background-color:rgba(255,255,255,.5);border-radius:100%;height:8px;width:8px}.tox .tox-spinner>div:nth-child(1){animation-delay:-.32s}.tox .tox-spinner>div:nth-child(2){animation-delay:-.16s}@keyframes tam-bouncing-dots{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.tox:not([dir=rtl]) .tox-spinner>div:not(:first-child){margin-left:4px}.tox[dir=rtl] .tox-spinner>div:not(:first-child){margin-right:4px}.tox .tox-statusbar{align-items:center;background-color:#222f3e;border-top:1px solid #000;color:#fff;display:flex;flex:0 0 auto;font-size:12px;font-weight:400;height:18px;overflow:hidden;padding:0 8px;position:relative;text-transform:uppercase}.tox .tox-statusbar__text-container{display:flex;flex:1 1 auto;justify-content:flex-end;overflow:hidden}.tox .tox-statusbar__path{display:flex;flex:1 1 auto;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tox .tox-statusbar__path>*{display:inline;white-space:nowrap}.tox .tox-statusbar__wordcount{flex:0 0 auto;margin-left:1ch}.tox .tox-statusbar a,.tox .tox-statusbar__path-item,.tox .tox-statusbar__wordcount{color:#fff;text-decoration:none}.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]){cursor:pointer;text-decoration:underline}.tox .tox-statusbar__resize-handle{align-items:flex-end;align-self:stretch;cursor:nwse-resize;display:flex;flex:0 0 auto;justify-content:flex-end;margin-left:auto;margin-right:-8px;padding-left:1ch}.tox .tox-statusbar__resize-handle svg{display:block;fill:#fff}.tox .tox-statusbar__resize-handle:focus svg{background-color:#4a5562;border-radius:1px;box-shadow:0 0 0 2px #4a5562}.tox:not([dir=rtl]) .tox-statusbar__path>*{margin-right:4px}.tox:not([dir=rtl]) .tox-statusbar__branding{margin-left:1ch}.tox[dir=rtl] .tox-statusbar{flex-direction:row-reverse}.tox[dir=rtl] .tox-statusbar__path>*{margin-left:4px}.tox .tox-throbber{z-index:1299}.tox .tox-throbber__busy-spinner{align-items:center;background-color:rgba(34,47,62,.6);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.tox .tox-tbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#fff;display:flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0;text-transform:none;width:34px}.tox .tox-tbtn svg{display:block;fill:#fff}.tox .tox-tbtn.tox-tbtn-more{padding-left:5px;padding-right:5px;width:inherit}.tox .tox-tbtn:focus{background:#4a5562;border:0;box-shadow:none}.tox .tox-tbtn:hover{background:#4a5562;border:0;box-shadow:none;color:#fff}.tox .tox-tbtn:hover svg{fill:#fff}.tox .tox-tbtn:active{background:#757d87;border:0;box-shadow:none;color:#fff}.tox .tox-tbtn:active svg{fill:#fff}.tox .tox-tbtn--disabled,.tox .tox-tbtn--disabled:hover,.tox .tox-tbtn:disabled,.tox .tox-tbtn:disabled:hover{background:0 0;border:0;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-tbtn--disabled svg,.tox .tox-tbtn--disabled:hover svg,.tox .tox-tbtn:disabled svg,.tox .tox-tbtn:disabled:hover svg{fill:rgba(255,255,255,.5)}.tox .tox-tbtn--enabled,.tox .tox-tbtn--enabled:hover{background:#757d87;border:0;box-shadow:none;color:#fff}.tox .tox-tbtn--enabled:hover>*,.tox .tox-tbtn--enabled>*{transform:none}.tox .tox-tbtn--enabled svg,.tox .tox-tbtn--enabled:hover svg{fill:#fff}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled){color:#fff}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg{fill:#fff}.tox .tox-tbtn:active>*{transform:none}.tox .tox-tbtn--md{height:51px;width:51px}.tox .tox-tbtn--lg{flex-direction:column;height:68px;width:68px}.tox .tox-tbtn--return{-ms-grid-row-align:stretch;align-self:stretch;height:unset;width:16px}.tox .tox-tbtn--labeled{padding:0 4px;width:unset}.tox .tox-tbtn__vlabel{display:block;font-size:10px;font-weight:400;letter-spacing:-.025em;margin-bottom:4px;white-space:nowrap}.tox .tox-tbtn--select{margin:2px 0 3px 0;padding:0 4px;width:auto}.tox .tox-tbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-tbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px}.tox .tox-tbtn__select-chevron svg{fill:rgba(255,255,255,.5)}.tox .tox-tbtn--bespoke .tox-tbtn__select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:7em}.tox .tox-split-button{border:0;border-radius:3px;box-sizing:border-box;display:flex;margin:2px 0 3px 0;overflow:hidden}.tox .tox-split-button:hover{box-shadow:0 0 0 1px #4a5562 inset}.tox .tox-split-button:focus{background:#4a5562;box-shadow:none;color:#fff}.tox .tox-split-button>*{border-radius:0}.tox .tox-split-button__chevron{width:16px}.tox .tox-split-button__chevron svg{fill:rgba(255,255,255,.5)}.tox .tox-split-button .tox-tbtn{margin:0}.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child{width:30px}.tox.tox-platform-touch .tox-split-button__chevron{width:20px}.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus,.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,.tox .tox-split-button.tox-tbtn--disabled:focus,.tox .tox-split-button.tox-tbtn--disabled:hover{background:0 0;box-shadow:none;color:rgba(255,255,255,.5)}.tox .tox-toolbar-overlord{background-color:#222f3e}.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23000000'/%3E%3C/svg%3E") left 0 top 0 #222f3e;background-color:#222f3e;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 0}.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed{height:0;opacity:0;padding-bottom:0;padding-top:0;visibility:hidden}.tox .tox-toolbar__overflow--growing{transition:height .3s ease,opacity .2s linear .1s}.tox .tox-toolbar__overflow--shrinking{transition:opacity .3s ease,height .2s linear .1s,visibility 0s linear .3s}.tox .tox-menubar+.tox-toolbar,.tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary{border-top:1px solid #000;margin-top:-1px}.tox .tox-toolbar--scrolling{flex-wrap:nowrap;overflow-x:auto}.tox .tox-pop .tox-toolbar{border-width:0}.tox .tox-toolbar--no-divider{background-image:none}.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary,.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child{border-top:1px solid #000}.tox.tox-tinymce-aux .tox-toolbar__overflow{background-color:#222f3e;border:1px solid #000;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15)}.tox[dir=rtl] .tox-tbtn__icon-rtl svg{transform:rotateY(180deg)}.tox .tox-toolbar__group{align-items:center;display:flex;flex-wrap:wrap;margin:0 0;padding:0 4px 0 4px}.tox .tox-toolbar__group--pull-right{margin-left:auto}.tox .tox-toolbar--scrolling .tox-toolbar__group{flex-shrink:0;flex-wrap:nowrap}.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border-right:1px solid #000}.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type){border-left:1px solid #000}.tox .tox-tooltip{display:inline-block;padding:8px;position:relative}.tox .tox-tooltip__body{background-color:#3d546f;border-radius:3px;box-shadow:0 2px 4px rgba(42,55,70,.3);color:rgba(255,255,255,.75);font-size:14px;font-style:normal;font-weight:400;padding:4px 8px;text-transform:none}.tox .tox-tooltip__arrow{position:absolute}.tox .tox-tooltip--down .tox-tooltip__arrow{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #3d546f;bottom:0;left:50%;position:absolute;transform:translateX(-50%)}.tox .tox-tooltip--up .tox-tooltip__arrow{border-bottom:8px solid #3d546f;border-left:8px solid transparent;border-right:8px solid transparent;left:50%;position:absolute;top:0;transform:translateX(-50%)}.tox .tox-tooltip--right .tox-tooltip__arrow{border-bottom:8px solid transparent;border-left:8px solid #3d546f;border-top:8px solid transparent;position:absolute;right:0;top:50%;transform:translateY(-50%)}.tox .tox-tooltip--left .tox-tooltip__arrow{border-bottom:8px solid transparent;border-right:8px solid #3d546f;border-top:8px solid transparent;left:0;position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-well{border:1px solid #000;border-radius:3px;padding:8px;width:100%}.tox .tox-well>:first-child{margin-top:0}.tox .tox-well>:last-child{margin-bottom:0}.tox .tox-well>:only-child{margin:0}.tox .tox-custom-editor{border:1px solid #000;border-radius:3px;display:flex;flex:1;position:relative}.tox .tox-dialog-loading::before{background-color:rgba(0,0,0,.5);content:"";height:100%;position:absolute;width:100%;z-index:1000}.tox .tox-tab{cursor:pointer}.tox .tox-dialog__content-js{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-content .tox-collection{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-image-tools-edit-panel{height:60px}.tox .tox-image-tools__sidebar{height:60px}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/skin.mobile.css b/ui/public/tinymce/skins/ui/oxide-dark/skin.mobile.css
new file mode 100644
index 0000000..875721a
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/skin.mobile.css
@@ -0,0 +1,673 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+/* RESET all the things! */
+.tinymce-mobile-outer-container {
+  all: initial;
+  display: block;
+}
+.tinymce-mobile-outer-container * {
+  border: 0;
+  box-sizing: initial;
+  cursor: inherit;
+  float: none;
+  line-height: 1;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+  /* TBIO-3691, stop the gray flicker on touch. */
+  text-shadow: none;
+  white-space: nowrap;
+}
+.tinymce-mobile-icon-arrow-back::before {
+  content: "\e5cd";
+}
+.tinymce-mobile-icon-image::before {
+  content: "\e412";
+}
+.tinymce-mobile-icon-cancel-circle::before {
+  content: "\e5c9";
+}
+.tinymce-mobile-icon-full-dot::before {
+  content: "\e061";
+}
+.tinymce-mobile-icon-align-center::before {
+  content: "\e234";
+}
+.tinymce-mobile-icon-align-left::before {
+  content: "\e236";
+}
+.tinymce-mobile-icon-align-right::before {
+  content: "\e237";
+}
+.tinymce-mobile-icon-bold::before {
+  content: "\e238";
+}
+.tinymce-mobile-icon-italic::before {
+  content: "\e23f";
+}
+.tinymce-mobile-icon-unordered-list::before {
+  content: "\e241";
+}
+.tinymce-mobile-icon-ordered-list::before {
+  content: "\e242";
+}
+.tinymce-mobile-icon-font-size::before {
+  content: "\e245";
+}
+.tinymce-mobile-icon-underline::before {
+  content: "\e249";
+}
+.tinymce-mobile-icon-link::before {
+  content: "\e157";
+}
+.tinymce-mobile-icon-unlink::before {
+  content: "\eca2";
+}
+.tinymce-mobile-icon-color::before {
+  content: "\e891";
+}
+.tinymce-mobile-icon-previous::before {
+  content: "\e314";
+}
+.tinymce-mobile-icon-next::before {
+  content: "\e315";
+}
+.tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-icon-style-formats::before {
+  content: "\e264";
+}
+.tinymce-mobile-icon-undo::before {
+  content: "\e166";
+}
+.tinymce-mobile-icon-redo::before {
+  content: "\e15a";
+}
+.tinymce-mobile-icon-removeformat::before {
+  content: "\e239";
+}
+.tinymce-mobile-icon-small-font::before {
+  content: "\e906";
+}
+.tinymce-mobile-icon-readonly-back::before,
+.tinymce-mobile-format-matches::after {
+  content: "\e5ca";
+}
+.tinymce-mobile-icon-small-heading::before {
+  content: "small";
+}
+.tinymce-mobile-icon-large-heading::before {
+  content: "large";
+}
+.tinymce-mobile-icon-small-heading::before,
+.tinymce-mobile-icon-large-heading::before {
+  font-family: sans-serif;
+  font-size: 80%;
+}
+.tinymce-mobile-mask-edit-icon::before {
+  content: "\e254";
+}
+.tinymce-mobile-icon-back::before {
+  content: "\e5c4";
+}
+.tinymce-mobile-icon-heading::before {
+  /* TODO: Translate */
+  content: "Headings";
+  font-family: sans-serif;
+  font-size: 80%;
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h1::before {
+  content: "H1";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h2::before {
+  content: "H2";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h3::before {
+  content: "H3";
+  font-weight: bold;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background: rgba(51, 51, 51, 0.5);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  font-size: 1em;
+  justify-content: space-between;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 1em;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+  background-color: white;
+  color: #207ab7;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before {
+  content: "\e900";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon {
+  z-index: 2;
+}
+.tinymce-mobile-android-container.tinymce-mobile-android-maximized {
+  background: #ffffff;
+  border: none;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) {
+  position: relative;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket {
+  display: flex;
+  flex-grow: 1;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe {
+  display: flex !important;
+  flex-grow: 1;
+  height: auto !important;
+}
+.tinymce-mobile-android-scroll-reload {
+  overflow: hidden;
+}
+:not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar {
+  margin-top: 23px;
+}
+.tinymce-mobile-toolstrip {
+  background: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  z-index: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar {
+  align-items: center;
+  background-color: #fff;
+  border-bottom: 1px solid #cccccc;
+  display: flex;
+  flex: 1;
+  height: 2.5em;
+  width: 100%;
+  /* Make it no larger than the toolstrip, so that it needs to scroll */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex-shrink: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container {
+  background: #f44336;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group {
+  flex-grow: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button {
+  align-items: center;
+  display: flex;
+  height: 80%;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected {
+  background: #c8cbcf;
+  color: #cccccc;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
+  background: #207ab7;
+  color: #eceff1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar {
+  /* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+  padding-bottom: 0.4em;
+  padding-top: 0.4em;
+  /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
+  /* For widgets like the colour picker, use the whole height */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog {
+  display: flex;
+  min-height: 1.5em;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain {
+  display: flex;
+  height: 100%;
+  transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input {
+  font-family: Sans-serif;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x {
+  -ms-grid-row-align: center;
+      align-self: center;
+  background: inherit;
+  border: none;
+  border-radius: 50%;
+  color: #888;
+  font-size: 0.6em;
+  font-weight: bold;
+  height: 100%;
+  padding-right: 2px;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x {
+  display: none;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before {
+  align-items: center;
+  display: flex;
+  font-weight: bold;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before {
+  visibility: hidden;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
+  color: #cccccc;
+  font-size: 10px;
+  line-height: 10px;
+  margin: 0 2px;
+  padding-top: 3px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
+  color: #c8cbcf;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
+  margin-left: 0.5em;
+  margin-right: 0.9em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
+  margin-left: 0.9em;
+  margin-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
+  display: flex;
+  flex: 1;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0.28em 0;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line {
+  background: #cccccc;
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient {
+  background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%);
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black {
+  /* Not part of theming */
+  background: black;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white {
+  /* Not part of theming */
+  background: white;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
+  /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
+     * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
+     * absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
+     * this approach.
+    */
+  align-items: center;
+  background-clip: padding-box;
+  background-color: #455a64;
+  border: 0.5em solid rgba(136, 136, 136, 0);
+  border-radius: 3em;
+  bottom: 0;
+  color: #fff;
+  display: flex;
+  height: 0.5em;
+  justify-content: center;
+  left: -10px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
+  width: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active {
+  border: 0.5em solid rgba(136, 136, 136, 0.39);
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
+  flex-direction: column;
+  justify-content: center;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
+  background: #ffffff;
+  border: none;
+  border-radius: 0;
+  color: #455a64;
+  flex-grow: 1;
+  font-size: 0.85em;
+  padding-bottom: 0.1em;
+  padding-left: 5px;
+  padding-top: 0.1em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+/* dropup */
+.tinymce-mobile-dropup {
+  background: white;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
+  transition: height 0.3s ease-out;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
+  transition: height 0.3s ease-in;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
+  flex-grow: 0;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
+  flex-grow: 1;
+}
+/* TODO min-height for device size and orientation */
+.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+  min-height: 200px;
+}
+@media only screen and (orientation: landscape) {
+  .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 200px;
+  }
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 150px;
+  }
+}
+/* styles menu */
+.tinymce-mobile-styles-menu {
+  font-family: sans-serif;
+  outline: 4px solid black;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"].transitioning {
+  transition: transform 0.5s ease-in-out;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
+  border-bottom: 1px solid #ddd;
+  color: #455a64;
+  cursor: pointer;
+  display: flex;
+  padding: 1em 1em;
+  position: relative;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
+  color: #455a64;
+  content: "\e314";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
+  color: #455a64;
+  content: "\e315";
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
+  align-items: center;
+  background: #fff;
+  border-top: #455a64;
+  color: #455a64;
+  display: flex;
+  min-height: 2.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="before"] {
+  transform: translate(-100%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="current"] {
+  transform: translate(0%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="after"] {
+  transform: translate(100%);
+}
+@font-face {
+  font-family: 'tinymce-mobile';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
+}
+@media (min-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 25px;
+  }
+}
+@media (max-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 18px;
+  }
+}
+.tinymce-mobile-icon {
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.mixin-flex-and-centre {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.mixin-flex-bar {
+  align-items: center;
+  display: flex;
+  height: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
+  background-color: #fff;
+  width: 100%;
+}
+.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+  /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
+  background-color: #207ab7;
+  border-radius: 50%;
+  bottom: 1em;
+  color: white;
+  font-size: 1em;
+  height: 2.1em;
+  position: fixed;
+  right: 2em;
+  width: 2.1em;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
+  height: 300px;
+  overflow: hidden;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
+  height: 100%;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
+  display: none;
+}
+/*
+  Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
+  increased and the whole body becomes scrollable. It's important!
+ */
+input[type="file"]::-webkit-file-upload-button {
+  display: none;
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    bottom: 50%;
+  }
+}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/skin.mobile.min.css b/ui/public/tinymce/skins/ui/oxide-dark/skin.mobile.min.css
new file mode 100644
index 0000000..3a45cac
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/skin.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-outer-container{all:initial;display:block}.tinymce-mobile-outer-container *{border:0;box-sizing:initial;cursor:inherit;float:none;line-height:1;margin:0;outline:0;padding:0;-webkit-tap-highlight-color:transparent;text-shadow:none;white-space:nowrap}.tinymce-mobile-icon-arrow-back::before{content:"\e5cd"}.tinymce-mobile-icon-image::before{content:"\e412"}.tinymce-mobile-icon-cancel-circle::before{content:"\e5c9"}.tinymce-mobile-icon-full-dot::before{content:"\e061"}.tinymce-mobile-icon-align-center::before{content:"\e234"}.tinymce-mobile-icon-align-left::before{content:"\e236"}.tinymce-mobile-icon-align-right::before{content:"\e237"}.tinymce-mobile-icon-bold::before{content:"\e238"}.tinymce-mobile-icon-italic::before{content:"\e23f"}.tinymce-mobile-icon-unordered-list::before{content:"\e241"}.tinymce-mobile-icon-ordered-list::before{content:"\e242"}.tinymce-mobile-icon-font-size::before{content:"\e245"}.tinymce-mobile-icon-underline::before{content:"\e249"}.tinymce-mobile-icon-link::before{content:"\e157"}.tinymce-mobile-icon-unlink::before{content:"\eca2"}.tinymce-mobile-icon-color::before{content:"\e891"}.tinymce-mobile-icon-previous::before{content:"\e314"}.tinymce-mobile-icon-next::before{content:"\e315"}.tinymce-mobile-icon-large-font::before,.tinymce-mobile-icon-style-formats::before{content:"\e264"}.tinymce-mobile-icon-undo::before{content:"\e166"}.tinymce-mobile-icon-redo::before{content:"\e15a"}.tinymce-mobile-icon-removeformat::before{content:"\e239"}.tinymce-mobile-icon-small-font::before{content:"\e906"}.tinymce-mobile-format-matches::after,.tinymce-mobile-icon-readonly-back::before{content:"\e5ca"}.tinymce-mobile-icon-small-heading::before{content:"small"}.tinymce-mobile-icon-large-heading::before{content:"large"}.tinymce-mobile-icon-large-heading::before,.tinymce-mobile-icon-small-heading::before{font-family:sans-serif;font-size:80%}.tinymce-mobile-mask-edit-icon::before{content:"\e254"}.tinymce-mobile-icon-back::before{content:"\e5c4"}.tinymce-mobile-icon-heading::before{content:"Headings";font-family:sans-serif;font-size:80%;font-weight:700}.tinymce-mobile-icon-h1::before{content:"H1";font-weight:700}.tinymce-mobile-icon-h2::before{content:"H2";font-weight:700}.tinymce-mobile-icon-h3::before{content:"H3";font-weight:700}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask{align-items:center;display:flex;justify-content:center;background:rgba(51,51,51,.5);height:100%;position:absolute;top:0;width:100%}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container{align-items:center;border-radius:50%;display:flex;flex-direction:column;font-family:sans-serif;font-size:1em;justify-content:space-between}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{align-items:center;display:flex;justify-content:center;flex-direction:column;font-size:1em}@media only screen and (min-device-width:700px){.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{font-size:1.2em}}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em;background-color:#fff;color:#207ab7}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before{content:"\e900";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon{z-index:2}.tinymce-mobile-android-container.tinymce-mobile-android-maximized{background:#fff;border:none;bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:0}.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized){position:relative}.tinymce-mobile-android-container .tinymce-mobile-editor-socket{display:flex;flex-grow:1}.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe{display:flex!important;flex-grow:1;height:auto!important}.tinymce-mobile-android-scroll-reload{overflow:hidden}:not(.tinymce-mobile-readonly-mode)>.tinymce-mobile-android-selection-context-toolbar{margin-top:23px}.tinymce-mobile-toolstrip{background:#fff;display:flex;flex:0 0 auto;z-index:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar{align-items:center;background-color:#fff;border-bottom:1px solid #ccc;display:flex;flex:1;height:2.5em;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex-shrink:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container{background:#f44336}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group{flex-grow:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button{align-items:center;display:flex;height:80%;margin-left:2px;margin-right:2px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected{background:#c8cbcf;color:#ccc}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type{background:#207ab7;color:#eceff1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex:1;padding-bottom:.4em;padding-top:.4em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog{display:flex;min-height:1.5em;overflow:hidden;padding-left:0;padding-right:0;position:relative;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain{display:flex;height:100%;transition:left cubic-bezier(.4,0,1,1) .15s;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen{display:flex;flex:0 0 auto;justify-content:space-between;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input{font-family:Sans-serif}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container{display:flex;flex-grow:1;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x{-ms-grid-row-align:center;align-self:center;background:inherit;border:none;border-radius:50%;color:#888;font-size:.6em;font-weight:700;height:100%;padding-right:2px;position:absolute;right:0}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x{display:none}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before{align-items:center;display:flex;font-weight:700;height:100%;padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before{visibility:hidden}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item{color:#ccc;font-size:10px;line-height:10px;margin:0 2px;padding-top:3px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active{color:#c8cbcf}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before{margin-left:.5em;margin-right:.9em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before{margin-left:.9em;margin-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider{display:flex;flex:1;margin-left:0;margin-right:0;padding:.28em 0;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line{background:#ccc;display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container{padding-left:2em;padding-right:2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient{background:linear-gradient(to right,red 0,#feff00 17%,#0f0 33%,#00feff 50%,#00f 67%,#ff00fe 83%,red 100%);display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black{background:#000;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white{background:#fff;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb{align-items:center;background-clip:padding-box;background-color:#455a64;border:.5em solid rgba(136,136,136,0);border-radius:3em;bottom:0;color:#fff;display:flex;height:.5em;justify-content:center;left:-10px;margin:auto;position:absolute;top:0;transition:border 120ms cubic-bezier(.39,.58,.57,1);width:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active{border:.5em solid rgba(136,136,136,.39)}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper{flex-direction:column;justify-content:center}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog){height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container{display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input{background:#fff;border:none;border-radius:0;color:#455a64;flex-grow:1;font-size:.85em;padding-bottom:.1em;padding-left:5px;padding-top:.1em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder{color:#888}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder{color:#888}.tinymce-mobile-dropup{background:#fff;display:flex;overflow:hidden;width:100%}.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking{transition:height .3s ease-out}.tinymce-mobile-dropup.tinymce-mobile-dropup-growing{transition:height .3s ease-in}.tinymce-mobile-dropup.tinymce-mobile-dropup-closed{flex-grow:0}.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing){flex-grow:1}.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}@media only screen and (orientation:landscape){.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:150px}}.tinymce-mobile-styles-menu{font-family:sans-serif;outline:4px solid #000;overflow:hidden;position:relative;width:100%}.tinymce-mobile-styles-menu [role=menu]{display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.tinymce-mobile-styles-menu [role=menu].transitioning{transition:transform .5s ease-in-out}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item{border-bottom:1px solid #ddd;color:#455a64;cursor:pointer;display:flex;padding:1em 1em;position:relative}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before{color:#455a64;content:"\e314";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after{color:#455a64;content:"\e315";font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after{font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser,.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator{align-items:center;background:#fff;border-top:#455a64;color:#455a64;display:flex;min-height:2.5em;padding-left:1em;padding-right:1em}.tinymce-mobile-styles-menu [data-transitioning-destination=before][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=before]{transform:translate(-100%)}.tinymce-mobile-styles-menu [data-transitioning-destination=current][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=current]{transform:translate(0)}.tinymce-mobile-styles-menu [data-transitioning-destination=after][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=after]{transform:translate(100%)}@font-face{font-family:tinymce-mobile;font-style:normal;font-weight:400;src:url(fonts/tinymce-mobile.woff?8x92w3) format('woff')}@media (min-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:25px}}@media (max-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:18px}}.tinymce-mobile-icon{font-family:tinymce-mobile,sans-serif}.mixin-flex-and-centre{align-items:center;display:flex;justify-content:center}.mixin-flex-bar{align-items:center;display:flex;height:100%}.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe{background-color:#fff;width:100%}.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{background-color:#207ab7;border-radius:50%;bottom:1em;color:#fff;font-size:1em;height:2.1em;position:fixed;right:2em;width:2.1em;align-items:center;display:flex;justify-content:center}@media only screen and (min-device-width:700px){.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{font-size:1.2em}}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket{height:300px;overflow:hidden}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe{height:100%}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip{display:none}input[type=file]::-webkit-file-upload-button{display:none}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{bottom:50%}}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css b/ui/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css
new file mode 100644
index 0000000..715978b
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.css
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+  z-index: 1200;
+}
+.tox-shadowhost.tox-fullscreen {
+  z-index: 1200;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
diff --git a/ui/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.min.css b/ui/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.min.css
new file mode 100644
index 0000000..9ba6e02
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide-dark/skin.shadowdom.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll{overflow:hidden}.tox-fullscreen{border:0;height:100%;left:0;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;position:fixed;top:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox.tox-tinymce.tox-fullscreen{background-color:transparent;z-index:1200}.tox-shadowhost.tox-fullscreen{z-index:1200}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}
diff --git a/ui/public/tinymce/skins/ui/oxide/content.css b/ui/public/tinymce/skins/ui/oxide/content.css
new file mode 100644
index 0000000..efae400
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/content.css
@@ -0,0 +1,732 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(34, 47, 62, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 10000;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::-moz-selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #b4d7ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::-moz-selection,
+.mce-content-body th[data-mce-selected]::-moz-selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid rgba(180, 215, 255, 0.7);
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: multiply;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::-moz-selection {
+  background: none;
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #b4d7ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/ui/public/tinymce/skins/ui/oxide/content.inline.css b/ui/public/tinymce/skins/ui/oxide/content.inline.css
new file mode 100644
index 0000000..df6ed08
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/content.inline.css
@@ -0,0 +1,726 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  cursor: default;
+  display: inline-block;
+  height: 12px !important;
+  padding: 0 2px;
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  -ms-user-select: all;
+      user-select: all;
+  width: 8px !important;
+}
+.mce-content-body .mce-item-anchor[data-mce-selected] {
+  outline-offset: 1px;
+}
+.tox-comments-visible .tox-comment {
+  background-color: #fff0b7;
+}
+.tox-comments-visible .tox-comment--active {
+  background-color: #ffe168;
+}
+.tox-checklist > li:not(.tox-checklist--hidden) {
+  list-style: none;
+  margin: 0.25em 0;
+}
+.tox-checklist > li:not(.tox-checklist--hidden)::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+  cursor: pointer;
+  height: 1em;
+  margin-left: -1.5em;
+  margin-top: 0.125em;
+  position: absolute;
+  width: 1em;
+}
+.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before {
+  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");
+}
+[dir=rtl] .tox-checklist > li:not(.tox-checklist--hidden)::before {
+  margin-left: 0;
+  margin-right: -1.5em;
+}
+/* stylelint-disable */
+/* http://prismjs.com/ */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+@media print {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: 0.1em;
+  border-radius: 0.3em;
+  white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+.token.punctuation {
+  color: #999;
+}
+.namespace {
+  opacity: 0.7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+.token.entity {
+  cursor: help;
+}
+/* stylelint-enable */
+.mce-content-body {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.mce-content-body .mce-visual-caret {
+  background-color: black;
+  background-color: currentColor;
+  position: absolute;
+}
+.mce-content-body .mce-visual-caret-hidden {
+  display: none;
+}
+.mce-content-body *[data-mce-caret] {
+  left: -1000px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: auto;
+  top: 0;
+}
+.mce-content-body .mce-offscreen-selection {
+  left: -2000000px;
+  max-width: 1000000px;
+  position: absolute;
+}
+.mce-content-body *[contentEditable=false] {
+  cursor: default;
+}
+.mce-content-body *[contentEditable=true] {
+  cursor: text;
+}
+.tox-cursor-format-painter {
+  cursor: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"), default;
+}
+.mce-content-body figure.align-left {
+  float: left;
+}
+.mce-content-body figure.align-right {
+  float: right;
+}
+.mce-content-body figure.image.align-center {
+  display: table;
+  margin-left: auto;
+  margin-right: auto;
+}
+.mce-preview-object {
+  border: 1px solid gray;
+  display: inline-block;
+  line-height: 0;
+  margin: 0 2px 0 2px;
+  position: relative;
+}
+.mce-preview-object .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-preview-object[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.mce-object {
+  background: transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;
+  border: 1px dashed #aaa;
+}
+.mce-pagebreak {
+  border: 1px dashed #aaa;
+  cursor: default;
+  display: block;
+  height: 5px;
+  margin-top: 15px;
+  page-break-before: always;
+  width: 100%;
+}
+@media print {
+  .mce-pagebreak {
+    border: 0;
+  }
+}
+.tiny-pageembed .mce-shim {
+  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tiny-pageembed[data-mce-selected="2"] .mce-shim {
+  display: none;
+}
+.tiny-pageembed {
+  display: inline-block;
+  position: relative;
+}
+.tiny-pageembed--21by9,
+.tiny-pageembed--16by9,
+.tiny-pageembed--4by3,
+.tiny-pageembed--1by1 {
+  display: block;
+  overflow: hidden;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+.tiny-pageembed--21by9 {
+  padding-top: 42.857143%;
+}
+.tiny-pageembed--16by9 {
+  padding-top: 56.25%;
+}
+.tiny-pageembed--4by3 {
+  padding-top: 75%;
+}
+.tiny-pageembed--1by1 {
+  padding-top: 100%;
+}
+.tiny-pageembed--21by9 iframe,
+.tiny-pageembed--16by9 iframe,
+.tiny-pageembed--4by3 iframe,
+.tiny-pageembed--1by1 iframe {
+  border: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.mce-content-body[data-mce-placeholder] {
+  position: relative;
+}
+.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  color: rgba(34, 47, 62, 0.7);
+  content: attr(data-mce-placeholder);
+  position: absolute;
+}
+.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+  left: 1px;
+}
+.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+  right: 1px;
+}
+.mce-content-body div.mce-resizehandle {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+  z-index: 10000;
+}
+.mce-content-body div.mce-resizehandle:hover {
+  background-color: #4099ff;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(1) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(2) {
+  cursor: nesw-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(3) {
+  cursor: nwse-resize;
+}
+.mce-content-body div.mce-resizehandle:nth-of-type(4) {
+  cursor: nesw-resize;
+}
+.mce-content-body .mce-resize-backdrop {
+  z-index: 10000;
+}
+.mce-content-body .mce-clonedresizable {
+  cursor: default;
+  opacity: 0.5;
+  outline: 1px dashed black;
+  position: absolute;
+  z-index: 10001;
+}
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+.mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+  border: 0;
+}
+.mce-content-body .mce-resize-helper {
+  background: #555;
+  background: rgba(0, 0, 0, 0.75);
+  border: 1px;
+  border-radius: 3px;
+  color: white;
+  display: none;
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 14px;
+  margin: 5px 10px;
+  padding: 5px;
+  position: absolute;
+  white-space: nowrap;
+  z-index: 10002;
+}
+.tox-rtc-user-selection {
+  position: relative;
+}
+.tox-rtc-user-cursor {
+  bottom: 0;
+  cursor: default;
+  position: absolute;
+  top: 0;
+  width: 2px;
+}
+.tox-rtc-user-cursor::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: '';
+  display: block;
+  height: 8px;
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 8px;
+}
+.tox-rtc-user-cursor:hover::after {
+  background-color: inherit;
+  border-radius: 100px;
+  box-sizing: border-box;
+  color: #fff;
+  content: attr(data-user);
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  left: -5px;
+  min-height: 8px;
+  min-width: 8px;
+  padding: 0 12px;
+  position: absolute;
+  top: -11px;
+  white-space: nowrap;
+  z-index: 1000;
+}
+.tox-rtc-user-selection--1 .tox-rtc-user-cursor {
+  background-color: #2dc26b;
+}
+.tox-rtc-user-selection--2 .tox-rtc-user-cursor {
+  background-color: #e03e2d;
+}
+.tox-rtc-user-selection--3 .tox-rtc-user-cursor {
+  background-color: #f1c40f;
+}
+.tox-rtc-user-selection--4 .tox-rtc-user-cursor {
+  background-color: #3598db;
+}
+.tox-rtc-user-selection--5 .tox-rtc-user-cursor {
+  background-color: #b96ad9;
+}
+.tox-rtc-user-selection--6 .tox-rtc-user-cursor {
+  background-color: #e67e23;
+}
+.tox-rtc-user-selection--7 .tox-rtc-user-cursor {
+  background-color: #aaa69d;
+}
+.tox-rtc-user-selection--8 .tox-rtc-user-cursor {
+  background-color: #f368e0;
+}
+.tox-rtc-remote-image {
+  background: #eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;
+  border: 1px solid #ccc;
+  min-height: 240px;
+  min-width: 320px;
+}
+.mce-match-marker {
+  background: #aaa;
+  color: #fff;
+}
+.mce-match-marker-selected {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::-moz-selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-match-marker-selected::selection {
+  background: #39f;
+  color: #fff;
+}
+.mce-content-body img[data-mce-selected],
+.mce-content-body video[data-mce-selected],
+.mce-content-body audio[data-mce-selected],
+.mce-content-body object[data-mce-selected],
+.mce-content-body embed[data-mce-selected],
+.mce-content-body table[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body hr[data-mce-selected] {
+  outline: 3px solid #b4d7ff;
+  outline-offset: 1px;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body *[contentEditable=false][data-mce-selected] {
+  cursor: not-allowed;
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+.mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+  outline: none;
+}
+.mce-content-body *[data-mce-selected="inline-boundary"] {
+  background-color: #b4d7ff;
+}
+.mce-content-body .mce-edit-focus {
+  outline: 3px solid #b4d7ff;
+}
+.mce-content-body td[data-mce-selected],
+.mce-content-body th[data-mce-selected] {
+  position: relative;
+}
+.mce-content-body td[data-mce-selected]::-moz-selection,
+.mce-content-body th[data-mce-selected]::-moz-selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected]::selection,
+.mce-content-body th[data-mce-selected]::selection {
+  background: none;
+}
+.mce-content-body td[data-mce-selected] *,
+.mce-content-body th[data-mce-selected] * {
+  outline: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.mce-content-body td[data-mce-selected]::after,
+.mce-content-body th[data-mce-selected]::after {
+  background-color: rgba(180, 215, 255, 0.7);
+  border: 1px solid rgba(180, 215, 255, 0.7);
+  bottom: -1px;
+  content: '';
+  left: -1px;
+  mix-blend-mode: multiply;
+  position: absolute;
+  right: -1px;
+  top: -1px;
+}
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .mce-content-body td[data-mce-selected]::after,
+  .mce-content-body th[data-mce-selected]::after {
+    border-color: rgba(0, 84, 180, 0.7);
+  }
+}
+.mce-content-body img::-moz-selection {
+  background: none;
+}
+.mce-content-body img::selection {
+  background: none;
+}
+.ephox-snooker-resizer-bar {
+  background-color: #b4d7ff;
+  opacity: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.ephox-snooker-resizer-cols {
+  cursor: col-resize;
+}
+.ephox-snooker-resizer-rows {
+  cursor: row-resize;
+}
+.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging {
+  opacity: 1;
+}
+.mce-spellchecker-word {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+  height: 2rem;
+}
+.mce-spellchecker-grammar {
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");
+  background-position: 0 calc(100% + 1px);
+  background-repeat: repeat-x;
+  background-size: auto 6px;
+  cursor: default;
+}
+.mce-toc {
+  border: 1px solid gray;
+}
+.mce-toc h2 {
+  margin: 4px;
+}
+.mce-toc li {
+  list-style-type: none;
+}
+table[style*="border-width: 0px"],
+.mce-item-table:not([border]),
+.mce-item-table[border="0"],
+table[style*="border-width: 0px"] td,
+.mce-item-table:not([border]) td,
+.mce-item-table[border="0"] td,
+table[style*="border-width: 0px"] th,
+.mce-item-table:not([border]) th,
+.mce-item-table[border="0"] th,
+table[style*="border-width: 0px"] caption,
+.mce-item-table:not([border]) caption,
+.mce-item-table[border="0"] caption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks p,
+.mce-visualblocks h1,
+.mce-visualblocks h2,
+.mce-visualblocks h3,
+.mce-visualblocks h4,
+.mce-visualblocks h5,
+.mce-visualblocks h6,
+.mce-visualblocks div:not([data-mce-bogus]),
+.mce-visualblocks section,
+.mce-visualblocks article,
+.mce-visualblocks blockquote,
+.mce-visualblocks address,
+.mce-visualblocks pre,
+.mce-visualblocks figure,
+.mce-visualblocks figcaption,
+.mce-visualblocks hgroup,
+.mce-visualblocks aside,
+.mce-visualblocks ul,
+.mce-visualblocks ol,
+.mce-visualblocks dl {
+  background-repeat: no-repeat;
+  border: 1px dashed #bbb;
+  margin-left: 3px;
+  padding-top: 10px;
+}
+.mce-visualblocks p {
+  background-image: url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7);
+}
+.mce-visualblocks h1 {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==);
+}
+.mce-visualblocks h2 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==);
+}
+.mce-visualblocks h3 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7);
+}
+.mce-visualblocks h4 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==);
+}
+.mce-visualblocks h5 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==);
+}
+.mce-visualblocks h6 {
+  background-image: url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==);
+}
+.mce-visualblocks div:not([data-mce-bogus]) {
+  background-image: url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7);
+}
+.mce-visualblocks section {
+  background-image: url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=);
+}
+.mce-visualblocks article {
+  background-image: url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7);
+}
+.mce-visualblocks blockquote {
+  background-image: url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7);
+}
+.mce-visualblocks address {
+  background-image: url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=);
+}
+.mce-visualblocks pre {
+  background-image: url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==);
+}
+.mce-visualblocks figure {
+  background-image: url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7);
+}
+.mce-visualblocks figcaption {
+  border: 1px dashed #bbb;
+}
+.mce-visualblocks hgroup {
+  background-image: url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7);
+}
+.mce-visualblocks aside {
+  background-image: url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=);
+}
+.mce-visualblocks ul {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==);
+}
+.mce-visualblocks ol {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==);
+}
+.mce-visualblocks dl {
+  background-image: url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==);
+}
+.mce-visualblocks:not([dir=rtl]) p,
+.mce-visualblocks:not([dir=rtl]) h1,
+.mce-visualblocks:not([dir=rtl]) h2,
+.mce-visualblocks:not([dir=rtl]) h3,
+.mce-visualblocks:not([dir=rtl]) h4,
+.mce-visualblocks:not([dir=rtl]) h5,
+.mce-visualblocks:not([dir=rtl]) h6,
+.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),
+.mce-visualblocks:not([dir=rtl]) section,
+.mce-visualblocks:not([dir=rtl]) article,
+.mce-visualblocks:not([dir=rtl]) blockquote,
+.mce-visualblocks:not([dir=rtl]) address,
+.mce-visualblocks:not([dir=rtl]) pre,
+.mce-visualblocks:not([dir=rtl]) figure,
+.mce-visualblocks:not([dir=rtl]) figcaption,
+.mce-visualblocks:not([dir=rtl]) hgroup,
+.mce-visualblocks:not([dir=rtl]) aside,
+.mce-visualblocks:not([dir=rtl]) ul,
+.mce-visualblocks:not([dir=rtl]) ol,
+.mce-visualblocks:not([dir=rtl]) dl {
+  margin-left: 3px;
+}
+.mce-visualblocks[dir=rtl] p,
+.mce-visualblocks[dir=rtl] h1,
+.mce-visualblocks[dir=rtl] h2,
+.mce-visualblocks[dir=rtl] h3,
+.mce-visualblocks[dir=rtl] h4,
+.mce-visualblocks[dir=rtl] h5,
+.mce-visualblocks[dir=rtl] h6,
+.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),
+.mce-visualblocks[dir=rtl] section,
+.mce-visualblocks[dir=rtl] article,
+.mce-visualblocks[dir=rtl] blockquote,
+.mce-visualblocks[dir=rtl] address,
+.mce-visualblocks[dir=rtl] pre,
+.mce-visualblocks[dir=rtl] figure,
+.mce-visualblocks[dir=rtl] figcaption,
+.mce-visualblocks[dir=rtl] hgroup,
+.mce-visualblocks[dir=rtl] aside,
+.mce-visualblocks[dir=rtl] ul,
+.mce-visualblocks[dir=rtl] ol,
+.mce-visualblocks[dir=rtl] dl {
+  background-position-x: right;
+  margin-right: 3px;
+}
+.mce-nbsp,
+.mce-shy {
+  background: #aaa;
+}
+.mce-shy::after {
+  content: '-';
+}
diff --git a/ui/public/tinymce/skins/ui/oxide/content.inline.min.css b/ui/public/tinymce/skins/ui/oxide/content.inline.min.css
new file mode 100644
index 0000000..0a3d965
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/content.inline.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(34,47,62,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:10000}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:700;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::-moz-selection{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #b4d7ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #b4d7ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#b4d7ff}.mce-content-body .mce-edit-focus{outline:3px solid #b4d7ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background:0 0}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);bottom:-1px;content:'';left:-1px;mix-blend-mode:multiply;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::-moz-selection{background:0 0}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#b4d7ff;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}
diff --git a/ui/public/tinymce/skins/ui/oxide/content.min.css b/ui/public/tinymce/skins/ui/oxide/content.min.css
new file mode 100644
index 0000000..40b3378
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/content.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.mce-content-body .mce-item-anchor{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'8'%20height%3D'12'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M0%200L8%200%208%2012%204.09117821%209%200%2012z'%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;cursor:default;display:inline-block;height:12px!important;padding:0 2px;-webkit-user-modify:read-only;-moz-user-modify:read-only;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;width:8px!important}.mce-content-body .mce-item-anchor[data-mce-selected]{outline-offset:1px}.tox-comments-visible .tox-comment{background-color:#fff0b7}.tox-comments-visible .tox-comment--active{background-color:#ffe168}.tox-checklist>li:not(.tox-checklist--hidden){list-style:none;margin:.25em 0}.tox-checklist>li:not(.tox-checklist--hidden)::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-unchecked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2215%22%20height%3D%2215%22%20x%3D%22.5%22%20y%3D%22.5%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22%234C4C4C%22%20rx%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A");cursor:pointer;height:1em;margin-left:-1.5em;margin-top:.125em;position:absolute;width:1em}.tox-checklist li:not(.tox-checklist--hidden).tox-checklist--checked::before{content:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20id%3D%22checklist-checked%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Crect%20id%3D%22Rectangle%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%234099FF%22%20fill-rule%3D%22nonzero%22%20rx%3D%222%22%2F%3E%3Cpath%20id%3D%22Path%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M11.5703186%2C3.14417309%20C11.8516238%2C2.73724603%2012.4164781%2C2.62829933%2012.83558%2C2.89774797%20C13.260121%2C3.17069355%2013.3759736%2C3.72932262%2013.0909105%2C4.14168582%20L7.7580587%2C11.8560195%20C7.43776896%2C12.3193404%206.76483983%2C12.3852142%206.35607322%2C11.9948725%20L3.02491697%2C8.8138662%20C2.66090143%2C8.46625845%202.65798871%2C7.89594698%203.01850234%2C7.54483354%20C3.373942%2C7.19866177%203.94940006%2C7.19592841%204.30829608%2C7.5386474%20L6.85276923%2C9.9684299%20L11.5703186%2C3.14417309%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A")}[dir=rtl] .tox-checklist>li:not(.tox-checklist--hidden)::before{margin-left:0;margin-right:-1.5em}code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.mce-content-body{overflow-wrap:break-word;word-wrap:break-word}.mce-content-body .mce-visual-caret{background-color:#000;background-color:currentColor;position:absolute}.mce-content-body .mce-visual-caret-hidden{display:none}.mce-content-body [data-mce-caret]{left:-1000px;margin:0;padding:0;position:absolute;right:auto;top:0}.mce-content-body .mce-offscreen-selection{left:-2000000px;max-width:1000000px;position:absolute}.mce-content-body [contentEditable=false]{cursor:default}.mce-content-body [contentEditable=true]{cursor:text}.tox-cursor-format-painter{cursor:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M15%2C6%20C15%2C5.45%2014.55%2C5%2014%2C5%20L6%2C5%20C5.45%2C5%205%2C5.45%205%2C6%20L5%2C10%20C5%2C10.55%205.45%2C11%206%2C11%20L14%2C11%20C14.55%2C11%2015%2C10.55%2015%2C10%20L15%2C9%20L16%2C9%20L16%2C12%20L9%2C12%20L9%2C19%20C9%2C19.55%209.45%2C20%2010%2C20%20L11%2C20%20C11.55%2C20%2012%2C19.55%2012%2C19%20L12%2C14%20L18%2C14%20L18%2C7%20L15%2C7%20L15%2C6%20Z%22%2F%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22nonzero%22%20d%3D%22M1%2C1%20L8.25%2C1%20C8.66421356%2C1%209%2C1.33578644%209%2C1.75%20L9%2C1.75%20C9%2C2.16421356%208.66421356%2C2.5%208.25%2C2.5%20L2.5%2C2.5%20L2.5%2C8.25%20C2.5%2C8.66421356%202.16421356%2C9%201.75%2C9%20L1.75%2C9%20C1.33578644%2C9%201%2C8.66421356%201%2C8.25%20L1%2C1%20Z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"),default}.mce-content-body figure.align-left{float:left}.mce-content-body figure.align-right{float:right}.mce-content-body figure.image.align-center{display:table;margin-left:auto;margin-right:auto}.mce-preview-object{border:1px solid gray;display:inline-block;line-height:0;margin:0 2px 0 2px;position:relative}.mce-preview-object .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-object{background:transparent url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M4%203h16a1%201%200%200%201%201%201v16a1%201%200%200%201-1%201H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1zm1%202v14h14V5H5zm4.79%202.565l5.64%204.028a.5.5%200%200%201%200%20.814l-5.64%204.028a.5.5%200%200%201-.79-.407V7.972a.5.5%200%200%201%20.79-.407z%22%2F%3E%3C%2Fsvg%3E%0A") no-repeat center;border:1px dashed #aaa}.mce-pagebreak{border:1px dashed #aaa;cursor:default;display:block;height:5px;margin-top:15px;page-break-before:always;width:100%}@media print{.mce-pagebreak{border:0}}.tiny-pageembed .mce-shim{background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);height:100%;left:0;position:absolute;top:0;width:100%}.tiny-pageembed[data-mce-selected="2"] .mce-shim{display:none}.tiny-pageembed{display:inline-block;position:relative}.tiny-pageembed--16by9,.tiny-pageembed--1by1,.tiny-pageembed--21by9,.tiny-pageembed--4by3{display:block;overflow:hidden;padding:0;position:relative;width:100%}.tiny-pageembed--21by9{padding-top:42.857143%}.tiny-pageembed--16by9{padding-top:56.25%}.tiny-pageembed--4by3{padding-top:75%}.tiny-pageembed--1by1{padding-top:100%}.tiny-pageembed--16by9 iframe,.tiny-pageembed--1by1 iframe,.tiny-pageembed--21by9 iframe,.tiny-pageembed--4by3 iframe{border:0;height:100%;left:0;position:absolute;top:0;width:100%}.mce-content-body[data-mce-placeholder]{position:relative}.mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before{color:rgba(34,47,62,.7);content:attr(data-mce-placeholder);position:absolute}.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before{left:1px}.mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before{right:1px}.mce-content-body div.mce-resizehandle{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;height:10px;position:absolute;width:10px;z-index:10000}.mce-content-body div.mce-resizehandle:hover{background-color:#4099ff}.mce-content-body div.mce-resizehandle:nth-of-type(1){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(2){cursor:nesw-resize}.mce-content-body div.mce-resizehandle:nth-of-type(3){cursor:nwse-resize}.mce-content-body div.mce-resizehandle:nth-of-type(4){cursor:nesw-resize}.mce-content-body .mce-resize-backdrop{z-index:10000}.mce-content-body .mce-clonedresizable{cursor:default;opacity:.5;outline:1px dashed #000;position:absolute;z-index:10001}.mce-content-body .mce-clonedresizable.mce-resizetable-columns td,.mce-content-body .mce-clonedresizable.mce-resizetable-columns th{border:0}.mce-content-body .mce-resize-helper{background:#555;background:rgba(0,0,0,.75);border:1px;border-radius:3px;color:#fff;display:none;font-family:sans-serif;font-size:12px;line-height:14px;margin:5px 10px;padding:5px;position:absolute;white-space:nowrap;z-index:10002}.tox-rtc-user-selection{position:relative}.tox-rtc-user-cursor{bottom:0;cursor:default;position:absolute;top:0;width:2px}.tox-rtc-user-cursor::before{background-color:inherit;border-radius:50%;content:'';display:block;height:8px;position:absolute;right:-3px;top:-3px;width:8px}.tox-rtc-user-cursor:hover::after{background-color:inherit;border-radius:100px;box-sizing:border-box;color:#fff;content:attr(data-user);display:block;font-size:12px;font-weight:700;left:-5px;min-height:8px;min-width:8px;padding:0 12px;position:absolute;top:-11px;white-space:nowrap;z-index:1000}.tox-rtc-user-selection--1 .tox-rtc-user-cursor{background-color:#2dc26b}.tox-rtc-user-selection--2 .tox-rtc-user-cursor{background-color:#e03e2d}.tox-rtc-user-selection--3 .tox-rtc-user-cursor{background-color:#f1c40f}.tox-rtc-user-selection--4 .tox-rtc-user-cursor{background-color:#3598db}.tox-rtc-user-selection--5 .tox-rtc-user-cursor{background-color:#b96ad9}.tox-rtc-user-selection--6 .tox-rtc-user-cursor{background-color:#e67e23}.tox-rtc-user-selection--7 .tox-rtc-user-cursor{background-color:#aaa69d}.tox-rtc-user-selection--8 .tox-rtc-user-cursor{background-color:#f368e0}.tox-rtc-remote-image{background:#eaeaea url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2236%22%20height%3D%2212%22%20viewBox%3D%220%200%2036%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Ccircle%20cx%3D%226%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.33s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%20%20%3Ccircle%20cx%3D%2230%22%20cy%3D%226%22%20r%3D%223%22%20fill%3D%22rgba(0%2C%200%2C%200%2C%20.2)%22%3E%0A%20%20%20%20%3Canimate%20attributeName%3D%22r%22%20values%3D%223%3B5%3B3%22%20calcMode%3D%22linear%22%20begin%3D%22.66s%22%20dur%3D%221s%22%20repeatCount%3D%22indefinite%22%20%2F%3E%0A%20%20%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A") no-repeat center center;border:1px solid #ccc;min-height:240px;min-width:320px}.mce-match-marker{background:#aaa;color:#fff}.mce-match-marker-selected{background:#39f;color:#fff}.mce-match-marker-selected::-moz-selection{background:#39f;color:#fff}.mce-match-marker-selected::selection{background:#39f;color:#fff}.mce-content-body audio[data-mce-selected],.mce-content-body embed[data-mce-selected],.mce-content-body img[data-mce-selected],.mce-content-body object[data-mce-selected],.mce-content-body table[data-mce-selected],.mce-content-body video[data-mce-selected]{outline:3px solid #b4d7ff}.mce-content-body hr[data-mce-selected]{outline:3px solid #b4d7ff;outline-offset:1px}.mce-content-body [contentEditable=false] [contentEditable=true]:focus{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false] [contentEditable=true]:hover{outline:3px solid #b4d7ff}.mce-content-body [contentEditable=false][data-mce-selected]{cursor:not-allowed;outline:3px solid #b4d7ff}.mce-content-body.mce-content-readonly [contentEditable=true]:focus,.mce-content-body.mce-content-readonly [contentEditable=true]:hover{outline:0}.mce-content-body [data-mce-selected=inline-boundary]{background-color:#b4d7ff}.mce-content-body .mce-edit-focus{outline:3px solid #b4d7ff}.mce-content-body td[data-mce-selected],.mce-content-body th[data-mce-selected]{position:relative}.mce-content-body td[data-mce-selected]::-moz-selection,.mce-content-body th[data-mce-selected]::-moz-selection{background:0 0}.mce-content-body td[data-mce-selected]::selection,.mce-content-body th[data-mce-selected]::selection{background:0 0}.mce-content-body td[data-mce-selected] *,.mce-content-body th[data-mce-selected] *{outline:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{background-color:rgba(180,215,255,.7);border:1px solid rgba(180,215,255,.7);bottom:-1px;content:'';left:-1px;mix-blend-mode:multiply;position:absolute;right:-1px;top:-1px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.mce-content-body td[data-mce-selected]::after,.mce-content-body th[data-mce-selected]::after{border-color:rgba(0,84,180,.7)}}.mce-content-body img::-moz-selection{background:0 0}.mce-content-body img::selection{background:0 0}.ephox-snooker-resizer-bar{background-color:#b4d7ff;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:1}.mce-spellchecker-word{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%23ff0000'%20fill%3D'none'%20stroke-linecap%3D'round'%20stroke-opacity%3D'.75'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default;height:2rem}.mce-spellchecker-grammar{background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D'4'%20height%3D'4'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20stroke%3D'%2300A835'%20fill%3D'none'%20stroke-linecap%3D'round'%20d%3D'M0%203L2%201%204%203'%2F%3E%3C%2Fsvg%3E%0A");background-position:0 calc(100% + 1px);background-repeat:repeat-x;background-size:auto 6px;cursor:default}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-item-table:not([border]),.mce-item-table:not([border]) caption,.mce-item-table:not([border]) td,.mce-item-table:not([border]) th,.mce-item-table[border="0"],.mce-item-table[border="0"] caption,.mce-item-table[border="0"] td,.mce-item-table[border="0"] th,table[style*="border-width: 0px"],table[style*="border-width: 0px"] caption,table[style*="border-width: 0px"] td,table[style*="border-width: 0px"] th{border:1px dashed #bbb}.mce-visualblocks address,.mce-visualblocks article,.mce-visualblocks aside,.mce-visualblocks blockquote,.mce-visualblocks div:not([data-mce-bogus]),.mce-visualblocks dl,.mce-visualblocks figcaption,.mce-visualblocks figure,.mce-visualblocks h1,.mce-visualblocks h2,.mce-visualblocks h3,.mce-visualblocks h4,.mce-visualblocks h5,.mce-visualblocks h6,.mce-visualblocks hgroup,.mce-visualblocks ol,.mce-visualblocks p,.mce-visualblocks pre,.mce-visualblocks section,.mce-visualblocks ul{background-repeat:no-repeat;border:1px dashed #bbb;margin-left:3px;padding-top:10px}.mce-visualblocks p{background-image:url(data:image/gif;base64,R0lGODlhCQAJAJEAAAAAAP///7u7u////yH5BAEAAAMALAAAAAAJAAkAAAIQnG+CqCN/mlyvsRUpThG6AgA7)}.mce-visualblocks h1{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGu1JuxHoAfRNRW3TWXyF2YiRUAOw==)}.mce-visualblocks h2{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8Hybbx4oOuqgTynJd6bGlWg3DkJzoaUAAAOw==)}.mce-visualblocks h3{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIZjI8Hybbx4oOuqgTynJf2Ln2NOHpQpmhAAQA7)}.mce-visualblocks h4{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxInR0zqeAdhtJlXwV1oCll2HaWgAAOw==)}.mce-visualblocks h5{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjane4iq5GlW05GgIkIZUAAAOw==)}.mce-visualblocks h6{background-image:url(data:image/gif;base64,R0lGODlhDgAKAIABALu7u////yH5BAEAAAEALAAAAAAOAAoAAAIajI8HybbxIoiuwjan04jep1iZ1XRlAo5bVgAAOw==)}.mce-visualblocks div:not([data-mce-bogus]){background-image:url(data:image/gif;base64,R0lGODlhEgAKAIABALu7u////yH5BAEAAAEALAAAAAASAAoAAAIfjI9poI0cgDywrhuxfbrzDEbQM2Ei5aRjmoySW4pAAQA7)}.mce-visualblocks section{background-image:url(data:image/gif;base64,R0lGODlhKAAKAIABALu7u////yH5BAEAAAEALAAAAAAoAAoAAAI5jI+pywcNY3sBWHdNrplytD2ellDeSVbp+GmWqaDqDMepc8t17Y4vBsK5hDyJMcI6KkuYU+jpjLoKADs=)}.mce-visualblocks article{background-image:url(data:image/gif;base64,R0lGODlhKgAKAIABALu7u////yH5BAEAAAEALAAAAAAqAAoAAAI6jI+pywkNY3wG0GBvrsd2tXGYSGnfiF7ikpXemTpOiJScasYoDJJrjsG9gkCJ0ag6KhmaIe3pjDYBBQA7)}.mce-visualblocks blockquote{background-image:url(data:image/gif;base64,R0lGODlhPgAKAIABALu7u////yH5BAEAAAEALAAAAAA+AAoAAAJPjI+py+0Knpz0xQDyuUhvfoGgIX5iSKZYgq5uNL5q69asZ8s5rrf0yZmpNkJZzFesBTu8TOlDVAabUyatguVhWduud3EyiUk45xhTTgMBBQA7)}.mce-visualblocks address{background-image:url(data:image/gif;base64,R0lGODlhLQAKAIABALu7u////yH5BAEAAAEALAAAAAAtAAoAAAI/jI+pywwNozSP1gDyyZcjb3UaRpXkWaXmZW4OqKLhBmLs+K263DkJK7OJeifh7FicKD9A1/IpGdKkyFpNmCkAADs=)}.mce-visualblocks pre{background-image:url(data:image/gif;base64,R0lGODlhFQAKAIABALu7uwAAACH5BAEAAAEALAAAAAAVAAoAAAIjjI+ZoN0cgDwSmnpz1NCueYERhnibZVKLNnbOq8IvKpJtVQAAOw==)}.mce-visualblocks figure{background-image:url(data:image/gif;base64,R0lGODlhJAAKAIAAALu7u////yH5BAEAAAEALAAAAAAkAAoAAAI0jI+py+2fwAHUSFvD3RlvG4HIp4nX5JFSpnZUJ6LlrM52OE7uSWosBHScgkSZj7dDKnWAAgA7)}.mce-visualblocks figcaption{border:1px dashed #bbb}.mce-visualblocks hgroup{background-image:url(data:image/gif;base64,R0lGODlhJwAKAIABALu7uwAAACH5BAEAAAEALAAAAAAnAAoAAAI3jI+pywYNI3uB0gpsRtt5fFnfNZaVSYJil4Wo03Hv6Z62uOCgiXH1kZIIJ8NiIxRrAZNMZAtQAAA7)}.mce-visualblocks aside{background-image:url(data:image/gif;base64,R0lGODlhHgAKAIABAKqqqv///yH5BAEAAAEALAAAAAAeAAoAAAItjI+pG8APjZOTzgtqy7I3f1yehmQcFY4WKZbqByutmW4aHUd6vfcVbgudgpYCADs=)}.mce-visualblocks ul{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIAAALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybGuYnqUVSjvw26DzzXiqIDlVwAAOw==)}.mce-visualblocks ol{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybH6HHt0qourxC6CvzXieHyeWQAAOw==)}.mce-visualblocks dl{background-image:url(data:image/gif;base64,R0lGODlhDQAKAIABALu7u////yH5BAEAAAEALAAAAAANAAoAAAIXjI8GybEOnmOvUoWznTqeuEjNSCqeGRUAOw==)}.mce-visualblocks:not([dir=rtl]) address,.mce-visualblocks:not([dir=rtl]) article,.mce-visualblocks:not([dir=rtl]) aside,.mce-visualblocks:not([dir=rtl]) blockquote,.mce-visualblocks:not([dir=rtl]) div:not([data-mce-bogus]),.mce-visualblocks:not([dir=rtl]) dl,.mce-visualblocks:not([dir=rtl]) figcaption,.mce-visualblocks:not([dir=rtl]) figure,.mce-visualblocks:not([dir=rtl]) h1,.mce-visualblocks:not([dir=rtl]) h2,.mce-visualblocks:not([dir=rtl]) h3,.mce-visualblocks:not([dir=rtl]) h4,.mce-visualblocks:not([dir=rtl]) h5,.mce-visualblocks:not([dir=rtl]) h6,.mce-visualblocks:not([dir=rtl]) hgroup,.mce-visualblocks:not([dir=rtl]) ol,.mce-visualblocks:not([dir=rtl]) p,.mce-visualblocks:not([dir=rtl]) pre,.mce-visualblocks:not([dir=rtl]) section,.mce-visualblocks:not([dir=rtl]) ul{margin-left:3px}.mce-visualblocks[dir=rtl] address,.mce-visualblocks[dir=rtl] article,.mce-visualblocks[dir=rtl] aside,.mce-visualblocks[dir=rtl] blockquote,.mce-visualblocks[dir=rtl] div:not([data-mce-bogus]),.mce-visualblocks[dir=rtl] dl,.mce-visualblocks[dir=rtl] figcaption,.mce-visualblocks[dir=rtl] figure,.mce-visualblocks[dir=rtl] h1,.mce-visualblocks[dir=rtl] h2,.mce-visualblocks[dir=rtl] h3,.mce-visualblocks[dir=rtl] h4,.mce-visualblocks[dir=rtl] h5,.mce-visualblocks[dir=rtl] h6,.mce-visualblocks[dir=rtl] hgroup,.mce-visualblocks[dir=rtl] ol,.mce-visualblocks[dir=rtl] p,.mce-visualblocks[dir=rtl] pre,.mce-visualblocks[dir=rtl] section,.mce-visualblocks[dir=rtl] ul{background-position-x:right;margin-right:3px}.mce-nbsp,.mce-shy{background:#aaa}.mce-shy::after{content:'-'}body{font-family:sans-serif}table{border-collapse:collapse}
diff --git a/ui/public/tinymce/skins/ui/oxide/content.mobile.css b/ui/public/tinymce/skins/ui/oxide/content.mobile.css
new file mode 100644
index 0000000..4bdb8ba
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/content.mobile.css
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection {
+  /* Note: this file is used inside the content, so isn't part of theming */
+  background-color: green;
+  display: inline-block;
+  opacity: 0.5;
+  position: absolute;
+}
+body {
+  -webkit-text-size-adjust: none;
+}
+body img {
+  /* this is related to the content margin */
+  max-width: 96vw;
+}
+body table img {
+  max-width: 95%;
+}
+body {
+  font-family: sans-serif;
+}
+table {
+  border-collapse: collapse;
+}
diff --git a/ui/public/tinymce/skins/ui/oxide/content.mobile.min.css b/ui/public/tinymce/skins/ui/oxide/content.mobile.min.css
new file mode 100644
index 0000000..35f7dc0
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/content.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{background-color:green;display:inline-block;opacity:.5;position:absolute}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}body{font-family:sans-serif}table{border-collapse:collapse}
diff --git a/ui/public/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff b/ui/public/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff
new file mode 100644
index 0000000..1e3be03
Binary files /dev/null and b/ui/public/tinymce/skins/ui/oxide/fonts/tinymce-mobile.woff differ
diff --git a/ui/public/tinymce/skins/ui/oxide/skin.css b/ui/public/tinymce/skins/ui/oxide/skin.css
new file mode 100644
index 0000000..4b47a75
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/skin.css
@@ -0,0 +1,3034 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox {
+  box-shadow: none;
+  box-sizing: content-box;
+  color: #222f3e;
+  cursor: auto;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  vertical-align: initial;
+  white-space: normal;
+}
+.tox *:not(svg):not(rect) {
+  box-sizing: inherit;
+  color: inherit;
+  cursor: inherit;
+  direction: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  -webkit-tap-highlight-color: inherit;
+  text-align: inherit;
+  text-decoration: inherit;
+  text-shadow: inherit;
+  text-transform: inherit;
+  vertical-align: inherit;
+  white-space: inherit;
+}
+.tox *:not(svg):not(rect) {
+  /* stylelint-disable-line no-duplicate-selectors */
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  float: none;
+  height: auto;
+  margin: 0;
+  max-width: none;
+  outline: 0;
+  padding: 0;
+  position: static;
+  width: auto;
+}
+.tox:not([dir=rtl]) {
+  direction: ltr;
+  text-align: left;
+}
+.tox[dir=rtl] {
+  direction: rtl;
+  text-align: right;
+}
+.tox-tinymce {
+  border: 1px solid #cccccc;
+  border-radius: 0;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  overflow: hidden;
+  position: relative;
+  visibility: inherit !important;
+}
+.tox-tinymce-inline {
+  border: none;
+  box-shadow: none;
+}
+.tox-tinymce-inline .tox-editor-header {
+  background-color: transparent;
+  border: 1px solid #cccccc;
+  border-radius: 0;
+  box-shadow: none;
+}
+.tox-tinymce-aux {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  z-index: 1300;
+}
+.tox-tinymce *:focus,
+.tox-tinymce-aux *:focus {
+  outline: none;
+}
+button::-moz-focus-inner {
+  border: 0;
+}
+.tox .accessibility-issue__header {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4px;
+}
+.tox .accessibility-issue__description {
+  align-items: stretch;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .accessibility-issue__description > div {
+  padding-bottom: 4px;
+}
+.tox .accessibility-issue__description > div > div {
+  align-items: center;
+  display: flex;
+  margin-bottom: 4px;
+}
+.tox .accessibility-issue__description > *:last-child:not(:only-child) {
+  border-color: #cccccc;
+  border-style: solid;
+}
+.tox .accessibility-issue__repair {
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description {
+  background-color: rgba(32, 122, 183, 0.1);
+  border-color: rgba(32, 122, 183, 0.4);
+  color: #222f3e;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description > *:last-child {
+  border-color: rgba(32, 122, 183, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 {
+  color: #207ab7;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg {
+  fill: #207ab7;
+}
+.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon {
+  color: #207ab7;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description {
+  background-color: rgba(255, 165, 0, 0.1);
+  border-color: rgba(255, 165, 0, 0.5);
+  color: #222f3e;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description > *:last-child {
+  border-color: rgba(255, 165, 0, 0.5);
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 {
+  color: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg {
+  fill: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon {
+  color: #cc8500;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description {
+  background-color: rgba(204, 0, 0, 0.1);
+  border-color: rgba(204, 0, 0, 0.4);
+  color: #222f3e;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description > *:last-child {
+  border-color: rgba(204, 0, 0, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 {
+  color: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg {
+  fill: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon {
+  color: #c00;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description {
+  background-color: rgba(120, 171, 70, 0.1);
+  border-color: rgba(120, 171, 70, 0.4);
+  color: #222f3e;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description > *:last-child {
+  border-color: rgba(120, 171, 70, 0.4);
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2 {
+  color: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg {
+  fill: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon {
+  color: #78AB46;
+}
+.tox .tox-dialog__body-content .accessibility-issue__header h1,
+.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 {
+  margin-top: 0;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-left: auto;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description {
+  padding: 4px 4px 4px 8px;
+}
+.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-left-width: 1px;
+  padding-left: 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) {
+  margin-right: auto;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description {
+  padding: 4px 8px 4px 4px;
+}
+.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description > *:last-child {
+  border-right-width: 1px;
+  padding-right: 4px;
+}
+.tox .tox-anchorbar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-bar {
+  display: flex;
+  flex: 0 0 auto;
+}
+.tox .tox-button {
+  background-color: #207ab7;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #207ab7;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  line-height: 24px;
+  margin: 0;
+  outline: none;
+  padding: 4px 16px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-button[disabled] {
+  background-color: #207ab7;
+  background-image: none;
+  border-color: #207ab7;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-button:focus:not(:disabled) {
+  background-color: #1c6ca1;
+  background-image: none;
+  border-color: #1c6ca1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:hover:not(:disabled) {
+  background-color: #1c6ca1;
+  background-image: none;
+  border-color: #1c6ca1;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button:active:not(:disabled) {
+  background-color: #185d8c;
+  background-image: none;
+  border-color: #185d8c;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button--secondary {
+  background-color: #f0f0f0;
+  background-image: none;
+  background-position: 0 0;
+  background-repeat: repeat;
+  border-color: #f0f0f0;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  color: #222f3e;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  outline: none;
+  padding: 4px 16px;
+  text-decoration: none;
+  text-transform: none;
+}
+.tox .tox-button--secondary[disabled] {
+  background-color: #f0f0f0;
+  background-image: none;
+  border-color: #f0f0f0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-button--secondary:focus:not(:disabled) {
+  background-color: #e3e3e3;
+  background-image: none;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--secondary:hover:not(:disabled) {
+  background-color: #e3e3e3;
+  background-image: none;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--secondary:active:not(:disabled) {
+  background-color: #d6d6d6;
+  background-image: none;
+  border-color: #d6d6d6;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--icon,
+.tox .tox-button.tox-button--icon,
+.tox .tox-button.tox-button--secondary.tox-button--icon {
+  padding: 4px;
+}
+.tox .tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--icon .tox-icon svg,
+.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg {
+  display: block;
+  fill: currentColor;
+}
+.tox .tox-button-link {
+  background: 0;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+}
+.tox .tox-button-link--sm {
+  font-size: 14px;
+}
+.tox .tox-button--naked {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #222f3e;
+}
+.tox .tox-button--naked[disabled] {
+  background-color: #f0f0f0;
+  border-color: #f0f0f0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-button--naked:hover:not(:disabled) {
+  background-color: #e3e3e3;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--naked:focus:not(:disabled) {
+  background-color: #e3e3e3;
+  border-color: #e3e3e3;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--naked:active:not(:disabled) {
+  background-color: #d6d6d6;
+  border-color: #d6d6d6;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--naked .tox-icon svg {
+  fill: currentColor;
+}
+.tox .tox-button--naked.tox-button--icon:hover:not(:disabled) {
+  color: #222f3e;
+}
+.tox .tox-checkbox {
+  align-items: center;
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  height: 36px;
+  min-width: 36px;
+}
+.tox .tox-checkbox__input {
+  /* Hide from view but visible to screen readers */
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+.tox .tox-checkbox__icons {
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px transparent;
+  box-sizing: content-box;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  padding: calc(4px - 1px);
+  width: 24px;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: block;
+  fill: rgba(34, 47, 62, 0.3);
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: none;
+  fill: #207ab7;
+}
+.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: none;
+  fill: #207ab7;
+}
+.tox .tox-checkbox--disabled {
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg {
+  display: none;
+}
+.tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg {
+  display: block;
+}
+.tox input.tox-checkbox__input:focus + .tox-checkbox__icons {
+  border-radius: 3px;
+  box-shadow: inset 0 0 0 1px #207ab7;
+  padding: calc(4px - 1px);
+}
+.tox:not([dir=rtl]) .tox-checkbox__label {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-checkbox__input {
+  left: -10000px;
+}
+.tox:not([dir=rtl]) .tox-bar .tox-checkbox {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-checkbox__label {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-checkbox__input {
+  right: -10000px;
+}
+.tox[dir=rtl] .tox-bar .tox-checkbox {
+  margin-right: 4px;
+}
+.tox {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox .tox-collection--toolbar .tox-collection__group {
+  display: flex;
+  padding: 0;
+}
+.tox .tox-collection--grid .tox-collection__group {
+  display: flex;
+  flex-wrap: wrap;
+  max-height: 208px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+}
+.tox .tox-collection--list .tox-collection__group {
+  border-bottom-width: 0;
+  border-color: #cccccc;
+  border-left-width: 0;
+  border-right-width: 0;
+  border-style: solid;
+  border-top-width: 1px;
+  padding: 4px 0;
+}
+.tox .tox-collection--list .tox-collection__group:first-child {
+  border-top-width: 0;
+}
+.tox .tox-collection__group-heading {
+  background-color: #e6e6e6;
+  color: rgba(34, 47, 62, 0.7);
+  cursor: default;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  margin-bottom: 4px;
+  margin-top: -4px;
+  padding: 4px 8px;
+  text-transform: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection__item {
+  align-items: center;
+  color: #222f3e;
+  cursor: pointer;
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.tox .tox-collection--list .tox-collection__item {
+  padding: 4px 8px;
+}
+.tox .tox-collection--toolbar .tox-collection__item {
+  border-radius: 3px;
+  padding: 4px;
+}
+.tox .tox-collection--grid .tox-collection__item {
+  border-radius: 3px;
+  padding: 4px;
+}
+.tox .tox-collection--list .tox-collection__item--enabled {
+  background-color: #fff;
+  color: #222f3e;
+}
+.tox .tox-collection--list .tox-collection__item--active {
+  background-color: #dee0e2;
+}
+.tox .tox-collection--toolbar .tox-collection__item--enabled {
+  background-color: #c8cbcf;
+  color: #222f3e;
+}
+.tox .tox-collection--toolbar .tox-collection__item--active {
+  background-color: #dee0e2;
+}
+.tox .tox-collection--grid .tox-collection__item--enabled {
+  background-color: #c8cbcf;
+  color: #222f3e;
+}
+.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  background-color: #dee0e2;
+  color: #222f3e;
+}
+.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: #222f3e;
+}
+.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
+  color: #222f3e;
+}
+.tox .tox-collection__item--state-disabled {
+  background-color: transparent;
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-collection__item-icon,
+.tox .tox-collection__item-checkmark {
+  align-items: center;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 24px;
+}
+.tox .tox-collection__item-icon svg,
+.tox .tox-collection__item-checkmark svg {
+  fill: currentColor;
+}
+.tox .tox-collection--toolbar-lg .tox-collection__item-icon {
+  height: 48px;
+  width: 48px;
+}
+.tox .tox-collection__item-label {
+  color: currentColor;
+  display: inline-block;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 24px;
+  text-transform: none;
+  word-break: break-all;
+}
+.tox .tox-collection__item-accessory {
+  color: rgba(34, 47, 62, 0.7);
+  display: inline-block;
+  font-size: 14px;
+  height: 24px;
+  line-height: 24px;
+  text-transform: none;
+}
+.tox .tox-collection__item-caret {
+  align-items: center;
+  display: flex;
+  min-height: 24px;
+}
+.tox .tox-collection__item-caret::after {
+  content: '';
+  font-size: 0;
+  min-height: inherit;
+}
+.tox .tox-collection__item-caret svg {
+  fill: #222f3e;
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg {
+  display: none;
+}
+.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark {
+  display: none;
+}
+.tox .tox-collection--horizontal {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+  margin-bottom: 0;
+  overflow-x: auto;
+  padding: 0;
+}
+.tox .tox-collection--horizontal .tox-collection__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item {
+  height: 34px;
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+}
+.tox .tox-collection--horizontal .tox-collection__item-label {
+  white-space: nowrap;
+}
+.tox .tox-collection--horizontal .tox-collection__item-caret {
+  margin-left: 4px;
+}
+.tox .tox-collection__item-container {
+  display: flex;
+}
+.tox .tox-collection__item-container--row {
+  align-items: center;
+  flex: 1 1 auto;
+  flex-direction: row;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-left {
+  margin-right: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--align-right {
+  justify-content: flex-end;
+  margin-left: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top {
+  align-items: flex-start;
+  margin-bottom: auto;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle {
+  align-items: center;
+}
+.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom {
+  align-items: flex-end;
+  margin-top: auto;
+}
+.tox .tox-collection__item-container--column {
+  -ms-grid-row-align: center;
+      align-self: center;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-left {
+  align-items: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--align-right {
+  align-items: flex-end;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top {
+  align-self: flex-start;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle {
+  -ms-grid-row-align: center;
+      align-self: center;
+}
+.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom {
+  align-self: flex-end;
+}
+.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-right: 1px solid #cccccc;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-left: 4px;
+}
+.tox:not([dir=rtl]) .tox-collection__item-accessory {
+  margin-left: 16px;
+  text-align: right;
+}
+.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret {
+  margin-left: 16px;
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) {
+  border-left: 1px solid #cccccc;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child {
+  margin-right: 4px;
+}
+.tox[dir=rtl] .tox-collection__item-icon-rtl {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg {
+  transform: rotateY(180deg);
+}
+.tox[dir=rtl] .tox-collection__item-accessory {
+  margin-right: 16px;
+  text-align: left;
+}
+.tox[dir=rtl] .tox-collection .tox-collection__item-caret {
+  margin-right: 16px;
+  transform: rotateY(180deg);
+}
+.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret {
+  margin-right: 4px;
+}
+.tox .tox-color-picker-container {
+  display: flex;
+  flex-direction: row;
+  height: 225px;
+  margin: 0;
+}
+.tox .tox-sv-palette {
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+}
+.tox .tox-sv-palette-spectrum {
+  height: 100%;
+}
+.tox .tox-sv-palette,
+.tox .tox-sv-palette-spectrum {
+  width: 225px;
+}
+.tox .tox-sv-palette-thumb {
+  background: none;
+  border: 1px solid black;
+  border-radius: 50%;
+  box-sizing: content-box;
+  height: 12px;
+  position: absolute;
+  width: 12px;
+}
+.tox .tox-sv-palette-inner-thumb {
+  border: 1px solid white;
+  border-radius: 50%;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox .tox-hue-slider {
+  box-sizing: border-box;
+  height: 100%;
+  width: 25px;
+}
+.tox .tox-hue-slider-spectrum {
+  background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00);
+  height: 100%;
+  width: 100%;
+}
+.tox .tox-hue-slider,
+.tox .tox-hue-slider-spectrum {
+  width: 20px;
+}
+.tox .tox-hue-slider-thumb {
+  background: white;
+  border: 1px solid black;
+  box-sizing: content-box;
+  height: 4px;
+  width: 100%;
+}
+.tox .tox-rgb-form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.tox .tox-rgb-form div {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 5px;
+  width: inherit;
+}
+.tox .tox-rgb-form input {
+  width: 6em;
+}
+.tox .tox-rgb-form input.tox-invalid {
+  /* Need !important to override Chrome's focus styling unfortunately */
+  border: 1px solid red !important;
+}
+.tox .tox-rgb-form .tox-rgba-preview {
+  border: 1px solid black;
+  flex-grow: 2;
+  margin-bottom: 0;
+}
+.tox:not([dir=rtl]) .tox-sv-palette {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider {
+  margin-right: 15px;
+}
+.tox:not([dir=rtl]) .tox-hue-slider-thumb {
+  margin-left: -1px;
+}
+.tox:not([dir=rtl]) .tox-rgb-form label {
+  margin-right: 0.5em;
+}
+.tox[dir=rtl] .tox-sv-palette {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider {
+  margin-left: 15px;
+}
+.tox[dir=rtl] .tox-hue-slider-thumb {
+  margin-right: -1px;
+}
+.tox[dir=rtl] .tox-rgb-form label {
+  margin-left: 0.5em;
+}
+.tox .tox-toolbar .tox-swatches,
+.tox .tox-toolbar__primary .tox-swatches,
+.tox .tox-toolbar__overflow .tox-swatches {
+  margin: 2px 0 3px 4px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-swatches-menu {
+  border: 0;
+  margin: -4px 0;
+}
+.tox .tox-swatches__row {
+  display: flex;
+}
+.tox .tox-swatch {
+  height: 30px;
+  transition: transform 0.15s, box-shadow 0.15s;
+  width: 30px;
+}
+.tox .tox-swatch:hover,
+.tox .tox-swatch:focus {
+  box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset;
+  transform: scale(0.8);
+}
+.tox .tox-swatch--remove {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-swatch--remove svg path {
+  stroke: #e74c3c;
+}
+.tox .tox-swatches__picker-btn {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  height: 30px;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  width: 30px;
+}
+.tox .tox-swatches__picker-btn svg {
+  height: 24px;
+  width: 24px;
+}
+.tox .tox-swatches__picker-btn:hover {
+  background: #dee0e2;
+}
+.tox:not([dir=rtl]) .tox-swatches__picker-btn {
+  margin-left: auto;
+}
+.tox[dir=rtl] .tox-swatches__picker-btn {
+  margin-right: auto;
+}
+.tox .tox-comment-thread {
+  background: #fff;
+  position: relative;
+}
+.tox .tox-comment-thread > *:not(:first-child) {
+  margin-top: 8px;
+}
+.tox .tox-comment {
+  background: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1);
+  padding: 8px 8px 16px 8px;
+  position: relative;
+}
+.tox .tox-comment__header {
+  align-items: center;
+  color: #222f3e;
+  display: flex;
+  justify-content: space-between;
+}
+.tox .tox-comment__date {
+  color: rgba(34, 47, 62, 0.7);
+  font-size: 12px;
+}
+.tox .tox-comment__body {
+  color: #222f3e;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin-top: 8px;
+  position: relative;
+  text-transform: initial;
+}
+.tox .tox-comment__body textarea {
+  resize: none;
+  white-space: normal;
+  width: 100%;
+}
+.tox .tox-comment__expander {
+  padding-top: 8px;
+}
+.tox .tox-comment__expander p {
+  color: rgba(34, 47, 62, 0.7);
+  font-size: 14px;
+  font-style: normal;
+}
+.tox .tox-comment__body p {
+  margin: 0;
+}
+.tox .tox-comment__buttonspacing {
+  padding-top: 16px;
+  text-align: center;
+}
+.tox .tox-comment-thread__overlay::after {
+  background: #fff;
+  bottom: 0;
+  content: "";
+  display: flex;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__reply {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 8px;
+}
+.tox .tox-comment__reply > *:first-child {
+  margin-bottom: 8px;
+  width: 100%;
+}
+.tox .tox-comment__edit {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-top: 16px;
+}
+.tox .tox-comment__gradient::after {
+  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
+  bottom: 0;
+  content: "";
+  display: block;
+  height: 5em;
+  margin-top: -40px;
+  position: absolute;
+  width: 100%;
+}
+.tox .tox-comment__overlay {
+  background: #fff;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  left: 0;
+  opacity: 0.9;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  z-index: 5;
+}
+.tox .tox-comment__loading-text {
+  align-items: center;
+  color: #222f3e;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.tox .tox-comment__loading-text > div {
+  padding-bottom: 16px;
+}
+.tox .tox-comment__overlaytext {
+  bottom: 0;
+  flex-direction: column;
+  font-size: 14px;
+  left: 0;
+  padding: 1em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10;
+}
+.tox .tox-comment__overlaytext p {
+  background-color: #fff;
+  box-shadow: 0 0 8px 8px #fff;
+  color: #222f3e;
+  text-align: center;
+}
+.tox .tox-comment__overlaytext div:nth-of-type(2) {
+  font-size: 0.8em;
+}
+.tox .tox-comment__busy-spinner {
+  align-items: center;
+  background-color: #fff;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 20;
+}
+.tox .tox-comment__scroll {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  overflow: auto;
+}
+.tox .tox-conversations {
+  margin: 8px;
+}
+.tox:not([dir=rtl]) .tox-comment__edit {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__edit > *:last-child,
+.tox:not([dir=rtl]) .tox-comment__reply > *:last-child {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-comment__edit {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-comment__buttonspacing > *:last-child,
+.tox[dir=rtl] .tox-comment__edit > *:last-child,
+.tox[dir=rtl] .tox-comment__reply > *:last-child {
+  margin-right: 8px;
+}
+.tox .tox-user {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-user__avatar svg {
+  fill: rgba(34, 47, 62, 0.7);
+}
+.tox .tox-user__name {
+  color: rgba(34, 47, 62, 0.7);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.tox:not([dir=rtl]) .tox-user__avatar svg {
+  margin-right: 8px;
+}
+.tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-user__avatar svg {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-user__avatar + .tox-user__name {
+  margin-right: 8px;
+}
+.tox .tox-dialog-wrap {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1100;
+}
+.tox .tox-dialog-wrap__backdrop {
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+.tox .tox-dialog-wrap__backdrop--opaque {
+  background-color: #fff;
+}
+.tox .tox-dialog {
+  background-color: #fff;
+  border-color: #cccccc;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0 16px 16px -10px rgba(34, 47, 62, 0.15), 0 0 40px 1px rgba(34, 47, 62, 0.15);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 480px;
+  overflow: hidden;
+  position: relative;
+  width: 95vw;
+  z-index: 2;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog {
+    align-self: flex-start;
+    margin: 8px auto;
+    width: calc(100vw - 16px);
+  }
+}
+.tox .tox-dialog-inline {
+  z-index: 1100;
+}
+.tox .tox-dialog__header {
+  align-items: center;
+  background-color: #fff;
+  border-bottom: none;
+  color: #222f3e;
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  padding: 8px 16px 0 16px;
+  position: relative;
+}
+.tox .tox-dialog__header .tox-button {
+  z-index: 1;
+}
+.tox .tox-dialog__draghandle {
+  cursor: grab;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tox .tox-dialog__draghandle:active {
+  cursor: grabbing;
+}
+.tox .tox-dialog__dismiss {
+  margin-left: auto;
+}
+.tox .tox-dialog__title {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  margin: 0;
+  text-transform: none;
+}
+.tox .tox-dialog__body {
+  color: #222f3e;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  min-width: 0;
+  text-align: left;
+  text-transform: none;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body {
+    flex-direction: column;
+  }
+}
+.tox .tox-dialog__body-nav {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 16px;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox .tox-dialog__body-nav {
+    flex-direction: row;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    padding-bottom: 0;
+  }
+}
+.tox .tox-dialog__body-nav-item {
+  border-bottom: 2px solid transparent;
+  color: rgba(34, 47, 62, 0.7);
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 8px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.tox .tox-dialog__body-nav-item:focus {
+  background-color: rgba(32, 122, 183, 0.1);
+}
+.tox .tox-dialog__body-nav-item--active {
+  border-bottom: 2px solid #207ab7;
+  color: #207ab7;
+}
+.tox .tox-dialog__body-content {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+  max-height: 650px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  padding: 16px 16px;
+}
+.tox .tox-dialog__body-content > * {
+  margin-bottom: 0;
+  margin-top: 16px;
+}
+.tox .tox-dialog__body-content > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content > *:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content a {
+  color: #207ab7;
+  cursor: pointer;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:hover,
+.tox .tox-dialog__body-content a:focus {
+  color: #185d8c;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content a:active {
+  color: #185d8c;
+  text-decoration: none;
+}
+.tox .tox-dialog__body-content svg {
+  fill: #222f3e;
+}
+.tox .tox-dialog__body-content ul {
+  display: block;
+  list-style-type: disc;
+  margin-bottom: 16px;
+  -webkit-margin-end: 0;
+          margin-inline-end: 0;
+  -webkit-margin-start: 0;
+          margin-inline-start: 0;
+  -webkit-padding-start: 2.5rem;
+          padding-inline-start: 2.5rem;
+}
+.tox .tox-dialog__body-content .tox-form__group h1 {
+  color: #222f3e;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group h2 {
+  color: #222f3e;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: bold;
+  letter-spacing: normal;
+  margin-bottom: 16px;
+  margin-top: 2rem;
+  text-transform: none;
+}
+.tox .tox-dialog__body-content .tox-form__group p {
+  margin-bottom: 16px;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:first-child,
+.tox .tox-dialog__body-content .tox-form__group h2:first-child,
+.tox .tox-dialog__body-content .tox-form__group p:first-child {
+  margin-top: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:last-child,
+.tox .tox-dialog__body-content .tox-form__group h2:last-child,
+.tox .tox-dialog__body-content .tox-form__group p:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-dialog__body-content .tox-form__group h1:only-child,
+.tox .tox-dialog__body-content .tox-form__group h2:only-child,
+.tox .tox-dialog__body-content .tox-form__group p:only-child {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.tox .tox-dialog--width-lg {
+  height: 650px;
+  max-width: 1200px;
+}
+.tox .tox-dialog--width-md {
+  max-width: 800px;
+}
+.tox .tox-dialog--width-md .tox-dialog__body-content {
+  overflow: auto;
+}
+.tox .tox-dialog__body-content--centered {
+  text-align: center;
+}
+.tox .tox-dialog__footer {
+  align-items: center;
+  background-color: #fff;
+  border-top: 1px solid #cccccc;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 16px;
+}
+.tox .tox-dialog__footer-start,
+.tox .tox-dialog__footer-end {
+  display: flex;
+}
+.tox .tox-dialog__busy-spinner {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.75);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
+}
+.tox .tox-dialog__table {
+  border-collapse: collapse;
+  width: 100%;
+}
+.tox .tox-dialog__table thead th {
+  font-weight: bold;
+  padding-bottom: 8px;
+}
+.tox .tox-dialog__table tbody tr {
+  border-bottom: 1px solid #cccccc;
+}
+.tox .tox-dialog__table tbody tr:last-child {
+  border-bottom: none;
+}
+.tox .tox-dialog__table td {
+  padding-bottom: 8px;
+  padding-top: 8px;
+}
+.tox .tox-dialog__popups {
+  position: absolute;
+  width: 100%;
+  z-index: 1100;
+}
+.tox .tox-dialog__body-iframe {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox .tox-dialog-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox .tox-dialog-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox .tox-dialog-dock-transition {
+  transition: visibility 0s linear 0.3s, opacity 0.3s ease;
+}
+.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein {
+  transition-delay: 0s;
+}
+.tox.tox-platform-ie {
+  /* IE11 CSS styles go here */
+}
+.tox.tox-platform-ie .tox-dialog-wrap {
+  position: -ms-device-fixed;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav {
+    margin-right: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) {
+    margin-left: 8px;
+  }
+}
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-left: 8px;
+}
+.tox[dir=rtl] .tox-dialog__body {
+  text-align: right;
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav {
+    margin-left: 0;
+  }
+}
+@media only screen and (max-width:767px) {
+  body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) {
+    margin-right: 8px;
+  }
+}
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *,
+.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * {
+  margin-right: 8px;
+}
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox .tox-dropzone-container {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dropzone {
+  align-items: center;
+  background: #fff;
+  border: 2px dashed #cccccc;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  min-height: 100px;
+  padding: 10px;
+}
+.tox .tox-dropzone p {
+  color: rgba(34, 47, 62, 0.7);
+  margin: 0 0 16px 0;
+}
+.tox .tox-edit-area {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  overflow: hidden;
+  position: relative;
+}
+.tox .tox-edit-area__iframe {
+  background-color: #fff;
+  border: 0;
+  box-sizing: border-box;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tox.tox-inline-edit-area {
+  border: 1px dotted #cccccc;
+}
+.tox .tox-editor-container {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  overflow: hidden;
+}
+.tox .tox-editor-header {
+  z-index: 1;
+}
+.tox:not(.tox-tinymce-inline) .tox-editor-header {
+  box-shadow: none;
+  transition: box-shadow 0.5s;
+}
+.tox.tox-tinymce--toolbar-bottom .tox-editor-header,
+.tox.tox-tinymce-inline .tox-editor-header {
+  margin-bottom: -1px;
+}
+.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header {
+  background-color: transparent;
+  box-shadow: 0 4px 4px -3px rgba(0, 0, 0, 0.25);
+}
+.tox-editor-dock-fadeout {
+  opacity: 0;
+  visibility: hidden;
+}
+.tox-editor-dock-fadein {
+  opacity: 1;
+  visibility: visible;
+}
+.tox-editor-dock-transition {
+  transition: visibility 0s linear 0.25s, opacity 0.25s ease;
+}
+.tox-editor-dock-transition.tox-editor-dock-fadein {
+  transition-delay: 0s;
+}
+.tox .tox-control-wrap {
+  flex: 1;
+  position: relative;
+}
+.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,
+.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid {
+  display: none;
+}
+.tox .tox-control-wrap svg {
+  display: block;
+}
+.tox .tox-control-wrap__status-icon-wrap {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-control-wrap__status-icon-invalid svg {
+  fill: #c00;
+}
+.tox .tox-control-wrap__status-icon-unknown svg {
+  fill: orange;
+}
+.tox .tox-control-wrap__status-icon-valid svg {
+  fill: green;
+}
+.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,
+.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield {
+  padding-right: 32px;
+}
+.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap {
+  right: 4px;
+}
+.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,
+.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield {
+  padding-left: 32px;
+}
+.tox[dir=rtl] .tox-control-wrap__status-icon-wrap {
+  left: 4px;
+}
+.tox .tox-autocompleter {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-menu {
+  max-width: 25em;
+}
+.tox .tox-autocompleter .tox-autocompleter-highlight {
+  font-weight: bold;
+}
+.tox .tox-color-input {
+  display: flex;
+  position: relative;
+  z-index: 1;
+}
+.tox .tox-color-input .tox-textfield {
+  z-index: -1;
+}
+.tox .tox-color-input span {
+  border-color: rgba(34, 47, 62, 0.2);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  height: 24px;
+  position: absolute;
+  top: 6px;
+  width: 24px;
+}
+.tox .tox-color-input span:hover:not([aria-disabled=true]),
+.tox .tox-color-input span:focus:not([aria-disabled=true]) {
+  border-color: #207ab7;
+  cursor: pointer;
+}
+.tox .tox-color-input span::before {
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%);
+  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
+  background-size: 12px 12px;
+  border: 1px solid #fff;
+  border-radius: 3px;
+  box-sizing: border-box;
+  content: '';
+  height: 24px;
+  left: -1px;
+  position: absolute;
+  top: -1px;
+  width: 24px;
+  z-index: -1;
+}
+.tox .tox-color-input span[aria-disabled=true] {
+  cursor: not-allowed;
+}
+.tox:not([dir=rtl]) .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-color-input .tox-textfield {
+  padding-left: 36px;
+}
+.tox:not([dir=rtl]) .tox-color-input span {
+  left: 6px;
+}
+.tox[dir="rtl"] .tox-color-input {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir="rtl"] .tox-color-input .tox-textfield {
+  padding-right: 36px;
+}
+.tox[dir="rtl"] .tox-color-input span {
+  right: 6px;
+}
+.tox .tox-label,
+.tox .tox-toolbar-label {
+  color: rgba(34, 47, 62, 0.7);
+  display: block;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1.3;
+  padding: 0 8px 0 0;
+  text-transform: none;
+  white-space: nowrap;
+}
+.tox .tox-toolbar-label {
+  padding: 0 8px;
+}
+.tox[dir=rtl] .tox-label {
+  padding: 0 0 0 8px;
+}
+.tox .tox-form {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group {
+  box-sizing: border-box;
+  margin-bottom: 4px;
+}
+.tox .tox-form-group--maximize {
+  flex: 1;
+}
+.tox .tox-form__group--error {
+  color: #c00;
+}
+.tox .tox-form__group--collection {
+  display: flex;
+}
+.tox .tox-form__grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.tox .tox-form__grid--2col > .tox-form__group {
+  width: calc(50% - (8px / 2));
+}
+.tox .tox-form__grid--3col > .tox-form__group {
+  width: calc(100% / 3 - (8px / 2));
+}
+.tox .tox-form__grid--4col > .tox-form__group {
+  width: calc(25% - (8px / 2));
+}
+.tox .tox-form__controls-h-stack {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--inline {
+  align-items: center;
+  display: flex;
+}
+.tox .tox-form__group--stretched {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-textarea {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-form__group--stretched .tox-navobj :nth-child(2) {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 100%;
+}
+.tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) {
+  margin-right: 4px;
+}
+.tox .tox-lock.tox-locked .tox-lock-icon__unlock,
+.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock {
+  display: none;
+}
+.tox .tox-textfield,
+.tox .tox-toolbar-textfield,
+.tox .tox-listboxfield .tox-listbox--select,
+.tox .tox-textarea {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #cccccc;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #222f3e;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 4.75px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-textfield[disabled],
+.tox .tox-textarea[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(34, 47, 62, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-textfield:focus,
+.tox .tox-listboxfield .tox-listbox--select:focus,
+.tox .tox-textarea:focus {
+  background-color: #fff;
+  border-color: #207ab7;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-toolbar-textfield {
+  border-width: 0;
+  margin-bottom: 3px;
+  margin-top: 2px;
+  max-width: 250px;
+}
+.tox .tox-naked-btn {
+  background-color: transparent;
+  border: 0;
+  border-color: transparent;
+  box-shadow: unset;
+  color: #207ab7;
+  cursor: pointer;
+  display: block;
+  margin: 0;
+  padding: 0;
+}
+.tox .tox-naked-btn svg {
+  display: block;
+  fill: #222f3e;
+}
+.tox:not([dir=rtl]) .tox-toolbar-textfield + * {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-toolbar-textfield + * {
+  margin-right: 4px;
+}
+.tox .tox-listboxfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-listboxfield .tox-listbox--select[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(34, 47, 62, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-listbox__select-label {
+  cursor: default;
+  flex: 1;
+  margin: 0 4px;
+}
+.tox .tox-listbox__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+}
+.tox .tox-listbox__select-chevron svg {
+  fill: #222f3e;
+}
+.tox .tox-listboxfield .tox-listbox--select {
+  align-items: center;
+  display: flex;
+}
+.tox:not([dir=rtl]) .tox-listboxfield svg {
+  right: 8px;
+}
+.tox[dir=rtl] .tox-listboxfield svg {
+  left: 8px;
+}
+.tox .tox-selectfield {
+  cursor: pointer;
+  position: relative;
+}
+.tox .tox-selectfield select {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: #fff;
+  border-color: #cccccc;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  color: #222f3e;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0;
+  min-height: 34px;
+  outline: none;
+  padding: 5px 4.75px;
+  resize: none;
+  width: 100%;
+}
+.tox .tox-selectfield select[disabled] {
+  background-color: #f2f2f2;
+  color: rgba(34, 47, 62, 0.85);
+  cursor: not-allowed;
+}
+.tox .tox-selectfield select::-ms-expand {
+  display: none;
+}
+.tox .tox-selectfield select:focus {
+  background-color: #fff;
+  border-color: #207ab7;
+  box-shadow: none;
+  outline: none;
+}
+.tox .tox-selectfield svg {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox:not([dir=rtl]) .tox-selectfield select[size="0"],
+.tox:not([dir=rtl]) .tox-selectfield select[size="1"] {
+  padding-right: 24px;
+}
+.tox:not([dir=rtl]) .tox-selectfield svg {
+  right: 8px;
+}
+.tox[dir=rtl] .tox-selectfield select[size="0"],
+.tox[dir=rtl] .tox-selectfield select[size="1"] {
+  padding-left: 24px;
+}
+.tox[dir=rtl] .tox-selectfield svg {
+  left: 8px;
+}
+.tox .tox-textarea {
+  -webkit-appearance: textarea;
+     -moz-appearance: textarea;
+          appearance: textarea;
+  white-space: pre-wrap;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+  z-index: 1200;
+}
+.tox-shadowhost.tox-fullscreen {
+  z-index: 1200;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
+.tox .tox-help__more-link {
+  list-style: none;
+  margin-top: 1em;
+}
+.tox .tox-image-tools {
+  width: 100%;
+}
+.tox .tox-image-tools__toolbar {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.tox .tox-image-tools__image {
+  background-color: #666;
+  height: 380px;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+.tox .tox-image-tools__image,
+.tox .tox-image-tools__image + .tox-image-tools__toolbar {
+  margin-top: 8px;
+}
+.tox .tox-image-tools__image-bg {
+  background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==);
+}
+.tox .tox-image-tools__toolbar > .tox-spacer {
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-croprect-block {
+  background: black;
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+  position: absolute;
+  zoom: 1;
+}
+.tox .tox-croprect-handle {
+  border: 2px solid white;
+  height: 20px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 20px;
+}
+.tox .tox-croprect-handle-move {
+  border: 0;
+  cursor: move;
+  position: absolute;
+}
+.tox .tox-croprect-handle-nw {
+  border-width: 2px 0 0 2px;
+  cursor: nw-resize;
+  left: 100px;
+  margin: -2px 0 0 -2px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-ne {
+  border-width: 2px 2px 0 0;
+  cursor: ne-resize;
+  left: 200px;
+  margin: -2px 0 0 -20px;
+  top: 100px;
+}
+.tox .tox-croprect-handle-sw {
+  border-width: 0 0 2px 2px;
+  cursor: sw-resize;
+  left: 100px;
+  margin: -20px 2px 0 -2px;
+  top: 200px;
+}
+.tox .tox-croprect-handle-se {
+  border-width: 0 2px 2px 0;
+  cursor: se-resize;
+  left: 200px;
+  margin: -20px 0 0 -20px;
+  top: 200px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-left: 8px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-left: 32px;
+}
+.tox:not([dir=rtl]) .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-left: 32px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) {
+  margin-right: 8px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-button + .tox-slider {
+  margin-right: 32px;
+}
+.tox[dir=rtl] .tox-image-tools__toolbar > .tox-slider + .tox-button {
+  margin-right: 32px;
+}
+.tox .tox-insert-table-picker {
+  display: flex;
+  flex-wrap: wrap;
+  width: 170px;
+}
+.tox .tox-insert-table-picker > div {
+  border-color: #cccccc;
+  border-style: solid;
+  border-width: 0 1px 1px 0;
+  box-sizing: border-box;
+  height: 17px;
+  width: 17px;
+}
+.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker {
+  margin: -4px 0;
+}
+.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
+  background-color: rgba(32, 122, 183, 0.5);
+  border-color: rgba(32, 122, 183, 0.5);
+}
+.tox .tox-insert-table-picker__label {
+  color: rgba(34, 47, 62, 0.7);
+  display: block;
+  font-size: 14px;
+  padding: 4px;
+  text-align: center;
+  width: 100%;
+}
+.tox:not([dir=rtl]) {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) {
+  border-right: 0;
+}
+.tox[dir=rtl] {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) {
+  border-right: 0;
+}
+.tox {
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+.tox .tox-menu {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1);
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  z-index: 1150;
+}
+.tox .tox-menu.tox-collection.tox-collection--list {
+  padding: 0;
+}
+.tox .tox-menu.tox-collection.tox-collection--toolbar {
+  padding: 4px;
+}
+.tox .tox-menu.tox-collection.tox-collection--grid {
+  padding: 4px;
+}
+.tox .tox-menu__label h1,
+.tox .tox-menu__label h2,
+.tox .tox-menu__label h3,
+.tox .tox-menu__label h4,
+.tox .tox-menu__label h5,
+.tox .tox-menu__label h6,
+.tox .tox-menu__label p,
+.tox .tox-menu__label blockquote,
+.tox .tox-menu__label code {
+  margin: 0;
+}
+.tox .tox-menubar {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;
+  background-color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 4px 0 4px;
+}
+.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar {
+  border-top: 1px solid #cccccc;
+}
+/* Deprecated. Remove in next major release */
+.tox .tox-mbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #222f3e;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0 4px;
+  text-transform: none;
+  width: auto;
+}
+.tox .tox-mbtn[disabled] {
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-mbtn:focus:not(:disabled) {
+  background: #dee0e2;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-mbtn--active {
+  background: #c8cbcf;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
+  background: #dee0e2;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-mbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-mbtn[disabled] .tox-mbtn__select-label {
+  cursor: not-allowed;
+}
+.tox .tox-mbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+  display: none;
+}
+.tox .tox-notification {
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: -ms-grid;
+  display: grid;
+  font-size: 14px;
+  font-weight: normal;
+  -ms-grid-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+      grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
+  margin-top: 4px;
+  opacity: 0;
+  padding: 4px;
+  transition: transform 100ms ease-in, opacity 150ms ease-in;
+}
+.tox .tox-notification p {
+  font-size: 14px;
+  font-weight: normal;
+}
+.tox .tox-notification a {
+  text-decoration: underline;
+}
+.tox .tox-notification--in {
+  opacity: 1;
+}
+.tox .tox-notification--success {
+  background-color: #e4eeda;
+  border-color: #d7e6c8;
+  color: #222f3e;
+}
+.tox .tox-notification--success p {
+  color: #222f3e;
+}
+.tox .tox-notification--success a {
+  color: #547831;
+}
+.tox .tox-notification--success svg {
+  fill: #222f3e;
+}
+.tox .tox-notification--error {
+  background-color: #f8dede;
+  border-color: #f2bfbf;
+  color: #222f3e;
+}
+.tox .tox-notification--error p {
+  color: #222f3e;
+}
+.tox .tox-notification--error a {
+  color: #c00;
+}
+.tox .tox-notification--error svg {
+  fill: #222f3e;
+}
+.tox .tox-notification--warn,
+.tox .tox-notification--warning {
+  background-color: #fffaea;
+  border-color: #ffe89d;
+  color: #222f3e;
+}
+.tox .tox-notification--warn p,
+.tox .tox-notification--warning p {
+  color: #222f3e;
+}
+.tox .tox-notification--warn a,
+.tox .tox-notification--warning a {
+  color: #222f3e;
+}
+.tox .tox-notification--warn svg,
+.tox .tox-notification--warning svg {
+  fill: #222f3e;
+}
+.tox .tox-notification--info {
+  background-color: #d9edf7;
+  border-color: #779ecb;
+  color: #222f3e;
+}
+.tox .tox-notification--info p {
+  color: #222f3e;
+}
+.tox .tox-notification--info a {
+  color: #222f3e;
+}
+.tox .tox-notification--info svg {
+  fill: #222f3e;
+}
+.tox .tox-notification__body {
+  -ms-grid-row-align: center;
+      align-self: center;
+  color: #222f3e;
+  font-size: 14px;
+  -ms-grid-column-span: 1;
+  grid-column-end: 3;
+  -ms-grid-column: 2;
+      grid-column-start: 2;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  text-align: center;
+  white-space: normal;
+  word-break: break-all;
+  word-break: break-word;
+}
+.tox .tox-notification__body > * {
+  margin: 0;
+}
+.tox .tox-notification__body > * + * {
+  margin-top: 1rem;
+}
+.tox .tox-notification__icon {
+  -ms-grid-row-align: center;
+      align-self: center;
+  -ms-grid-column-span: 1;
+  grid-column-end: 2;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification__icon svg {
+  display: block;
+}
+.tox .tox-notification__dismiss {
+  -ms-grid-row-align: start;
+      align-self: start;
+  -ms-grid-column-span: 1;
+  grid-column-end: 4;
+  -ms-grid-column: 3;
+      grid-column-start: 3;
+  -ms-grid-row-span: 1;
+  grid-row-end: 2;
+  -ms-grid-row: 1;
+      grid-row-start: 1;
+  -ms-grid-column-align: end;
+      justify-self: end;
+}
+.tox .tox-notification .tox-progress-bar {
+  -ms-grid-column-span: 3;
+  grid-column-end: 4;
+  -ms-grid-column: 1;
+      grid-column-start: 1;
+  -ms-grid-row-span: 1;
+  grid-row-end: 3;
+  -ms-grid-row: 2;
+      grid-row-start: 2;
+  -ms-grid-column-align: center;
+      justify-self: center;
+}
+.tox .tox-pop {
+  display: inline-block;
+  position: relative;
+}
+.tox .tox-pop--resizing {
+  transition: width 0.1s ease;
+}
+.tox .tox-pop--resizing .tox-toolbar {
+  flex-wrap: nowrap;
+}
+.tox .tox-pop__dialog {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  min-width: 0;
+  overflow: hidden;
+}
+.tox .tox-pop__dialog > *:not(.tox-toolbar) {
+  margin: 4px 4px 4px 8px;
+}
+.tox .tox-pop__dialog .tox-toolbar {
+  background-color: transparent;
+  margin-bottom: -1px;
+}
+.tox .tox-pop::before,
+.tox .tox-pop::after {
+  border-style: solid;
+  content: '';
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+.tox .tox-pop.tox-pop--bottom::before,
+.tox .tox-pop.tox-pop--bottom::after {
+  left: 50%;
+  top: 100%;
+}
+.tox .tox-pop.tox-pop--bottom::after {
+  border-color: #fff transparent transparent transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: -1px;
+}
+.tox .tox-pop.tox-pop--bottom::before {
+  border-color: #cccccc transparent transparent transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--top::before,
+.tox .tox-pop.tox-pop--top::after {
+  left: 50%;
+  top: 0;
+  transform: translateY(-100%);
+}
+.tox .tox-pop.tox-pop--top::after {
+  border-color: transparent transparent #fff transparent;
+  border-width: 8px;
+  margin-left: -8px;
+  margin-top: 1px;
+}
+.tox .tox-pop.tox-pop--top::before {
+  border-color: transparent transparent #cccccc transparent;
+  border-width: 9px;
+  margin-left: -9px;
+}
+.tox .tox-pop.tox-pop--left::before,
+.tox .tox-pop.tox-pop--left::after {
+  left: 0;
+  top: calc(50% - 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--left::after {
+  border-color: transparent #fff transparent transparent;
+  border-width: 8px;
+  margin-left: -15px;
+}
+.tox .tox-pop.tox-pop--left::before {
+  border-color: transparent #cccccc transparent transparent;
+  border-width: 10px;
+  margin-left: -19px;
+}
+.tox .tox-pop.tox-pop--right::before,
+.tox .tox-pop.tox-pop--right::after {
+  left: 100%;
+  top: calc(50% + 1px);
+  transform: translateY(-50%);
+}
+.tox .tox-pop.tox-pop--right::after {
+  border-color: transparent transparent transparent #fff;
+  border-width: 8px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--right::before {
+  border-color: transparent transparent transparent #cccccc;
+  border-width: 10px;
+  margin-left: -1px;
+}
+.tox .tox-pop.tox-pop--align-left::before,
+.tox .tox-pop.tox-pop--align-left::after {
+  left: 20px;
+}
+.tox .tox-pop.tox-pop--align-right::before,
+.tox .tox-pop.tox-pop--align-right::after {
+  left: calc(100% - 20px);
+}
+.tox .tox-sidebar-wrap {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  -ms-flex-preferred-size: 0;
+  min-height: 0;
+}
+.tox .tox-sidebar {
+  background-color: #fff;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}
+.tox .tox-sidebar__slider {
+  display: flex;
+  overflow: hidden;
+}
+.tox .tox-sidebar__pane-container {
+  display: flex;
+}
+.tox .tox-sidebar__pane {
+  display: flex;
+}
+.tox .tox-sidebar--sliding-closed {
+  opacity: 0;
+}
+.tox .tox-sidebar--sliding-open {
+  opacity: 1;
+}
+.tox .tox-sidebar--sliding-growing,
+.tox .tox-sidebar--sliding-shrinking {
+  transition: width 0.5s ease, opacity 0.5s ease;
+}
+.tox .tox-selector {
+  background-color: #4099ff;
+  border-color: #4099ff;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  display: inline-block;
+  height: 10px;
+  position: absolute;
+  width: 10px;
+}
+.tox.tox-platform-touch .tox-selector {
+  height: 12px;
+  width: 12px;
+}
+.tox .tox-slider {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+  height: 24px;
+  justify-content: center;
+  position: relative;
+}
+.tox .tox-slider__rail {
+  background-color: transparent;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  height: 10px;
+  min-width: 120px;
+  width: 100%;
+}
+.tox .tox-slider__handle {
+  background-color: #207ab7;
+  border: 2px solid #185d8c;
+  border-radius: 3px;
+  box-shadow: none;
+  height: 24px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  width: 14px;
+}
+.tox .tox-source-code {
+  overflow: auto;
+}
+.tox .tox-spinner {
+  display: flex;
+}
+.tox .tox-spinner > div {
+  animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both;
+  background-color: rgba(34, 47, 62, 0.7);
+  border-radius: 100%;
+  height: 8px;
+  width: 8px;
+}
+.tox .tox-spinner > div:nth-child(1) {
+  animation-delay: -0.32s;
+}
+.tox .tox-spinner > div:nth-child(2) {
+  animation-delay: -0.16s;
+}
+@keyframes tam-bouncing-dots {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+.tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) {
+  margin-left: 4px;
+}
+.tox[dir=rtl] .tox-spinner > div:not(:first-child) {
+  margin-right: 4px;
+}
+.tox .tox-statusbar {
+  align-items: center;
+  background-color: #fff;
+  border-top: 1px solid #cccccc;
+  color: rgba(34, 47, 62, 0.7);
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 12px;
+  font-weight: normal;
+  height: 18px;
+  overflow: hidden;
+  padding: 0 8px;
+  position: relative;
+  text-transform: uppercase;
+}
+.tox .tox-statusbar__text-container {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  overflow: hidden;
+}
+.tox .tox-statusbar__path {
+  display: flex;
+  flex: 1 1 auto;
+  margin-right: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__path > * {
+  display: inline;
+  white-space: nowrap;
+}
+.tox .tox-statusbar__wordcount {
+  flex: 0 0 auto;
+  margin-left: 1ch;
+}
+.tox .tox-statusbar a,
+.tox .tox-statusbar__path-item,
+.tox .tox-statusbar__wordcount {
+  color: rgba(34, 47, 62, 0.7);
+  text-decoration: none;
+}
+.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),
+.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]) {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.tox .tox-statusbar__resize-handle {
+  align-items: flex-end;
+  align-self: stretch;
+  cursor: nwse-resize;
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-left: auto;
+  margin-right: -8px;
+  padding-left: 1ch;
+}
+.tox .tox-statusbar__resize-handle svg {
+  display: block;
+  fill: rgba(34, 47, 62, 0.7);
+}
+.tox .tox-statusbar__resize-handle:focus svg {
+  background-color: #dee0e2;
+  border-radius: 1px;
+  box-shadow: 0 0 0 2px #dee0e2;
+}
+.tox:not([dir=rtl]) .tox-statusbar__path > * {
+  margin-right: 4px;
+}
+.tox:not([dir=rtl]) .tox-statusbar__branding {
+  margin-left: 1ch;
+}
+.tox[dir=rtl] .tox-statusbar {
+  flex-direction: row-reverse;
+}
+.tox[dir=rtl] .tox-statusbar__path > * {
+  margin-left: 4px;
+}
+.tox .tox-throbber {
+  z-index: 1299;
+}
+.tox .tox-throbber__busy-spinner {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.6);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.tox .tox-tbtn {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  box-shadow: none;
+  color: #222f3e;
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  height: 34px;
+  justify-content: center;
+  margin: 2px 0 3px 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  text-transform: none;
+  width: 34px;
+}
+.tox .tox-tbtn svg {
+  display: block;
+  fill: #222f3e;
+}
+.tox .tox-tbtn.tox-tbtn-more {
+  padding-left: 5px;
+  padding-right: 5px;
+  width: inherit;
+}
+.tox .tox-tbtn:focus {
+  background: #dee0e2;
+  border: 0;
+  box-shadow: none;
+}
+.tox .tox-tbtn:hover {
+  background: #dee0e2;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-tbtn:hover svg {
+  fill: #222f3e;
+}
+.tox .tox-tbtn:active {
+  background: #c8cbcf;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-tbtn:active svg {
+  fill: #222f3e;
+}
+.tox .tox-tbtn--disabled,
+.tox .tox-tbtn--disabled:hover,
+.tox .tox-tbtn:disabled,
+.tox .tox-tbtn:disabled:hover {
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+  cursor: not-allowed;
+}
+.tox .tox-tbtn--disabled svg,
+.tox .tox-tbtn--disabled:hover svg,
+.tox .tox-tbtn:disabled svg,
+.tox .tox-tbtn:disabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-tbtn--enabled,
+.tox .tox-tbtn--enabled:hover {
+  background: #c8cbcf;
+  border: 0;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-tbtn--enabled > *,
+.tox .tox-tbtn--enabled:hover > * {
+  transform: none;
+}
+.tox .tox-tbtn--enabled svg,
+.tox .tox-tbtn--enabled:hover svg {
+  /* stylelint-disable-line no-descending-specificity */
+  fill: #222f3e;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) {
+  color: #222f3e;
+}
+.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg {
+  fill: #222f3e;
+}
+.tox .tox-tbtn:active > * {
+  transform: none;
+}
+.tox .tox-tbtn--md {
+  height: 51px;
+  width: 51px;
+}
+.tox .tox-tbtn--lg {
+  flex-direction: column;
+  height: 68px;
+  width: 68px;
+}
+.tox .tox-tbtn--return {
+  -ms-grid-row-align: stretch;
+      align-self: stretch;
+  height: unset;
+  width: 16px;
+}
+.tox .tox-tbtn--labeled {
+  padding: 0 4px;
+  width: unset;
+}
+.tox .tox-tbtn__vlabel {
+  display: block;
+  font-size: 10px;
+  font-weight: normal;
+  letter-spacing: -0.025em;
+  margin-bottom: 4px;
+  white-space: nowrap;
+}
+.tox .tox-tbtn--select {
+  margin: 2px 0 3px 0;
+  padding: 0 4px;
+  width: auto;
+}
+.tox .tox-tbtn__select-label {
+  cursor: default;
+  font-weight: normal;
+  margin: 0 4px;
+}
+.tox .tox-tbtn__select-chevron {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 16px;
+}
+.tox .tox-tbtn__select-chevron svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-tbtn--bespoke .tox-tbtn__select-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 7em;
+}
+.tox .tox-split-button {
+  border: 0;
+  border-radius: 3px;
+  box-sizing: border-box;
+  display: flex;
+  margin: 2px 0 3px 0;
+  overflow: hidden;
+}
+.tox .tox-split-button:hover {
+  box-shadow: 0 0 0 1px #dee0e2 inset;
+}
+.tox .tox-split-button:focus {
+  background: #dee0e2;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-split-button > * {
+  border-radius: 0;
+}
+.tox .tox-split-button__chevron {
+  width: 16px;
+}
+.tox .tox-split-button__chevron svg {
+  fill: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-split-button .tox-tbtn {
+  margin: 0;
+}
+.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child {
+  width: 30px;
+}
+.tox.tox-platform-touch .tox-split-button__chevron {
+  width: 20px;
+}
+.tox .tox-split-button.tox-tbtn--disabled:hover,
+.tox .tox-split-button.tox-tbtn--disabled:focus,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,
+.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus {
+  background: transparent;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-toolbar-overlord {
+  background-color: #fff;
+}
+.tox .tox-toolbar,
+.tox .tox-toolbar__primary,
+.tox .tox-toolbar__overflow {
+  background: url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;
+  background-color: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  padding: 0 0;
+}
+.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed {
+  height: 0;
+  opacity: 0;
+  padding-bottom: 0;
+  padding-top: 0;
+  visibility: hidden;
+}
+.tox .tox-toolbar__overflow--growing {
+  transition: height 0.3s ease, opacity 0.2s linear 0.1s;
+}
+.tox .tox-toolbar__overflow--shrinking {
+  transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s;
+}
+.tox .tox-menubar + .tox-toolbar,
+.tox .tox-menubar + .tox-toolbar-overlord .tox-toolbar__primary {
+  border-top: 1px solid #cccccc;
+  margin-top: -1px;
+}
+.tox .tox-toolbar--scrolling {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+.tox .tox-pop .tox-toolbar {
+  border-width: 0;
+}
+.tox .tox-toolbar--no-divider {
+  background-image: none;
+}
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child,
+.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary {
+  border-top: 1px solid #cccccc;
+}
+.tox.tox-tinymce-aux .tox-toolbar__overflow {
+  background-color: #fff;
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+}
+.tox[dir=rtl] .tox-tbtn__icon-rtl svg {
+  transform: rotateY(180deg);
+}
+.tox .tox-toolbar__group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0;
+  padding: 0 4px 0 4px;
+}
+.tox .tox-toolbar__group--pull-right {
+  margin-left: auto;
+}
+.tox .tox-toolbar--scrolling .tox-toolbar__group {
+  flex-shrink: 0;
+  flex-wrap: nowrap;
+}
+.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
+  border-right: 1px solid #cccccc;
+}
+.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) {
+  border-left: 1px solid #cccccc;
+}
+.tox .tox-tooltip {
+  display: inline-block;
+  padding: 8px;
+  position: relative;
+}
+.tox .tox-tooltip__body {
+  background-color: #222f3e;
+  border-radius: 3px;
+  box-shadow: 0 2px 4px rgba(34, 47, 62, 0.3);
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: normal;
+  padding: 4px 8px;
+  text-transform: none;
+}
+.tox .tox-tooltip__arrow {
+  position: absolute;
+}
+.tox .tox-tooltip--down .tox-tooltip__arrow {
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-top: 8px solid #222f3e;
+  bottom: 0;
+  left: 50%;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--up .tox-tooltip__arrow {
+  border-bottom: 8px solid #222f3e;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  left: 50%;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+.tox .tox-tooltip--right .tox-tooltip__arrow {
+  border-bottom: 8px solid transparent;
+  border-left: 8px solid #222f3e;
+  border-top: 8px solid transparent;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-tooltip--left .tox-tooltip__arrow {
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid #222f3e;
+  border-top: 8px solid transparent;
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tox .tox-well {
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  padding: 8px;
+  width: 100%;
+}
+.tox .tox-well > *:first-child {
+  margin-top: 0;
+}
+.tox .tox-well > *:last-child {
+  margin-bottom: 0;
+}
+.tox .tox-well > *:only-child {
+  margin: 0;
+}
+.tox .tox-custom-editor {
+  border: 1px solid #cccccc;
+  border-radius: 3px;
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+/* stylelint-disable */
+.tox {
+  /* stylelint-enable */
+}
+.tox .tox-dialog-loading::before {
+  background-color: rgba(0, 0, 0, 0.5);
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 100%;
+  z-index: 1000;
+}
+.tox .tox-tab {
+  cursor: pointer;
+}
+.tox .tox-dialog__content-js {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-dialog__body-content .tox-collection {
+  display: flex;
+  flex: 1;
+  -ms-flex-preferred-size: auto;
+}
+.tox .tox-image-tools-edit-panel {
+  height: 60px;
+}
+.tox .tox-image-tools__sidebar {
+  height: 60px;
+}
diff --git a/ui/public/tinymce/skins/ui/oxide/skin.min.css b/ui/public/tinymce/skins/ui/oxide/skin.min.css
new file mode 100644
index 0000000..2a00fac
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/skin.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tox{box-shadow:none;box-sizing:content-box;color:#222f3e;cursor:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;font-style:normal;font-weight:400;line-height:normal;-webkit-tap-highlight-color:transparent;text-decoration:none;text-shadow:none;text-transform:none;vertical-align:initial;white-space:normal}.tox :not(svg):not(rect){box-sizing:inherit;color:inherit;cursor:inherit;direction:inherit;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;-webkit-tap-highlight-color:inherit;text-align:inherit;text-decoration:inherit;text-shadow:inherit;text-transform:inherit;vertical-align:inherit;white-space:inherit}.tox :not(svg):not(rect){background:0 0;border:0;box-shadow:none;float:none;height:auto;margin:0;max-width:none;outline:0;padding:0;position:static;width:auto}.tox:not([dir=rtl]){direction:ltr;text-align:left}.tox[dir=rtl]{direction:rtl;text-align:right}.tox-tinymce{border:1px solid #ccc;border-radius:0;box-shadow:none;box-sizing:border-box;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;overflow:hidden;position:relative;visibility:inherit!important}.tox-tinymce-inline{border:none;box-shadow:none}.tox-tinymce-inline .tox-editor-header{background-color:transparent;border:1px solid #ccc;border-radius:0;box-shadow:none}.tox-tinymce-aux{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;z-index:1300}.tox-tinymce :focus,.tox-tinymce-aux :focus{outline:0}button::-moz-focus-inner{border:0}.tox .accessibility-issue__header{align-items:center;display:flex;margin-bottom:4px}.tox .accessibility-issue__description{align-items:stretch;border:1px solid #ccc;border-radius:3px;display:flex;justify-content:space-between}.tox .accessibility-issue__description>div{padding-bottom:4px}.tox .accessibility-issue__description>div>div{align-items:center;display:flex;margin-bottom:4px}.tox .accessibility-issue__description>:last-child:not(:only-child){border-color:#ccc;border-style:solid}.tox .accessibility-issue__repair{margin-top:16px}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description{background-color:rgba(32,122,183,.1);border-color:rgba(32,122,183,.4);color:#222f3e}.tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description>:last-child{border-color:rgba(32,122,183,.4)}.tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2{color:#207ab7}.tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg{fill:#207ab7}.tox .tox-dialog__body-content .accessibility-issue--info a .tox-icon{color:#207ab7}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description{background-color:rgba(255,165,0,.1);border-color:rgba(255,165,0,.5);color:#222f3e}.tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description>:last-child{border-color:rgba(255,165,0,.5)}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2{color:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg{fill:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--warn a .tox-icon{color:#cc8500}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description{background-color:rgba(204,0,0,.1);border-color:rgba(204,0,0,.4);color:#222f3e}.tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description>:last-child{border-color:rgba(204,0,0,.4)}.tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2{color:#c00}.tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg{fill:#c00}.tox .tox-dialog__body-content .accessibility-issue--error a .tox-icon{color:#c00}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description{background-color:rgba(120,171,70,.1);border-color:rgba(120,171,70,.4);color:#222f3e}.tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description>:last-child{border-color:rgba(120,171,70,.4)}.tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2{color:#78ab46}.tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg{fill:#78ab46}.tox .tox-dialog__body-content .accessibility-issue--success a .tox-icon{color:#78ab46}.tox .tox-dialog__body-content .accessibility-issue__header h1,.tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2{margin-top:0}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-left:4px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-left:auto}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description{padding:4px 4px 4px 8px}.tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description>:last-child{border-left-width:1px;padding-left:4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button{margin-right:4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header>:nth-last-child(2){margin-right:auto}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description{padding:4px 8px 4px 4px}.tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description>:last-child{border-right-width:1px;padding-right:4px}.tox .tox-anchorbar{display:flex;flex:0 0 auto}.tox .tox-bar{display:flex;flex:0 0 auto}.tox .tox-button{background-color:#207ab7;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#207ab7;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:14px;font-style:normal;font-weight:700;letter-spacing:normal;line-height:24px;margin:0;outline:0;padding:4px 16px;text-align:center;text-decoration:none;text-transform:none;white-space:nowrap}.tox .tox-button[disabled]{background-color:#207ab7;background-image:none;border-color:#207ab7;box-shadow:none;color:rgba(255,255,255,.5);cursor:not-allowed}.tox .tox-button:focus:not(:disabled){background-color:#1c6ca1;background-image:none;border-color:#1c6ca1;box-shadow:none;color:#fff}.tox .tox-button:hover:not(:disabled){background-color:#1c6ca1;background-image:none;border-color:#1c6ca1;box-shadow:none;color:#fff}.tox .tox-button:active:not(:disabled){background-color:#185d8c;background-image:none;border-color:#185d8c;box-shadow:none;color:#fff}.tox .tox-button--secondary{background-color:#f0f0f0;background-image:none;background-position:0 0;background-repeat:repeat;border-color:#f0f0f0;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;color:#222f3e;font-size:14px;font-style:normal;font-weight:700;letter-spacing:normal;outline:0;padding:4px 16px;text-decoration:none;text-transform:none}.tox .tox-button--secondary[disabled]{background-color:#f0f0f0;background-image:none;border-color:#f0f0f0;box-shadow:none;color:rgba(34,47,62,.5)}.tox .tox-button--secondary:focus:not(:disabled){background-color:#e3e3e3;background-image:none;border-color:#e3e3e3;box-shadow:none;color:#222f3e}.tox .tox-button--secondary:hover:not(:disabled){background-color:#e3e3e3;background-image:none;border-color:#e3e3e3;box-shadow:none;color:#222f3e}.tox .tox-button--secondary:active:not(:disabled){background-color:#d6d6d6;background-image:none;border-color:#d6d6d6;box-shadow:none;color:#222f3e}.tox .tox-button--icon,.tox .tox-button.tox-button--icon,.tox .tox-button.tox-button--secondary.tox-button--icon{padding:4px}.tox .tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--icon .tox-icon svg,.tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg{display:block;fill:currentColor}.tox .tox-button-link{background:0;border:none;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;padding:0;white-space:nowrap}.tox .tox-button-link--sm{font-size:14px}.tox .tox-button--naked{background-color:transparent;border-color:transparent;box-shadow:unset;color:#222f3e}.tox .tox-button--naked[disabled]{background-color:#f0f0f0;border-color:#f0f0f0;box-shadow:none;color:rgba(34,47,62,.5)}.tox .tox-button--naked:hover:not(:disabled){background-color:#e3e3e3;border-color:#e3e3e3;box-shadow:none;color:#222f3e}.tox .tox-button--naked:focus:not(:disabled){background-color:#e3e3e3;border-color:#e3e3e3;box-shadow:none;color:#222f3e}.tox .tox-button--naked:active:not(:disabled){background-color:#d6d6d6;border-color:#d6d6d6;box-shadow:none;color:#222f3e}.tox .tox-button--naked .tox-icon svg{fill:currentColor}.tox .tox-button--naked.tox-button--icon:hover:not(:disabled){color:#222f3e}.tox .tox-checkbox{align-items:center;border-radius:3px;cursor:pointer;display:flex;height:36px;min-width:36px}.tox .tox-checkbox__input{height:1px;overflow:hidden;position:absolute;top:auto;width:1px}.tox .tox-checkbox__icons{align-items:center;border-radius:3px;box-shadow:0 0 0 2px transparent;box-sizing:content-box;display:flex;height:24px;justify-content:center;padding:calc(4px - 1px);width:24px}.tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:block;fill:rgba(34,47,62,.3)}.tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:none;fill:#207ab7}.tox .tox-checkbox__icons .tox-checkbox-icon__checked svg{display:none;fill:#207ab7}.tox .tox-checkbox--disabled{color:rgba(34,47,62,.5);cursor:not-allowed}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg{fill:rgba(34,47,62,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg{fill:rgba(34,47,62,.5)}.tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{fill:rgba(34,47,62,.5)}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:checked+.tox-checkbox__icons .tox-checkbox-icon__checked svg{display:block}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__unchecked svg{display:none}.tox input.tox-checkbox__input:indeterminate+.tox-checkbox__icons .tox-checkbox-icon__indeterminate svg{display:block}.tox input.tox-checkbox__input:focus+.tox-checkbox__icons{border-radius:3px;box-shadow:inset 0 0 0 1px #207ab7;padding:calc(4px - 1px)}.tox:not([dir=rtl]) .tox-checkbox__label{margin-left:4px}.tox:not([dir=rtl]) .tox-checkbox__input{left:-10000px}.tox:not([dir=rtl]) .tox-bar .tox-checkbox{margin-left:4px}.tox[dir=rtl] .tox-checkbox__label{margin-right:4px}.tox[dir=rtl] .tox-checkbox__input{right:-10000px}.tox[dir=rtl] .tox-bar .tox-checkbox{margin-right:4px}.tox .tox-collection--toolbar .tox-collection__group{display:flex;padding:0}.tox .tox-collection--grid .tox-collection__group{display:flex;flex-wrap:wrap;max-height:208px;overflow-x:hidden;overflow-y:auto;padding:0}.tox .tox-collection--list .tox-collection__group{border-bottom-width:0;border-color:#ccc;border-left-width:0;border-right-width:0;border-style:solid;border-top-width:1px;padding:4px 0}.tox .tox-collection--list .tox-collection__group:first-child{border-top-width:0}.tox .tox-collection__group-heading{background-color:#e6e6e6;color:rgba(34,47,62,.7);cursor:default;font-size:12px;font-style:normal;font-weight:400;margin-bottom:4px;margin-top:-4px;padding:4px 8px;text-transform:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection__item{align-items:center;color:#222f3e;cursor:pointer;display:flex;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tox .tox-collection--list .tox-collection__item{padding:4px 8px}.tox .tox-collection--toolbar .tox-collection__item{border-radius:3px;padding:4px}.tox .tox-collection--grid .tox-collection__item{border-radius:3px;padding:4px}.tox .tox-collection--list .tox-collection__item--enabled{background-color:#fff;color:#222f3e}.tox .tox-collection--list .tox-collection__item--active{background-color:#dee0e2}.tox .tox-collection--toolbar .tox-collection__item--enabled{background-color:#c8cbcf;color:#222f3e}.tox .tox-collection--toolbar .tox-collection__item--active{background-color:#dee0e2}.tox .tox-collection--grid .tox-collection__item--enabled{background-color:#c8cbcf;color:#222f3e}.tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled){background-color:#dee0e2;color:#222f3e}.tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:#222f3e}.tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled){color:#222f3e}.tox .tox-collection__item--state-disabled{background-color:transparent;color:rgba(34,47,62,.5);cursor:not-allowed}.tox .tox-collection__item-checkmark,.tox .tox-collection__item-icon{align-items:center;display:flex;height:24px;justify-content:center;width:24px}.tox .tox-collection__item-checkmark svg,.tox .tox-collection__item-icon svg{fill:currentColor}.tox .tox-collection--toolbar-lg .tox-collection__item-icon{height:48px;width:48px}.tox .tox-collection__item-label{color:currentColor;display:inline-block;flex:1;-ms-flex-preferred-size:auto;font-size:14px;font-style:normal;font-weight:400;line-height:24px;text-transform:none;word-break:break-all}.tox .tox-collection__item-accessory{color:rgba(34,47,62,.7);display:inline-block;font-size:14px;height:24px;line-height:24px;text-transform:none}.tox .tox-collection__item-caret{align-items:center;display:flex;min-height:24px}.tox .tox-collection__item-caret::after{content:'';font-size:0;min-height:inherit}.tox .tox-collection__item-caret svg{fill:#222f3e}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg{display:none}.tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory+.tox-collection__item-checkmark{display:none}.tox .tox-collection--horizontal{background-color:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:nowrap;margin-bottom:0;overflow-x:auto;padding:0}.tox .tox-collection--horizontal .tox-collection__group{align-items:center;display:flex;flex-wrap:nowrap;margin:0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item{height:34px;margin:2px 0 3px 0;padding:0 4px}.tox .tox-collection--horizontal .tox-collection__item-label{white-space:nowrap}.tox .tox-collection--horizontal .tox-collection__item-caret{margin-left:4px}.tox .tox-collection__item-container{display:flex}.tox .tox-collection__item-container--row{align-items:center;flex:1 1 auto;flex-direction:row}.tox .tox-collection__item-container--row.tox-collection__item-container--align-left{margin-right:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--align-right{justify-content:flex-end;margin-left:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-top{align-items:flex-start;margin-bottom:auto}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle{align-items:center}.tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom{align-items:flex-end;margin-top:auto}.tox .tox-collection__item-container--column{-ms-grid-row-align:center;align-self:center;flex:1 1 auto;flex-direction:column}.tox .tox-collection__item-container--column.tox-collection__item-container--align-left{align-items:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--align-right{align-items:flex-end}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-top{align-self:flex-start}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle{-ms-grid-row-align:center;align-self:center}.tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom{align-self:flex-end}.tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-right:1px solid #ccc}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>:not(:first-child){margin-left:8px}.tox:not([dir=rtl]) .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-left:4px}.tox:not([dir=rtl]) .tox-collection__item-accessory{margin-left:16px;text-align:right}.tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret{margin-left:16px}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type){border-left:1px solid #ccc}.tox[dir=rtl] .tox-collection--list .tox-collection__item>:not(:first-child){margin-right:8px}.tox[dir=rtl] .tox-collection--list .tox-collection__item>.tox-collection__item-label:first-child{margin-right:4px}.tox[dir=rtl] .tox-collection__item-icon-rtl .tox-collection__item-icon svg{transform:rotateY(180deg)}.tox[dir=rtl] .tox-collection__item-accessory{margin-right:16px;text-align:left}.tox[dir=rtl] .tox-collection .tox-collection__item-caret{margin-right:16px;transform:rotateY(180deg)}.tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret{margin-right:4px}.tox .tox-color-picker-container{display:flex;flex-direction:row;height:225px;margin:0}.tox .tox-sv-palette{box-sizing:border-box;display:flex;height:100%}.tox .tox-sv-palette-spectrum{height:100%}.tox .tox-sv-palette,.tox .tox-sv-palette-spectrum{width:225px}.tox .tox-sv-palette-thumb{background:0 0;border:1px solid #000;border-radius:50%;box-sizing:content-box;height:12px;position:absolute;width:12px}.tox .tox-sv-palette-inner-thumb{border:1px solid #fff;border-radius:50%;height:10px;position:absolute;width:10px}.tox .tox-hue-slider{box-sizing:border-box;height:100%;width:25px}.tox .tox-hue-slider-spectrum{background:linear-gradient(to bottom,red,#ff0080,#f0f,#8000ff,#00f,#0080ff,#0ff,#00ff80,#0f0,#80ff00,#ff0,#ff8000,red);height:100%;width:100%}.tox .tox-hue-slider,.tox .tox-hue-slider-spectrum{width:20px}.tox .tox-hue-slider-thumb{background:#fff;border:1px solid #000;box-sizing:content-box;height:4px;width:100%}.tox .tox-rgb-form{display:flex;flex-direction:column;justify-content:space-between}.tox .tox-rgb-form div{align-items:center;display:flex;justify-content:space-between;margin-bottom:5px;width:inherit}.tox .tox-rgb-form input{width:6em}.tox .tox-rgb-form input.tox-invalid{border:1px solid red!important}.tox .tox-rgb-form .tox-rgba-preview{border:1px solid #000;flex-grow:2;margin-bottom:0}.tox:not([dir=rtl]) .tox-sv-palette{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider{margin-right:15px}.tox:not([dir=rtl]) .tox-hue-slider-thumb{margin-left:-1px}.tox:not([dir=rtl]) .tox-rgb-form label{margin-right:.5em}.tox[dir=rtl] .tox-sv-palette{margin-left:15px}.tox[dir=rtl] .tox-hue-slider{margin-left:15px}.tox[dir=rtl] .tox-hue-slider-thumb{margin-right:-1px}.tox[dir=rtl] .tox-rgb-form label{margin-left:.5em}.tox .tox-toolbar .tox-swatches,.tox .tox-toolbar__overflow .tox-swatches,.tox .tox-toolbar__primary .tox-swatches{margin:2px 0 3px 4px}.tox .tox-collection--list .tox-collection__group .tox-swatches-menu{border:0;margin:-4px 0}.tox .tox-swatches__row{display:flex}.tox .tox-swatch{height:30px;transition:transform .15s,box-shadow .15s;width:30px}.tox .tox-swatch:focus,.tox .tox-swatch:hover{box-shadow:0 0 0 1px rgba(127,127,127,.3) inset;transform:scale(.8)}.tox .tox-swatch--remove{align-items:center;display:flex;justify-content:center}.tox .tox-swatch--remove svg path{stroke:#e74c3c}.tox .tox-swatches__picker-btn{align-items:center;background-color:transparent;border:0;cursor:pointer;display:flex;height:30px;justify-content:center;outline:0;padding:0;width:30px}.tox .tox-swatches__picker-btn svg{height:24px;width:24px}.tox .tox-swatches__picker-btn:hover{background:#dee0e2}.tox:not([dir=rtl]) .tox-swatches__picker-btn{margin-left:auto}.tox[dir=rtl] .tox-swatches__picker-btn{margin-right:auto}.tox .tox-comment-thread{background:#fff;position:relative}.tox .tox-comment-thread>:not(:first-child){margin-top:8px}.tox .tox-comment{background:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 4px 8px 0 rgba(34,47,62,.1);padding:8px 8px 16px 8px;position:relative}.tox .tox-comment__header{align-items:center;color:#222f3e;display:flex;justify-content:space-between}.tox .tox-comment__date{color:rgba(34,47,62,.7);font-size:12px}.tox .tox-comment__body{color:#222f3e;font-size:14px;font-style:normal;font-weight:400;line-height:1.3;margin-top:8px;position:relative;text-transform:initial}.tox .tox-comment__body textarea{resize:none;white-space:normal;width:100%}.tox .tox-comment__expander{padding-top:8px}.tox .tox-comment__expander p{color:rgba(34,47,62,.7);font-size:14px;font-style:normal}.tox .tox-comment__body p{margin:0}.tox .tox-comment__buttonspacing{padding-top:16px;text-align:center}.tox .tox-comment-thread__overlay::after{background:#fff;bottom:0;content:"";display:flex;left:0;opacity:.9;position:absolute;right:0;top:0;z-index:5}.tox .tox-comment__reply{display:flex;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}.tox .tox-comment__reply>:first-child{margin-bottom:8px;width:100%}.tox .tox-comment__edit{display:flex;flex-wrap:wrap;justify-content:flex-end;margin-top:16px}.tox .tox-comment__gradient::after{background:linear-gradient(rgba(255,255,255,0),#fff);bottom:0;content:"";display:block;height:5em;margin-top:-40px;position:absolute;width:100%}.tox .tox-comment__overlay{background:#fff;bottom:0;display:flex;flex-direction:column;flex-grow:1;left:0;opacity:.9;position:absolute;right:0;text-align:center;top:0;z-index:5}.tox .tox-comment__loading-text{align-items:center;color:#222f3e;display:flex;flex-direction:column;position:relative}.tox .tox-comment__loading-text>div{padding-bottom:16px}.tox .tox-comment__overlaytext{bottom:0;flex-direction:column;font-size:14px;left:0;padding:1em;position:absolute;right:0;top:0;z-index:10}.tox .tox-comment__overlaytext p{background-color:#fff;box-shadow:0 0 8px 8px #fff;color:#222f3e;text-align:center}.tox .tox-comment__overlaytext div:nth-of-type(2){font-size:.8em}.tox .tox-comment__busy-spinner{align-items:center;background-color:#fff;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:20}.tox .tox-comment__scroll{display:flex;flex-direction:column;flex-shrink:1;overflow:auto}.tox .tox-conversations{margin:8px}.tox:not([dir=rtl]) .tox-comment__edit{margin-left:8px}.tox:not([dir=rtl]) .tox-comment__buttonspacing>:last-child,.tox:not([dir=rtl]) .tox-comment__edit>:last-child,.tox:not([dir=rtl]) .tox-comment__reply>:last-child{margin-left:8px}.tox[dir=rtl] .tox-comment__edit{margin-right:8px}.tox[dir=rtl] .tox-comment__buttonspacing>:last-child,.tox[dir=rtl] .tox-comment__edit>:last-child,.tox[dir=rtl] .tox-comment__reply>:last-child{margin-right:8px}.tox .tox-user{align-items:center;display:flex}.tox .tox-user__avatar svg{fill:rgba(34,47,62,.7)}.tox .tox-user__name{color:rgba(34,47,62,.7);font-size:12px;font-style:normal;font-weight:700;text-transform:uppercase}.tox:not([dir=rtl]) .tox-user__avatar svg{margin-right:8px}.tox:not([dir=rtl]) .tox-user__avatar+.tox-user__name{margin-left:8px}.tox[dir=rtl] .tox-user__avatar svg{margin-left:8px}.tox[dir=rtl] .tox-user__avatar+.tox-user__name{margin-right:8px}.tox .tox-dialog-wrap{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1100}.tox .tox-dialog-wrap__backdrop{background-color:rgba(255,255,255,.75);bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.tox .tox-dialog-wrap__backdrop--opaque{background-color:#fff}.tox .tox-dialog{background-color:#fff;border-color:#ccc;border-radius:3px;border-style:solid;border-width:1px;box-shadow:0 16px 16px -10px rgba(34,47,62,.15),0 0 40px 1px rgba(34,47,62,.15);display:flex;flex-direction:column;max-height:100%;max-width:480px;overflow:hidden;position:relative;width:95vw;z-index:2}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog{align-self:flex-start;margin:8px auto;width:calc(100vw - 16px)}}.tox .tox-dialog-inline{z-index:1100}.tox .tox-dialog__header{align-items:center;background-color:#fff;border-bottom:none;color:#222f3e;display:flex;font-size:16px;justify-content:space-between;padding:8px 16px 0 16px;position:relative}.tox .tox-dialog__header .tox-button{z-index:1}.tox .tox-dialog__draghandle{cursor:grab;height:100%;left:0;position:absolute;top:0;width:100%}.tox .tox-dialog__draghandle:active{cursor:grabbing}.tox .tox-dialog__dismiss{margin-left:auto}.tox .tox-dialog__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:20px;font-style:normal;font-weight:400;line-height:1.3;margin:0;text-transform:none}.tox .tox-dialog__body{color:#222f3e;display:flex;flex:1;-ms-flex-preferred-size:auto;font-size:16px;font-style:normal;font-weight:400;line-height:1.3;min-width:0;text-align:left;text-transform:none}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body{flex-direction:column}}.tox .tox-dialog__body-nav{align-items:flex-start;display:flex;flex-direction:column;padding:16px 16px}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox .tox-dialog__body-nav{flex-direction:row;-webkit-overflow-scrolling:touch;overflow-x:auto;padding-bottom:0}}.tox .tox-dialog__body-nav-item{border-bottom:2px solid transparent;color:rgba(34,47,62,.7);display:inline-block;font-size:14px;line-height:1.3;margin-bottom:8px;text-decoration:none;white-space:nowrap}.tox .tox-dialog__body-nav-item:focus{background-color:rgba(32,122,183,.1)}.tox .tox-dialog__body-nav-item--active{border-bottom:2px solid #207ab7;color:#207ab7}.tox .tox-dialog__body-content{box-sizing:border-box;display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto;max-height:650px;overflow:auto;-webkit-overflow-scrolling:touch;padding:16px 16px}.tox .tox-dialog__body-content>*{margin-bottom:0;margin-top:16px}.tox .tox-dialog__body-content>:first-child{margin-top:0}.tox .tox-dialog__body-content>:last-child{margin-bottom:0}.tox .tox-dialog__body-content>:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog__body-content a{color:#207ab7;cursor:pointer;text-decoration:none}.tox .tox-dialog__body-content a:focus,.tox .tox-dialog__body-content a:hover{color:#185d8c;text-decoration:none}.tox .tox-dialog__body-content a:active{color:#185d8c;text-decoration:none}.tox .tox-dialog__body-content svg{fill:#222f3e}.tox .tox-dialog__body-content ul{display:block;list-style-type:disc;margin-bottom:16px;-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0;margin-inline-start:0;-webkit-padding-start:2.5rem;padding-inline-start:2.5rem}.tox .tox-dialog__body-content .tox-form__group h1{color:#222f3e;font-size:20px;font-style:normal;font-weight:700;letter-spacing:normal;margin-bottom:16px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group h2{color:#222f3e;font-size:16px;font-style:normal;font-weight:700;letter-spacing:normal;margin-bottom:16px;margin-top:2rem;text-transform:none}.tox .tox-dialog__body-content .tox-form__group p{margin-bottom:16px}.tox .tox-dialog__body-content .tox-form__group h1:first-child,.tox .tox-dialog__body-content .tox-form__group h2:first-child,.tox .tox-dialog__body-content .tox-form__group p:first-child{margin-top:0}.tox .tox-dialog__body-content .tox-form__group h1:last-child,.tox .tox-dialog__body-content .tox-form__group h2:last-child,.tox .tox-dialog__body-content .tox-form__group p:last-child{margin-bottom:0}.tox .tox-dialog__body-content .tox-form__group h1:only-child,.tox .tox-dialog__body-content .tox-form__group h2:only-child,.tox .tox-dialog__body-content .tox-form__group p:only-child{margin-bottom:0;margin-top:0}.tox .tox-dialog--width-lg{height:650px;max-width:1200px}.tox .tox-dialog--width-md{max-width:800px}.tox .tox-dialog--width-md .tox-dialog__body-content{overflow:auto}.tox .tox-dialog__body-content--centered{text-align:center}.tox .tox-dialog__footer{align-items:center;background-color:#fff;border-top:1px solid #ccc;display:flex;justify-content:space-between;padding:8px 16px}.tox .tox-dialog__footer-end,.tox .tox-dialog__footer-start{display:flex}.tox .tox-dialog__busy-spinner{align-items:center;background-color:rgba(255,255,255,.75);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:3}.tox .tox-dialog__table{border-collapse:collapse;width:100%}.tox .tox-dialog__table thead th{font-weight:700;padding-bottom:8px}.tox .tox-dialog__table tbody tr{border-bottom:1px solid #ccc}.tox .tox-dialog__table tbody tr:last-child{border-bottom:none}.tox .tox-dialog__table td{padding-bottom:8px;padding-top:8px}.tox .tox-dialog__popups{position:absolute;width:100%;z-index:1100}.tox .tox-dialog__body-iframe{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-iframe .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox .tox-dialog-dock-fadeout{opacity:0;visibility:hidden}.tox .tox-dialog-dock-fadein{opacity:1;visibility:visible}.tox .tox-dialog-dock-transition{transition:visibility 0s linear .3s,opacity .3s ease}.tox .tox-dialog-dock-transition.tox-dialog-dock-fadein{transition-delay:0s}.tox.tox-platform-ie .tox-dialog-wrap{position:-ms-device-fixed}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav{margin-right:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child){margin-left:8px}}.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end>*,.tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start>*{margin-left:8px}.tox[dir=rtl] .tox-dialog__body{text-align:right}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav{margin-left:0}}@media only screen and (max-width:767px){body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child){margin-right:8px}}.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end>*,.tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start>*{margin-right:8px}body.tox-dialog__disable-scroll{overflow:hidden}.tox .tox-dropzone-container{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dropzone{align-items:center;background:#fff;border:2px dashed #ccc;box-sizing:border-box;display:flex;flex-direction:column;flex-grow:1;justify-content:center;min-height:100px;padding:10px}.tox .tox-dropzone p{color:rgba(34,47,62,.7);margin:0 0 16px 0}.tox .tox-edit-area{display:flex;flex:1;-ms-flex-preferred-size:auto;overflow:hidden;position:relative}.tox .tox-edit-area__iframe{background-color:#fff;border:0;box-sizing:border-box;flex:1;-ms-flex-preferred-size:auto;height:100%;position:absolute;width:100%}.tox.tox-inline-edit-area{border:1px dotted #ccc}.tox .tox-editor-container{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.tox .tox-editor-header{z-index:1}.tox:not(.tox-tinymce-inline) .tox-editor-header{box-shadow:none;transition:box-shadow .5s}.tox.tox-tinymce--toolbar-bottom .tox-editor-header,.tox.tox-tinymce-inline .tox-editor-header{margin-bottom:-1px}.tox.tox-tinymce--toolbar-sticky-on .tox-editor-header{background-color:transparent;box-shadow:0 4px 4px -3px rgba(0,0,0,.25)}.tox-editor-dock-fadeout{opacity:0;visibility:hidden}.tox-editor-dock-fadein{opacity:1;visibility:visible}.tox-editor-dock-transition{transition:visibility 0s linear .25s,opacity .25s ease}.tox-editor-dock-transition.tox-editor-dock-fadein{transition-delay:0s}.tox .tox-control-wrap{flex:1;position:relative}.tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid,.tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown,.tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid{display:none}.tox .tox-control-wrap svg{display:block}.tox .tox-control-wrap__status-icon-wrap{position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-control-wrap__status-icon-invalid svg{fill:#c00}.tox .tox-control-wrap__status-icon-unknown svg{fill:orange}.tox .tox-control-wrap__status-icon-valid svg{fill:green}.tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield,.tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield{padding-right:32px}.tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap{right:4px}.tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield,.tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield{padding-left:32px}.tox[dir=rtl] .tox-control-wrap__status-icon-wrap{left:4px}.tox .tox-autocompleter{max-width:25em}.tox .tox-autocompleter .tox-menu{max-width:25em}.tox .tox-autocompleter .tox-autocompleter-highlight{font-weight:700}.tox .tox-color-input{display:flex;position:relative;z-index:1}.tox .tox-color-input .tox-textfield{z-index:-1}.tox .tox-color-input span{border-color:rgba(34,47,62,.2);border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;height:24px;position:absolute;top:6px;width:24px}.tox .tox-color-input span:focus:not([aria-disabled=true]),.tox .tox-color-input span:hover:not([aria-disabled=true]){border-color:#207ab7;cursor:pointer}.tox .tox-color-input span::before{background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 25%),linear-gradient(-45deg,rgba(0,0,0,.25) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(0,0,0,.25) 75%),linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.25) 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;border:1px solid #fff;border-radius:3px;box-sizing:border-box;content:'';height:24px;left:-1px;position:absolute;top:-1px;width:24px;z-index:-1}.tox .tox-color-input span[aria-disabled=true]{cursor:not-allowed}.tox:not([dir=rtl]) .tox-color-input .tox-textfield{padding-left:36px}.tox:not([dir=rtl]) .tox-color-input span{left:6px}.tox[dir=rtl] .tox-color-input .tox-textfield{padding-right:36px}.tox[dir=rtl] .tox-color-input span{right:6px}.tox .tox-label,.tox .tox-toolbar-label{color:rgba(34,47,62,.7);display:block;font-size:14px;font-style:normal;font-weight:400;line-height:1.3;padding:0 8px 0 0;text-transform:none;white-space:nowrap}.tox .tox-toolbar-label{padding:0 8px}.tox[dir=rtl] .tox-label{padding:0 0 0 8px}.tox .tox-form{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group{box-sizing:border-box;margin-bottom:4px}.tox .tox-form-group--maximize{flex:1}.tox .tox-form__group--error{color:#c00}.tox .tox-form__group--collection{display:flex}.tox .tox-form__grid{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.tox .tox-form__grid--2col>.tox-form__group{width:calc(50% - (8px / 2))}.tox .tox-form__grid--3col>.tox-form__group{width:calc(100% / 3 - (8px / 2))}.tox .tox-form__grid--4col>.tox-form__group{width:calc(25% - (8px / 2))}.tox .tox-form__controls-h-stack{align-items:center;display:flex}.tox .tox-form__group--inline{align-items:center;display:flex}.tox .tox-form__group--stretched{display:flex;flex:1;flex-direction:column;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-textarea{flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-form__group--stretched .tox-navobj :nth-child(2){flex:1;-ms-flex-preferred-size:auto;height:100%}.tox:not([dir=rtl]) .tox-form__controls-h-stack>:not(:first-child){margin-left:4px}.tox[dir=rtl] .tox-form__controls-h-stack>:not(:first-child){margin-right:4px}.tox .tox-lock.tox-locked .tox-lock-icon__unlock,.tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock{display:none}.tox .tox-listboxfield .tox-listbox--select,.tox .tox-textarea,.tox .tox-textfield,.tox .tox-toolbar-textfield{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#ccc;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#222f3e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 4.75px;resize:none;width:100%}.tox .tox-textarea[disabled],.tox .tox-textfield[disabled]{background-color:#f2f2f2;color:rgba(34,47,62,.85);cursor:not-allowed}.tox .tox-listboxfield .tox-listbox--select:focus,.tox .tox-textarea:focus,.tox .tox-textfield:focus{background-color:#fff;border-color:#207ab7;box-shadow:none;outline:0}.tox .tox-toolbar-textfield{border-width:0;margin-bottom:3px;margin-top:2px;max-width:250px}.tox .tox-naked-btn{background-color:transparent;border:0;border-color:transparent;box-shadow:unset;color:#207ab7;cursor:pointer;display:block;margin:0;padding:0}.tox .tox-naked-btn svg{display:block;fill:#222f3e}.tox:not([dir=rtl]) .tox-toolbar-textfield+*{margin-left:4px}.tox[dir=rtl] .tox-toolbar-textfield+*{margin-right:4px}.tox .tox-listboxfield{cursor:pointer;position:relative}.tox .tox-listboxfield .tox-listbox--select[disabled]{background-color:#f2f2f2;color:rgba(34,47,62,.85);cursor:not-allowed}.tox .tox-listbox__select-label{cursor:default;flex:1;margin:0 4px}.tox .tox-listbox__select-chevron{align-items:center;display:flex;justify-content:center;width:16px}.tox .tox-listbox__select-chevron svg{fill:#222f3e}.tox .tox-listboxfield .tox-listbox--select{align-items:center;display:flex}.tox:not([dir=rtl]) .tox-listboxfield svg{right:8px}.tox[dir=rtl] .tox-listboxfield svg{left:8px}.tox .tox-selectfield{cursor:pointer;position:relative}.tox .tox-selectfield select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#ccc;border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;color:#222f3e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:16px;line-height:24px;margin:0;min-height:34px;outline:0;padding:5px 4.75px;resize:none;width:100%}.tox .tox-selectfield select[disabled]{background-color:#f2f2f2;color:rgba(34,47,62,.85);cursor:not-allowed}.tox .tox-selectfield select::-ms-expand{display:none}.tox .tox-selectfield select:focus{background-color:#fff;border-color:#207ab7;box-shadow:none;outline:0}.tox .tox-selectfield svg{pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.tox:not([dir=rtl]) .tox-selectfield select[size="0"],.tox:not([dir=rtl]) .tox-selectfield select[size="1"]{padding-right:24px}.tox:not([dir=rtl]) .tox-selectfield svg{right:8px}.tox[dir=rtl] .tox-selectfield select[size="0"],.tox[dir=rtl] .tox-selectfield select[size="1"]{padding-left:24px}.tox[dir=rtl] .tox-selectfield svg{left:8px}.tox .tox-textarea{-webkit-appearance:textarea;-moz-appearance:textarea;appearance:textarea;white-space:pre-wrap}.tox-fullscreen{border:0;height:100%;left:0;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;position:fixed;top:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox.tox-tinymce.tox-fullscreen{background-color:transparent;z-index:1200}.tox-shadowhost.tox-fullscreen{z-index:1200}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}.tox .tox-help__more-link{list-style:none;margin-top:1em}.tox .tox-image-tools{width:100%}.tox .tox-image-tools__toolbar{align-items:center;display:flex;justify-content:center}.tox .tox-image-tools__image{background-color:#666;height:380px;overflow:auto;position:relative;width:100%}.tox .tox-image-tools__image,.tox .tox-image-tools__image+.tox-image-tools__toolbar{margin-top:8px}.tox .tox-image-tools__image-bg{background:url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==)}.tox .tox-image-tools__toolbar>.tox-spacer{flex:1;-ms-flex-preferred-size:auto}.tox .tox-croprect-block{background:#000;opacity:.5;position:absolute;zoom:1}.tox .tox-croprect-handle{border:2px solid #fff;height:20px;left:0;position:absolute;top:0;width:20px}.tox .tox-croprect-handle-move{border:0;cursor:move;position:absolute}.tox .tox-croprect-handle-nw{border-width:2px 0 0 2px;cursor:nw-resize;left:100px;margin:-2px 0 0 -2px;top:100px}.tox .tox-croprect-handle-ne{border-width:2px 2px 0 0;cursor:ne-resize;left:200px;margin:-2px 0 0 -20px;top:100px}.tox .tox-croprect-handle-sw{border-width:0 0 2px 2px;cursor:sw-resize;left:100px;margin:-20px 2px 0 -2px;top:200px}.tox .tox-croprect-handle-se{border-width:0 2px 2px 0;cursor:se-resize;left:200px;margin:-20px 0 0 -20px;top:200px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-left:8px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-left:32px}.tox:not([dir=rtl]) .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-left:32px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider:not(:first-of-type){margin-right:8px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-button+.tox-slider{margin-right:32px}.tox[dir=rtl] .tox-image-tools__toolbar>.tox-slider+.tox-button{margin-right:32px}.tox .tox-insert-table-picker{display:flex;flex-wrap:wrap;width:170px}.tox .tox-insert-table-picker>div{border-color:#ccc;border-style:solid;border-width:0 1px 1px 0;box-sizing:border-box;height:17px;width:17px}.tox .tox-collection--list .tox-collection__group .tox-insert-table-picker{margin:-4px 0}.tox .tox-insert-table-picker .tox-insert-table-picker__selected{background-color:rgba(32,122,183,.5);border-color:rgba(32,122,183,.5)}.tox .tox-insert-table-picker__label{color:rgba(34,47,62,.7);display:block;font-size:14px;padding:4px;text-align:center;width:100%}.tox:not([dir=rtl]) .tox-insert-table-picker>div:nth-child(10n){border-right:0}.tox[dir=rtl] .tox-insert-table-picker>div:nth-child(10n+1){border-right:0}.tox .tox-menu{background-color:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 4px 8px 0 rgba(34,47,62,.1);display:inline-block;overflow:hidden;vertical-align:top;z-index:1150}.tox .tox-menu.tox-collection.tox-collection--list{padding:0}.tox .tox-menu.tox-collection.tox-collection--toolbar{padding:4px}.tox .tox-menu.tox-collection.tox-collection--grid{padding:4px}.tox .tox-menu__label blockquote,.tox .tox-menu__label code,.tox .tox-menu__label h1,.tox .tox-menu__label h2,.tox .tox-menu__label h3,.tox .tox-menu__label h4,.tox .tox-menu__label h5,.tox .tox-menu__label h6,.tox .tox-menu__label p{margin:0}.tox .tox-menubar{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;background-color:#fff;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 4px 0 4px}.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-menubar{border-top:1px solid #ccc}.tox .tox-mbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#222f3e;display:flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0 4px;text-transform:none;width:auto}.tox .tox-mbtn[disabled]{background-color:transparent;border:0;box-shadow:none;color:rgba(34,47,62,.5);cursor:not-allowed}.tox .tox-mbtn:focus:not(:disabled){background:#dee0e2;border:0;box-shadow:none;color:#222f3e}.tox .tox-mbtn--active{background:#c8cbcf;border:0;box-shadow:none;color:#222f3e}.tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active){background:#dee0e2;border:0;box-shadow:none;color:#222f3e}.tox .tox-mbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-mbtn[disabled] .tox-mbtn__select-label{cursor:not-allowed}.tox .tox-mbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px;display:none}.tox .tox-notification{border-radius:3px;border-style:solid;border-width:1px;box-shadow:none;box-sizing:border-box;display:-ms-grid;display:grid;font-size:14px;font-weight:400;-ms-grid-columns:minmax(40px,1fr) auto minmax(40px,1fr);grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);margin-top:4px;opacity:0;padding:4px;transition:transform .1s ease-in,opacity 150ms ease-in}.tox .tox-notification p{font-size:14px;font-weight:400}.tox .tox-notification a{text-decoration:underline}.tox .tox-notification--in{opacity:1}.tox .tox-notification--success{background-color:#e4eeda;border-color:#d7e6c8;color:#222f3e}.tox .tox-notification--success p{color:#222f3e}.tox .tox-notification--success a{color:#547831}.tox .tox-notification--success svg{fill:#222f3e}.tox .tox-notification--error{background-color:#f8dede;border-color:#f2bfbf;color:#222f3e}.tox .tox-notification--error p{color:#222f3e}.tox .tox-notification--error a{color:#c00}.tox .tox-notification--error svg{fill:#222f3e}.tox .tox-notification--warn,.tox .tox-notification--warning{background-color:#fffaea;border-color:#ffe89d;color:#222f3e}.tox .tox-notification--warn p,.tox .tox-notification--warning p{color:#222f3e}.tox .tox-notification--warn a,.tox .tox-notification--warning a{color:#222f3e}.tox .tox-notification--warn svg,.tox .tox-notification--warning svg{fill:#222f3e}.tox .tox-notification--info{background-color:#d9edf7;border-color:#779ecb;color:#222f3e}.tox .tox-notification--info p{color:#222f3e}.tox .tox-notification--info a{color:#222f3e}.tox .tox-notification--info svg{fill:#222f3e}.tox .tox-notification__body{-ms-grid-row-align:center;align-self:center;color:#222f3e;font-size:14px;-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;text-align:center;white-space:normal;word-break:break-all;word-break:break-word}.tox .tox-notification__body>*{margin:0}.tox .tox-notification__body>*+*{margin-top:1rem}.tox .tox-notification__icon{-ms-grid-row-align:center;align-self:center;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification__icon svg{display:block}.tox .tox-notification__dismiss{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-column-align:end;justify-self:end}.tox .tox-notification .tox-progress-bar{-ms-grid-column-span:3;grid-column-end:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2;-ms-grid-column-align:center;justify-self:center}.tox .tox-pop{display:inline-block;position:relative}.tox .tox-pop--resizing{transition:width .1s ease}.tox .tox-pop--resizing .tox-toolbar{flex-wrap:nowrap}.tox .tox-pop__dialog{background-color:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15);min-width:0;overflow:hidden}.tox .tox-pop__dialog>:not(.tox-toolbar){margin:4px 4px 4px 8px}.tox .tox-pop__dialog .tox-toolbar{background-color:transparent;margin-bottom:-1px}.tox .tox-pop::after,.tox .tox-pop::before{border-style:solid;content:'';display:block;height:0;position:absolute;width:0}.tox .tox-pop.tox-pop--bottom::after,.tox .tox-pop.tox-pop--bottom::before{left:50%;top:100%}.tox .tox-pop.tox-pop--bottom::after{border-color:#fff transparent transparent transparent;border-width:8px;margin-left:-8px;margin-top:-1px}.tox .tox-pop.tox-pop--bottom::before{border-color:#ccc transparent transparent transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--top::after,.tox .tox-pop.tox-pop--top::before{left:50%;top:0;transform:translateY(-100%)}.tox .tox-pop.tox-pop--top::after{border-color:transparent transparent #fff transparent;border-width:8px;margin-left:-8px;margin-top:1px}.tox .tox-pop.tox-pop--top::before{border-color:transparent transparent #ccc transparent;border-width:9px;margin-left:-9px}.tox .tox-pop.tox-pop--left::after,.tox .tox-pop.tox-pop--left::before{left:0;top:calc(50% - 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--left::after{border-color:transparent #fff transparent transparent;border-width:8px;margin-left:-15px}.tox .tox-pop.tox-pop--left::before{border-color:transparent #ccc transparent transparent;border-width:10px;margin-left:-19px}.tox .tox-pop.tox-pop--right::after,.tox .tox-pop.tox-pop--right::before{left:100%;top:calc(50% + 1px);transform:translateY(-50%)}.tox .tox-pop.tox-pop--right::after{border-color:transparent transparent transparent #fff;border-width:8px;margin-left:-1px}.tox .tox-pop.tox-pop--right::before{border-color:transparent transparent transparent #ccc;border-width:10px;margin-left:-1px}.tox .tox-pop.tox-pop--align-left::after,.tox .tox-pop.tox-pop--align-left::before{left:20px}.tox .tox-pop.tox-pop--align-right::after,.tox .tox-pop.tox-pop--align-right::before{left:calc(100% - 20px)}.tox .tox-sidebar-wrap{display:flex;flex-direction:row;flex-grow:1;-ms-flex-preferred-size:0;min-height:0}.tox .tox-sidebar{background-color:#fff;display:flex;flex-direction:row;justify-content:flex-end}.tox .tox-sidebar__slider{display:flex;overflow:hidden}.tox .tox-sidebar__pane-container{display:flex}.tox .tox-sidebar__pane{display:flex}.tox .tox-sidebar--sliding-closed{opacity:0}.tox .tox-sidebar--sliding-open{opacity:1}.tox .tox-sidebar--sliding-growing,.tox .tox-sidebar--sliding-shrinking{transition:width .5s ease,opacity .5s ease}.tox .tox-selector{background-color:#4099ff;border-color:#4099ff;border-style:solid;border-width:1px;box-sizing:border-box;display:inline-block;height:10px;position:absolute;width:10px}.tox.tox-platform-touch .tox-selector{height:12px;width:12px}.tox .tox-slider{align-items:center;display:flex;flex:1;-ms-flex-preferred-size:auto;height:24px;justify-content:center;position:relative}.tox .tox-slider__rail{background-color:transparent;border:1px solid #ccc;border-radius:3px;height:10px;min-width:120px;width:100%}.tox .tox-slider__handle{background-color:#207ab7;border:2px solid #185d8c;border-radius:3px;box-shadow:none;height:24px;left:50%;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:14px}.tox .tox-source-code{overflow:auto}.tox .tox-spinner{display:flex}.tox .tox-spinner>div{animation:tam-bouncing-dots 1.5s ease-in-out 0s infinite both;background-color:rgba(34,47,62,.7);border-radius:100%;height:8px;width:8px}.tox .tox-spinner>div:nth-child(1){animation-delay:-.32s}.tox .tox-spinner>div:nth-child(2){animation-delay:-.16s}@keyframes tam-bouncing-dots{0%,100%,80%{transform:scale(0)}40%{transform:scale(1)}}.tox:not([dir=rtl]) .tox-spinner>div:not(:first-child){margin-left:4px}.tox[dir=rtl] .tox-spinner>div:not(:first-child){margin-right:4px}.tox .tox-statusbar{align-items:center;background-color:#fff;border-top:1px solid #ccc;color:rgba(34,47,62,.7);display:flex;flex:0 0 auto;font-size:12px;font-weight:400;height:18px;overflow:hidden;padding:0 8px;position:relative;text-transform:uppercase}.tox .tox-statusbar__text-container{display:flex;flex:1 1 auto;justify-content:flex-end;overflow:hidden}.tox .tox-statusbar__path{display:flex;flex:1 1 auto;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tox .tox-statusbar__path>*{display:inline;white-space:nowrap}.tox .tox-statusbar__wordcount{flex:0 0 auto;margin-left:1ch}.tox .tox-statusbar a,.tox .tox-statusbar__path-item,.tox .tox-statusbar__wordcount{color:rgba(34,47,62,.7);text-decoration:none}.tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]),.tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]){cursor:pointer;text-decoration:underline}.tox .tox-statusbar__resize-handle{align-items:flex-end;align-self:stretch;cursor:nwse-resize;display:flex;flex:0 0 auto;justify-content:flex-end;margin-left:auto;margin-right:-8px;padding-left:1ch}.tox .tox-statusbar__resize-handle svg{display:block;fill:rgba(34,47,62,.7)}.tox .tox-statusbar__resize-handle:focus svg{background-color:#dee0e2;border-radius:1px;box-shadow:0 0 0 2px #dee0e2}.tox:not([dir=rtl]) .tox-statusbar__path>*{margin-right:4px}.tox:not([dir=rtl]) .tox-statusbar__branding{margin-left:1ch}.tox[dir=rtl] .tox-statusbar{flex-direction:row-reverse}.tox[dir=rtl] .tox-statusbar__path>*{margin-left:4px}.tox .tox-throbber{z-index:1299}.tox .tox-throbber__busy-spinner{align-items:center;background-color:rgba(255,255,255,.6);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.tox .tox-tbtn{align-items:center;background:0 0;border:0;border-radius:3px;box-shadow:none;color:#222f3e;display:flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;height:34px;justify-content:center;margin:2px 0 3px 0;outline:0;overflow:hidden;padding:0;text-transform:none;width:34px}.tox .tox-tbtn svg{display:block;fill:#222f3e}.tox .tox-tbtn.tox-tbtn-more{padding-left:5px;padding-right:5px;width:inherit}.tox .tox-tbtn:focus{background:#dee0e2;border:0;box-shadow:none}.tox .tox-tbtn:hover{background:#dee0e2;border:0;box-shadow:none;color:#222f3e}.tox .tox-tbtn:hover svg{fill:#222f3e}.tox .tox-tbtn:active{background:#c8cbcf;border:0;box-shadow:none;color:#222f3e}.tox .tox-tbtn:active svg{fill:#222f3e}.tox .tox-tbtn--disabled,.tox .tox-tbtn--disabled:hover,.tox .tox-tbtn:disabled,.tox .tox-tbtn:disabled:hover{background:0 0;border:0;box-shadow:none;color:rgba(34,47,62,.5);cursor:not-allowed}.tox .tox-tbtn--disabled svg,.tox .tox-tbtn--disabled:hover svg,.tox .tox-tbtn:disabled svg,.tox .tox-tbtn:disabled:hover svg{fill:rgba(34,47,62,.5)}.tox .tox-tbtn--enabled,.tox .tox-tbtn--enabled:hover{background:#c8cbcf;border:0;box-shadow:none;color:#222f3e}.tox .tox-tbtn--enabled:hover>*,.tox .tox-tbtn--enabled>*{transform:none}.tox .tox-tbtn--enabled svg,.tox .tox-tbtn--enabled:hover svg{fill:#222f3e}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled){color:#222f3e}.tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg{fill:#222f3e}.tox .tox-tbtn:active>*{transform:none}.tox .tox-tbtn--md{height:51px;width:51px}.tox .tox-tbtn--lg{flex-direction:column;height:68px;width:68px}.tox .tox-tbtn--return{-ms-grid-row-align:stretch;align-self:stretch;height:unset;width:16px}.tox .tox-tbtn--labeled{padding:0 4px;width:unset}.tox .tox-tbtn__vlabel{display:block;font-size:10px;font-weight:400;letter-spacing:-.025em;margin-bottom:4px;white-space:nowrap}.tox .tox-tbtn--select{margin:2px 0 3px 0;padding:0 4px;width:auto}.tox .tox-tbtn__select-label{cursor:default;font-weight:400;margin:0 4px}.tox .tox-tbtn__select-chevron{align-items:center;display:flex;justify-content:center;width:16px}.tox .tox-tbtn__select-chevron svg{fill:rgba(34,47,62,.5)}.tox .tox-tbtn--bespoke .tox-tbtn__select-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:7em}.tox .tox-split-button{border:0;border-radius:3px;box-sizing:border-box;display:flex;margin:2px 0 3px 0;overflow:hidden}.tox .tox-split-button:hover{box-shadow:0 0 0 1px #dee0e2 inset}.tox .tox-split-button:focus{background:#dee0e2;box-shadow:none;color:#222f3e}.tox .tox-split-button>*{border-radius:0}.tox .tox-split-button__chevron{width:16px}.tox .tox-split-button__chevron svg{fill:rgba(34,47,62,.5)}.tox .tox-split-button .tox-tbtn{margin:0}.tox.tox-platform-touch .tox-split-button .tox-tbtn:first-child{width:30px}.tox.tox-platform-touch .tox-split-button__chevron{width:20px}.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus,.tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover,.tox .tox-split-button.tox-tbtn--disabled:focus,.tox .tox-split-button.tox-tbtn--disabled:hover{background:0 0;box-shadow:none;color:rgba(34,47,62,.5)}.tox .tox-toolbar-overlord{background-color:#fff}.tox .tox-toolbar,.tox .tox-toolbar__overflow,.tox .tox-toolbar__primary{background:url("data:image/svg+xml;charset=utf8,%3Csvg height='39px' viewBox='0 0 40 39px' width='40' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='38px' width='100' height='1' fill='%23cccccc'/%3E%3C/svg%3E") left 0 top 0 #fff;background-color:#fff;display:flex;flex:0 0 auto;flex-shrink:0;flex-wrap:wrap;padding:0 0}.tox .tox-toolbar__overflow.tox-toolbar__overflow--closed{height:0;opacity:0;padding-bottom:0;padding-top:0;visibility:hidden}.tox .tox-toolbar__overflow--growing{transition:height .3s ease,opacity .2s linear .1s}.tox .tox-toolbar__overflow--shrinking{transition:opacity .3s ease,height .2s linear .1s,visibility 0s linear .3s}.tox .tox-menubar+.tox-toolbar,.tox .tox-menubar+.tox-toolbar-overlord .tox-toolbar__primary{border-top:1px solid #ccc;margin-top:-1px}.tox .tox-toolbar--scrolling{flex-wrap:nowrap;overflow-x:auto}.tox .tox-pop .tox-toolbar{border-width:0}.tox .tox-toolbar--no-divider{background-image:none}.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar-overlord:first-child .tox-toolbar__primary,.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header:not(:first-child) .tox-toolbar:first-child{border-top:1px solid #ccc}.tox.tox-tinymce-aux .tox-toolbar__overflow{background-color:#fff;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.15)}.tox[dir=rtl] .tox-tbtn__icon-rtl svg{transform:rotateY(180deg)}.tox .tox-toolbar__group{align-items:center;display:flex;flex-wrap:wrap;margin:0 0;padding:0 4px 0 4px}.tox .tox-toolbar__group--pull-right{margin-left:auto}.tox .tox-toolbar--scrolling .tox-toolbar__group{flex-shrink:0;flex-wrap:nowrap}.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border-right:1px solid #ccc}.tox[dir=rtl] .tox-toolbar__group:not(:last-of-type){border-left:1px solid #ccc}.tox .tox-tooltip{display:inline-block;padding:8px;position:relative}.tox .tox-tooltip__body{background-color:#222f3e;border-radius:3px;box-shadow:0 2px 4px rgba(34,47,62,.3);color:rgba(255,255,255,.75);font-size:14px;font-style:normal;font-weight:400;padding:4px 8px;text-transform:none}.tox .tox-tooltip__arrow{position:absolute}.tox .tox-tooltip--down .tox-tooltip__arrow{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #222f3e;bottom:0;left:50%;position:absolute;transform:translateX(-50%)}.tox .tox-tooltip--up .tox-tooltip__arrow{border-bottom:8px solid #222f3e;border-left:8px solid transparent;border-right:8px solid transparent;left:50%;position:absolute;top:0;transform:translateX(-50%)}.tox .tox-tooltip--right .tox-tooltip__arrow{border-bottom:8px solid transparent;border-left:8px solid #222f3e;border-top:8px solid transparent;position:absolute;right:0;top:50%;transform:translateY(-50%)}.tox .tox-tooltip--left .tox-tooltip__arrow{border-bottom:8px solid transparent;border-right:8px solid #222f3e;border-top:8px solid transparent;left:0;position:absolute;top:50%;transform:translateY(-50%)}.tox .tox-well{border:1px solid #ccc;border-radius:3px;padding:8px;width:100%}.tox .tox-well>:first-child{margin-top:0}.tox .tox-well>:last-child{margin-bottom:0}.tox .tox-well>:only-child{margin:0}.tox .tox-custom-editor{border:1px solid #ccc;border-radius:3px;display:flex;flex:1;position:relative}.tox .tox-dialog-loading::before{background-color:rgba(0,0,0,.5);content:"";height:100%;position:absolute;width:100%;z-index:1000}.tox .tox-tab{cursor:pointer}.tox .tox-dialog__content-js{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-dialog__body-content .tox-collection{display:flex;flex:1;-ms-flex-preferred-size:auto}.tox .tox-image-tools-edit-panel{height:60px}.tox .tox-image-tools__sidebar{height:60px}
diff --git a/ui/public/tinymce/skins/ui/oxide/skin.mobile.css b/ui/public/tinymce/skins/ui/oxide/skin.mobile.css
new file mode 100644
index 0000000..875721a
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/skin.mobile.css
@@ -0,0 +1,673 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+/* RESET all the things! */
+.tinymce-mobile-outer-container {
+  all: initial;
+  display: block;
+}
+.tinymce-mobile-outer-container * {
+  border: 0;
+  box-sizing: initial;
+  cursor: inherit;
+  float: none;
+  line-height: 1;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+  /* TBIO-3691, stop the gray flicker on touch. */
+  text-shadow: none;
+  white-space: nowrap;
+}
+.tinymce-mobile-icon-arrow-back::before {
+  content: "\e5cd";
+}
+.tinymce-mobile-icon-image::before {
+  content: "\e412";
+}
+.tinymce-mobile-icon-cancel-circle::before {
+  content: "\e5c9";
+}
+.tinymce-mobile-icon-full-dot::before {
+  content: "\e061";
+}
+.tinymce-mobile-icon-align-center::before {
+  content: "\e234";
+}
+.tinymce-mobile-icon-align-left::before {
+  content: "\e236";
+}
+.tinymce-mobile-icon-align-right::before {
+  content: "\e237";
+}
+.tinymce-mobile-icon-bold::before {
+  content: "\e238";
+}
+.tinymce-mobile-icon-italic::before {
+  content: "\e23f";
+}
+.tinymce-mobile-icon-unordered-list::before {
+  content: "\e241";
+}
+.tinymce-mobile-icon-ordered-list::before {
+  content: "\e242";
+}
+.tinymce-mobile-icon-font-size::before {
+  content: "\e245";
+}
+.tinymce-mobile-icon-underline::before {
+  content: "\e249";
+}
+.tinymce-mobile-icon-link::before {
+  content: "\e157";
+}
+.tinymce-mobile-icon-unlink::before {
+  content: "\eca2";
+}
+.tinymce-mobile-icon-color::before {
+  content: "\e891";
+}
+.tinymce-mobile-icon-previous::before {
+  content: "\e314";
+}
+.tinymce-mobile-icon-next::before {
+  content: "\e315";
+}
+.tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-icon-style-formats::before {
+  content: "\e264";
+}
+.tinymce-mobile-icon-undo::before {
+  content: "\e166";
+}
+.tinymce-mobile-icon-redo::before {
+  content: "\e15a";
+}
+.tinymce-mobile-icon-removeformat::before {
+  content: "\e239";
+}
+.tinymce-mobile-icon-small-font::before {
+  content: "\e906";
+}
+.tinymce-mobile-icon-readonly-back::before,
+.tinymce-mobile-format-matches::after {
+  content: "\e5ca";
+}
+.tinymce-mobile-icon-small-heading::before {
+  content: "small";
+}
+.tinymce-mobile-icon-large-heading::before {
+  content: "large";
+}
+.tinymce-mobile-icon-small-heading::before,
+.tinymce-mobile-icon-large-heading::before {
+  font-family: sans-serif;
+  font-size: 80%;
+}
+.tinymce-mobile-mask-edit-icon::before {
+  content: "\e254";
+}
+.tinymce-mobile-icon-back::before {
+  content: "\e5c4";
+}
+.tinymce-mobile-icon-heading::before {
+  /* TODO: Translate */
+  content: "Headings";
+  font-family: sans-serif;
+  font-size: 80%;
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h1::before {
+  content: "H1";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h2::before {
+  content: "H2";
+  font-weight: bold;
+}
+.tinymce-mobile-icon-h3::before {
+  content: "H3";
+  font-weight: bold;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  background: rgba(51, 51, 51, 0.5);
+  height: 100%;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container {
+  align-items: center;
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  font-family: sans-serif;
+  font-size: 1em;
+  justify-content: space-between;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 1em;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  height: 2.1em;
+  width: 2.1em;
+  background-color: white;
+  color: #207ab7;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before {
+  content: "\e900";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon {
+  z-index: 2;
+}
+.tinymce-mobile-android-container.tinymce-mobile-android-maximized {
+  background: #ffffff;
+  border: none;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized) {
+  position: relative;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket {
+  display: flex;
+  flex-grow: 1;
+}
+.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe {
+  display: flex !important;
+  flex-grow: 1;
+  height: auto !important;
+}
+.tinymce-mobile-android-scroll-reload {
+  overflow: hidden;
+}
+:not(.tinymce-mobile-readonly-mode) > .tinymce-mobile-android-selection-context-toolbar {
+  margin-top: 23px;
+}
+.tinymce-mobile-toolstrip {
+  background: #fff;
+  display: flex;
+  flex: 0 0 auto;
+  z-index: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar {
+  align-items: center;
+  background-color: #fff;
+  border-bottom: 1px solid #cccccc;
+  display: flex;
+  flex: 1;
+  height: 2.5em;
+  width: 100%;
+  /* Make it no larger than the toolstrip, so that it needs to scroll */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex-shrink: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container {
+  background: #f44336;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group {
+  flex-grow: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button {
+  align-items: center;
+  display: flex;
+  height: 80%;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected {
+  background: #c8cbcf;
+  color: #cccccc;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type {
+  background: #207ab7;
+  color: #eceff1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar {
+  /* Note, this file is imported inside .tinymce-mobile-context-toolbar, so that prefix is on everything here. */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+  padding-bottom: 0.4em;
+  padding-top: 0.4em;
+  /* Make any buttons appearing on the left and right display in the centre (e.g. color edges) */
+  /* For widgets like the colour picker, use the whole height */
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog {
+  display: flex;
+  min-height: 1.5em;
+  overflow: hidden;
+  padding-left: 0;
+  padding-right: 0;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain {
+  display: flex;
+  height: 100%;
+  transition: left cubic-bezier(0.4, 0, 1, 1) 0.15s;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen {
+  display: flex;
+  flex: 0 0 auto;
+  justify-content: space-between;
+  width: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input {
+  font-family: Sans-serif;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x {
+  -ms-grid-row-align: center;
+      align-self: center;
+  background: inherit;
+  border: none;
+  border-radius: 50%;
+  color: #888;
+  font-size: 0.6em;
+  font-weight: bold;
+  height: 100%;
+  padding-right: 2px;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x {
+  display: none;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before {
+  align-items: center;
+  display: flex;
+  font-weight: bold;
+  height: 100%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before {
+  visibility: hidden;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item {
+  color: #cccccc;
+  font-size: 10px;
+  line-height: 10px;
+  margin: 0 2px;
+  padding-top: 3px;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active {
+  color: #c8cbcf;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before {
+  margin-left: 0.5em;
+  margin-right: 0.9em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before {
+  margin-left: 0.9em;
+  margin-right: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider {
+  display: flex;
+  flex: 1;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 0.28em 0;
+  position: relative;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line {
+  background: #cccccc;
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container {
+  padding-left: 2em;
+  padding-right: 2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient {
+  background: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 17%, hsl(120, 100%, 50%) 33%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 67%, hsl(300, 100%, 50%) 83%, hsl(0, 100%, 50%) 100%);
+  display: flex;
+  flex: 1;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black {
+  /* Not part of theming */
+  background: black;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white {
+  /* Not part of theming */
+  background: white;
+  height: 0.2em;
+  margin-bottom: 0.3em;
+  margin-top: 0.3em;
+  width: 1.2em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb {
+  /* vertically centering trick (margin: auto, top: 0, bottom: 0). On iOS and Safari, if you leave
+     * out these values, then it shows the thumb at the top of the spectrum. This is probably because it is
+     * absolutely positioned with only a left value, and not a top. Note, on Chrome it seems to be fine without
+     * this approach.
+    */
+  align-items: center;
+  background-clip: padding-box;
+  background-color: #455a64;
+  border: 0.5em solid rgba(136, 136, 136, 0);
+  border-radius: 3em;
+  bottom: 0;
+  color: #fff;
+  display: flex;
+  height: 0.5em;
+  justify-content: center;
+  left: -10px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  transition: border 120ms cubic-bezier(0.39, 0.58, 0.57, 1);
+  width: 0.5em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active {
+  border: 0.5em solid rgba(136, 136, 136, 0.39);
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group > div {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  flex: 1;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper {
+  flex-direction: column;
+  justify-content: center;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item {
+  align-items: center;
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog) {
+  height: 100%;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container {
+  display: flex;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input {
+  background: #ffffff;
+  border: none;
+  border-radius: 0;
+  color: #455a64;
+  flex-grow: 1;
+  font-size: 0.85em;
+  padding-bottom: 0.1em;
+  padding-left: 5px;
+  padding-top: 0.1em;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder {
+  /* WebKit, Blink, Edge */
+  color: #888;
+}
+/* dropup */
+.tinymce-mobile-dropup {
+  background: white;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking {
+  transition: height 0.3s ease-out;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-growing {
+  transition: height 0.3s ease-in;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-closed {
+  flex-grow: 0;
+}
+.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing) {
+  flex-grow: 1;
+}
+/* TODO min-height for device size and orientation */
+.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+  min-height: 200px;
+}
+@media only screen and (orientation: landscape) {
+  .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 200px;
+  }
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed) {
+    min-height: 150px;
+  }
+}
+/* styles menu */
+.tinymce-mobile-styles-menu {
+  font-family: sans-serif;
+  outline: 4px solid black;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.tinymce-mobile-styles-menu [role="menu"].transitioning {
+  transition: transform 0.5s ease-in-out;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item {
+  border-bottom: 1px solid #ddd;
+  color: #455a64;
+  cursor: pointer;
+  display: flex;
+  padding: 1em 1em;
+  position: relative;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before {
+  color: #455a64;
+  content: "\e314";
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after {
+  color: #455a64;
+  content: "\e315";
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after {
+  font-family: 'tinymce-mobile', sans-serif;
+  padding-left: 1em;
+  padding-right: 1em;
+  position: absolute;
+  right: 0;
+}
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator,
+.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser {
+  align-items: center;
+  background: #fff;
+  border-top: #455a64;
+  color: #455a64;
+  display: flex;
+  min-height: 2.5em;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="before"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="before"] {
+  transform: translate(-100%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="current"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="current"] {
+  transform: translate(0%);
+}
+.tinymce-mobile-styles-menu [data-transitioning-destination="after"][data-transitioning-state],
+.tinymce-mobile-styles-menu [data-transitioning-state="after"] {
+  transform: translate(100%);
+}
+@font-face {
+  font-family: 'tinymce-mobile';
+  font-style: normal;
+  font-weight: normal;
+  src: url('fonts/tinymce-mobile.woff?8x92w3') format('woff');
+}
+@media (min-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 25px;
+  }
+}
+@media (max-device-width: 700px) {
+  .tinymce-mobile-outer-container,
+  .tinymce-mobile-outer-container input {
+    font-size: 18px;
+  }
+}
+.tinymce-mobile-icon {
+  font-family: 'tinymce-mobile', sans-serif;
+}
+.mixin-flex-and-centre {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.mixin-flex-bar {
+  align-items: center;
+  display: flex;
+  height: 100%;
+}
+.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe {
+  background-color: #fff;
+  width: 100%;
+}
+.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+  /* Note, on the iPod touch in landscape, this isn't visible when the navbar appears */
+  background-color: #207ab7;
+  border-radius: 50%;
+  bottom: 1em;
+  color: white;
+  font-size: 1em;
+  height: 2.1em;
+  position: fixed;
+  right: 2em;
+  width: 2.1em;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+@media only screen and (min-device-width:700px) {
+  .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    font-size: 1.2em;
+  }
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket {
+  height: 300px;
+  overflow: hidden;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe {
+  height: 100%;
+}
+.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip {
+  display: none;
+}
+/*
+  Note, that if you don't include this (::-webkit-file-upload-button), the toolbar width gets
+  increased and the whole body becomes scrollable. It's important!
+ */
+input[type="file"]::-webkit-file-upload-button {
+  display: none;
+}
+@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
+  .tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon {
+    bottom: 50%;
+  }
+}
diff --git a/ui/public/tinymce/skins/ui/oxide/skin.mobile.min.css b/ui/public/tinymce/skins/ui/oxide/skin.mobile.min.css
new file mode 100644
index 0000000..3a45cac
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/skin.mobile.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+.tinymce-mobile-outer-container{all:initial;display:block}.tinymce-mobile-outer-container *{border:0;box-sizing:initial;cursor:inherit;float:none;line-height:1;margin:0;outline:0;padding:0;-webkit-tap-highlight-color:transparent;text-shadow:none;white-space:nowrap}.tinymce-mobile-icon-arrow-back::before{content:"\e5cd"}.tinymce-mobile-icon-image::before{content:"\e412"}.tinymce-mobile-icon-cancel-circle::before{content:"\e5c9"}.tinymce-mobile-icon-full-dot::before{content:"\e061"}.tinymce-mobile-icon-align-center::before{content:"\e234"}.tinymce-mobile-icon-align-left::before{content:"\e236"}.tinymce-mobile-icon-align-right::before{content:"\e237"}.tinymce-mobile-icon-bold::before{content:"\e238"}.tinymce-mobile-icon-italic::before{content:"\e23f"}.tinymce-mobile-icon-unordered-list::before{content:"\e241"}.tinymce-mobile-icon-ordered-list::before{content:"\e242"}.tinymce-mobile-icon-font-size::before{content:"\e245"}.tinymce-mobile-icon-underline::before{content:"\e249"}.tinymce-mobile-icon-link::before{content:"\e157"}.tinymce-mobile-icon-unlink::before{content:"\eca2"}.tinymce-mobile-icon-color::before{content:"\e891"}.tinymce-mobile-icon-previous::before{content:"\e314"}.tinymce-mobile-icon-next::before{content:"\e315"}.tinymce-mobile-icon-large-font::before,.tinymce-mobile-icon-style-formats::before{content:"\e264"}.tinymce-mobile-icon-undo::before{content:"\e166"}.tinymce-mobile-icon-redo::before{content:"\e15a"}.tinymce-mobile-icon-removeformat::before{content:"\e239"}.tinymce-mobile-icon-small-font::before{content:"\e906"}.tinymce-mobile-format-matches::after,.tinymce-mobile-icon-readonly-back::before{content:"\e5ca"}.tinymce-mobile-icon-small-heading::before{content:"small"}.tinymce-mobile-icon-large-heading::before{content:"large"}.tinymce-mobile-icon-large-heading::before,.tinymce-mobile-icon-small-heading::before{font-family:sans-serif;font-size:80%}.tinymce-mobile-mask-edit-icon::before{content:"\e254"}.tinymce-mobile-icon-back::before{content:"\e5c4"}.tinymce-mobile-icon-heading::before{content:"Headings";font-family:sans-serif;font-size:80%;font-weight:700}.tinymce-mobile-icon-h1::before{content:"H1";font-weight:700}.tinymce-mobile-icon-h2::before{content:"H2";font-weight:700}.tinymce-mobile-icon-h3::before{content:"H3";font-weight:700}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask{align-items:center;display:flex;justify-content:center;background:rgba(51,51,51,.5);height:100%;position:absolute;top:0;width:100%}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container{align-items:center;border-radius:50%;display:flex;flex-direction:column;font-family:sans-serif;font-size:1em;justify-content:space-between}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .mixin-menu-item{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{align-items:center;display:flex;justify-content:center;flex-direction:column;font-size:1em}@media only screen and (min-device-width:700px){.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section{font-size:1.2em}}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon{align-items:center;display:flex;justify-content:center;border-radius:50%;height:2.1em;width:2.1em;background-color:#fff;color:#207ab7}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section .tinymce-mobile-mask-tap-icon::before{content:"\e900";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-outer-container .tinymce-mobile-disabled-mask .tinymce-mobile-content-container .tinymce-mobile-content-tap-section:not(.tinymce-mobile-mask-tap-icon-selected) .tinymce-mobile-mask-tap-icon{z-index:2}.tinymce-mobile-android-container.tinymce-mobile-android-maximized{background:#fff;border:none;bottom:0;display:flex;flex-direction:column;left:0;position:fixed;right:0;top:0}.tinymce-mobile-android-container:not(.tinymce-mobile-android-maximized){position:relative}.tinymce-mobile-android-container .tinymce-mobile-editor-socket{display:flex;flex-grow:1}.tinymce-mobile-android-container .tinymce-mobile-editor-socket iframe{display:flex!important;flex-grow:1;height:auto!important}.tinymce-mobile-android-scroll-reload{overflow:hidden}:not(.tinymce-mobile-readonly-mode)>.tinymce-mobile-android-selection-context-toolbar{margin-top:23px}.tinymce-mobile-toolstrip{background:#fff;display:flex;flex:0 0 auto;z-index:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar{align-items:center;background-color:#fff;border-bottom:1px solid #ccc;display:flex;flex:1;height:2.5em;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex-shrink:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-exit-container{background:#f44336}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group.tinymce-mobile-toolbar-scrollable-group{flex-grow:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button{align-items:center;display:flex;height:80%;margin-left:2px;margin-right:2px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item.tinymce-mobile-toolbar-button.tinymce-mobile-toolbar-button-selected{background:#c8cbcf;color:#ccc}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:first-of-type,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar:not(.tinymce-mobile-context-toolbar) .tinymce-mobile-toolbar-group:last-of-type{background:#207ab7;color:#eceff1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group{align-items:center;display:flex;height:100%;flex:1;padding-bottom:.4em;padding-top:.4em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog{display:flex;min-height:1.5em;overflow:hidden;padding-left:0;padding-right:0;position:relative;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain{display:flex;height:100%;transition:left cubic-bezier(.4,0,1,1) .15s;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen{display:flex;flex:0 0 auto;justify-content:space-between;width:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen input{font-family:Sans-serif}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container{display:flex;flex-grow:1;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container .tinymce-mobile-input-container-x{-ms-grid-row-align:center;align-self:center;background:inherit;border:none;border-radius:50%;color:#888;font-size:.6em;font-weight:700;height:100%;padding-right:2px;position:absolute;right:0}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-input-container.tinymce-mobile-input-container-empty .tinymce-mobile-input-container-x{display:none}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous::before{align-items:center;display:flex;font-weight:700;height:100%;padding-left:.5em;padding-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-next.tinymce-mobile-toolbar-navigation-disabled::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serialised-dialog .tinymce-mobile-serialised-dialog-chain .tinymce-mobile-serialised-dialog-screen .tinymce-mobile-icon-previous.tinymce-mobile-toolbar-navigation-disabled::before{visibility:hidden}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item{color:#ccc;font-size:10px;line-height:10px;margin:0 2px;padding-top:3px}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-item.tinymce-mobile-dot-active{color:#c8cbcf}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-large-heading::before{margin-left:.5em;margin-right:.9em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-font::before,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-icon-small-heading::before{margin-left:.9em;margin-right:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider{display:flex;flex:1;margin-left:0;margin-right:0;padding:.28em 0;position:relative}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-size-container .tinymce-mobile-slider-size-line{background:#ccc;display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container{padding-left:2em;padding-right:2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container{align-items:center;display:flex;flex-grow:1;height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-slider-gradient-container .tinymce-mobile-slider-gradient{background:linear-gradient(to right,red 0,#feff00 17%,#0f0 33%,#00feff 50%,#00f 67%,#ff00fe 83%,red 100%);display:flex;flex:1;height:.2em;margin-bottom:.3em;margin-top:.3em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-black{background:#000;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider.tinymce-mobile-hue-slider-container .tinymce-mobile-hue-slider-white{background:#fff;height:.2em;margin-bottom:.3em;margin-top:.3em;width:1.2em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb{align-items:center;background-clip:padding-box;background-color:#455a64;border:.5em solid rgba(136,136,136,0);border-radius:3em;bottom:0;color:#fff;display:flex;height:.5em;justify-content:center;left:-10px;margin:auto;position:absolute;top:0;transition:border 120ms cubic-bezier(.39,.58,.57,1);width:.5em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-slider .tinymce-mobile-slider-thumb.tinymce-mobile-thumb-active{border:.5em solid rgba(136,136,136,.39)}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper,.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group>div{align-items:center;display:flex;height:100%;flex:1}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-serializer-wrapper{flex-direction:column;justify-content:center}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item{align-items:center;display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-toolbar-group-item:not(.tinymce-mobile-serialised-dialog){height:100%}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group .tinymce-mobile-dot-container{display:flex}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input{background:#fff;border:none;border-radius:0;color:#455a64;flex-grow:1;font-size:.85em;padding-bottom:.1em;padding-left:5px;padding-top:.1em}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::-webkit-input-placeholder{color:#888}.tinymce-mobile-toolstrip .tinymce-mobile-toolbar.tinymce-mobile-context-toolbar .tinymce-mobile-toolbar-group input::placeholder{color:#888}.tinymce-mobile-dropup{background:#fff;display:flex;overflow:hidden;width:100%}.tinymce-mobile-dropup.tinymce-mobile-dropup-shrinking{transition:height .3s ease-out}.tinymce-mobile-dropup.tinymce-mobile-dropup-growing{transition:height .3s ease-in}.tinymce-mobile-dropup.tinymce-mobile-dropup-closed{flex-grow:0}.tinymce-mobile-dropup.tinymce-mobile-dropup-open:not(.tinymce-mobile-dropup-growing){flex-grow:1}.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}@media only screen and (orientation:landscape){.tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:200px}}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-dropup:not(.tinymce-mobile-dropup-closed){min-height:150px}}.tinymce-mobile-styles-menu{font-family:sans-serif;outline:4px solid #000;overflow:hidden;position:relative;width:100%}.tinymce-mobile-styles-menu [role=menu]{display:flex;flex-direction:column;height:100%;position:absolute;width:100%}.tinymce-mobile-styles-menu [role=menu].transitioning{transition:transform .5s ease-in-out}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item{border-bottom:1px solid #ddd;color:#455a64;cursor:pointer;display:flex;padding:1em 1em;position:relative}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser .tinymce-mobile-styles-collapse-icon::before{color:#455a64;content:"\e314";font-family:tinymce-mobile,sans-serif}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-styles-item-is-menu::after{color:#455a64;content:"\e315";font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-item.tinymce-mobile-format-matches::after{font-family:tinymce-mobile,sans-serif;padding-left:1em;padding-right:1em;position:absolute;right:0}.tinymce-mobile-styles-menu .tinymce-mobile-styles-collapser,.tinymce-mobile-styles-menu .tinymce-mobile-styles-separator{align-items:center;background:#fff;border-top:#455a64;color:#455a64;display:flex;min-height:2.5em;padding-left:1em;padding-right:1em}.tinymce-mobile-styles-menu [data-transitioning-destination=before][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=before]{transform:translate(-100%)}.tinymce-mobile-styles-menu [data-transitioning-destination=current][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=current]{transform:translate(0)}.tinymce-mobile-styles-menu [data-transitioning-destination=after][data-transitioning-state],.tinymce-mobile-styles-menu [data-transitioning-state=after]{transform:translate(100%)}@font-face{font-family:tinymce-mobile;font-style:normal;font-weight:400;src:url(fonts/tinymce-mobile.woff?8x92w3) format('woff')}@media (min-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:25px}}@media (max-device-width:700px){.tinymce-mobile-outer-container,.tinymce-mobile-outer-container input{font-size:18px}}.tinymce-mobile-icon{font-family:tinymce-mobile,sans-serif}.mixin-flex-and-centre{align-items:center;display:flex;justify-content:center}.mixin-flex-bar{align-items:center;display:flex;height:100%}.tinymce-mobile-outer-container .tinymce-mobile-editor-socket iframe{background-color:#fff;width:100%}.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{background-color:#207ab7;border-radius:50%;bottom:1em;color:#fff;font-size:1em;height:2.1em;position:fixed;right:2em;width:2.1em;align-items:center;display:flex;justify-content:center}@media only screen and (min-device-width:700px){.tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{font-size:1.2em}}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket{height:300px;overflow:hidden}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-editor-socket iframe{height:100%}.tinymce-mobile-outer-container:not(.tinymce-mobile-fullscreen-maximized) .tinymce-mobile-toolstrip{display:none}input[type=file]::-webkit-file-upload-button{display:none}@media only screen and (min-device-width :320px) and (max-device-width :568px) and (orientation :landscape){.tinymce-mobile-ios-container .tinymce-mobile-editor-socket .tinymce-mobile-mask-edit-icon{bottom:50%}}
diff --git a/ui/public/tinymce/skins/ui/oxide/skin.shadowdom.css b/ui/public/tinymce/skins/ui/oxide/skin.shadowdom.css
new file mode 100644
index 0000000..715978b
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/skin.shadowdom.css
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll {
+  overflow: hidden;
+}
+.tox-fullscreen {
+  border: 0;
+  height: 100%;
+  left: 0;
+  margin: 0;
+  overflow: hidden;
+  -ms-scroll-chaining: none;
+      overscroll-behavior: none;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  touch-action: pinch-zoom;
+  width: 100%;
+}
+.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle {
+  display: none;
+}
+.tox.tox-tinymce.tox-fullscreen {
+  background-color: transparent;
+  z-index: 1200;
+}
+.tox-shadowhost.tox-fullscreen {
+  z-index: 1200;
+}
+.tox-fullscreen .tox.tox-tinymce-aux,
+.tox-fullscreen ~ .tox.tox-tinymce-aux {
+  z-index: 1201;
+}
diff --git a/ui/public/tinymce/skins/ui/oxide/skin.shadowdom.min.css b/ui/public/tinymce/skins/ui/oxide/skin.shadowdom.min.css
new file mode 100644
index 0000000..9ba6e02
--- /dev/null
+++ b/ui/public/tinymce/skins/ui/oxide/skin.shadowdom.min.css
@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) Tiny Technologies, Inc. All rights reserved.
+ * Licensed under the LGPL or a commercial license.
+ * For LGPL see License.txt in the project root for license information.
+ * For commercial licenses see https://www.tiny.cloud/
+ */
+body.tox-dialog__disable-scroll{overflow:hidden}.tox-fullscreen{border:0;height:100%;left:0;margin:0;overflow:hidden;-ms-scroll-chaining:none;overscroll-behavior:none;padding:0;position:fixed;top:0;touch-action:pinch-zoom;width:100%}.tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle{display:none}.tox.tox-tinymce.tox-fullscreen{background-color:transparent;z-index:1200}.tox-shadowhost.tox-fullscreen{z-index:1200}.tox-fullscreen .tox.tox-tinymce-aux,.tox-fullscreen~.tox.tox-tinymce-aux{z-index:1201}
diff --git a/ui/src/App.vue b/ui/src/App.vue
new file mode 100644
index 0000000..03880f1
--- /dev/null
+++ b/ui/src/App.vue
@@ -0,0 +1,29 @@
+<template>
+	<el-config-provider :locale="$i18n.messages[$i18n.locale].el" :button="{autoInsertSpace: false}">
+		<router-view></router-view>
+	</el-config-provider>
+</template>
+
+<script>
+	import colorTool from '@/utils/color'
+
+	export default {
+		name: 'App',
+		created() {
+			//设置主题颜色
+			const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR')
+			if(app_color){
+				document.documentElement.style.setProperty('--el-color-primary', app_color);
+				for (let i = 1; i <= 9; i++) {
+					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10));
+				}
+				document.documentElement.style.setProperty(`--el-color-primary-darken-1`, colorTool.darken(app_color,0.1));
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	@import '@/style/style.scss';
+	@import '@/style/theme/dark.scss';
+</style>
diff --git a/ui/src/api/index.js b/ui/src/api/index.js
new file mode 100644
index 0000000..271f33c
--- /dev/null
+++ b/ui/src/api/index.js
@@ -0,0 +1,11 @@
+/**
+ * @description 自动import导入所有 api 模块
+ */
+
+const files = require.context('./model', false, /\.js$/)
+const modules = {}
+files.keys().forEach((key) => {
+	modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+export default modules
diff --git a/ui/src/api/model/auth.js b/ui/src/api/model/auth.js
new file mode 100644
index 0000000..5639e63
--- /dev/null
+++ b/ui/src/api/model/auth.js
@@ -0,0 +1,12 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	token: {
+		url: `${config.API_URL}/token`,
+		name: "登录获取TOKEN",
+		post: async function(data={}){
+			return await http.post(this.url, data);
+		}
+	}
+}
diff --git a/ui/src/api/model/common.js b/ui/src/api/model/common.js
new file mode 100644
index 0000000..811ca9f
--- /dev/null
+++ b/ui/src/api/model/common.js
@@ -0,0 +1,28 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	upload: {
+		url: `${config.API_URL}/upload`,
+		name: "文件上传",
+		post: async function(data, config={}){
+			return await http.post(this.url, data, config);
+		}
+	},
+	file: {
+		menu: {
+			url: `${config.API_URL}/file/menu`,
+			name: "获取文件分类",
+			get: async function(){
+				return await http.get(this.url);
+			}
+		},
+		list: {
+			url: `${config.API_URL}/file/list`,
+			name: "获取文件列表",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
+	}
+}
diff --git a/ui/src/api/model/demo.js b/ui/src/api/model/demo.js
new file mode 100644
index 0000000..210a071
--- /dev/null
+++ b/ui/src/api/model/demo.js
@@ -0,0 +1,37 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	ver: {
+		url: `${config.API_URL}/demo/ver`,
+		name: "获取最新版本号",
+		get: async function(){
+			return await http.get(this.url);
+		}
+	},
+	post: {
+		url: `${config.API_URL}/demo/post`,
+		name: "分页列表",
+		post: async function(data){
+			return await http.post(this.url, data, {
+				headers: {
+					//'response-status': 401
+				}
+			});
+		}
+	},
+	page: {
+		url: `${config.API_URL}/demo/page`,
+		name: "分页列表",
+		get: async function(params){
+			return await http.get(this.url, params);
+		}
+	},
+	menu: {
+		url: `${config.API_URL}/demo/menu`,
+		name: "普通用户菜单",
+		get: async function(){
+			return await http.get(this.url);
+		}
+	}
+}
diff --git a/ui/src/api/model/system.js b/ui/src/api/model/system.js
new file mode 100644
index 0000000..85ce415
--- /dev/null
+++ b/ui/src/api/model/system.js
@@ -0,0 +1,96 @@
+import config from "@/config"
+import http from "@/utils/request"
+
+export default {
+	menu: {
+		myMenus: {
+			url: `${config.API_URL}/system/menu/my/1.5.0`,
+			name: "获取我的菜单",
+			get: async function(){
+				return await http.get(this.url);
+			}
+		},
+		list: {
+			url: `${config.API_URL}/system/menu/list`,
+			name: "获取菜单",
+			get: async function(){
+				return await http.get(this.url);
+			}
+		}
+	},
+	dic: {
+		tree: {
+			url: `${config.API_URL}/system/dic/tree`,
+			name: "获取字典树",
+			get: async function(){
+				return await http.get(this.url);
+			}
+		},
+		list: {
+			url: `${config.API_URL}/system/dic/list`,
+			name: "字典明细",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		},
+		get: {
+			url: `${config.API_URL}/system/dic/get`,
+			name: "获取字典数据",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
+	},
+	role: {
+		list: {
+			url: `${config.API_URL}/system/role/list`,
+			name: "获取角色列表",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
+	},
+	user: {
+		list: {
+			url: `${config.API_URL}/system/user/list`,
+			name: "获取用户列表",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
+	},
+	app: {
+		list: {
+			url: `${config.API_URL}/system/app/list`,
+			name: "应用列表",
+			get: async function(){
+				return await http.get(this.url);
+			}
+		}
+	},
+	log: {
+		list: {
+			url: `${config.API_URL}/system/log/list`,
+			name: "日志列表",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
+	},
+	table: {
+		list: {
+			url: `${config.API_URL}/system/table/list`,
+			name: "表格列管理列表",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		},
+		info: {
+			url: `${config.API_URL}/system/table/info`,
+			name: "表格列管理详情",
+			get: async function(params){
+				return await http.get(this.url, params);
+			}
+		}
+	}
+}
diff --git a/ui/src/assets/icons/BugFill.vue b/ui/src/assets/icons/BugFill.vue
new file mode 100644
index 0000000..8f2b2b2
--- /dev/null
+++ b/ui/src/assets/icons/BugFill.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1637035568487" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26146" width="200" height="200"><path d="M258.389333 354.133333a299.093333 299.093333 0 0 1 8.490667-12.8h490.24c2.944 4.181333 5.76 8.490667 8.490667 12.8l86.186666-49.749333 42.666667 73.898667-94.421333 54.528c6.912 25.173333 10.624 51.754667 10.624 79.189333v42.666667h128v85.333333h-128a296.96 296.96 0 0 1-22.869334 114.773333l106.666667 61.610667-42.666667 73.898667-107.776-62.208A298.325333 298.325333 0 0 1 554.666667 935.637333V597.333333h-85.333334v338.346667a298.325333 298.325333 0 0 1-189.354666-107.605333l-107.776 62.208-42.666667-73.898667 106.666667-61.568A297.770667 297.770667 0 0 1 213.333333 640H85.333333v-85.333333h128v-42.666667c0-27.434667 3.712-53.973333 10.624-79.189333L129.536 378.282667l42.666667-73.898667L258.389333 354.133333zM341.333333 256a170.666667 170.666667 0 1 1 341.333334 0H341.333333z" p-id="26147"></path></svg>
+</template>
diff --git a/ui/src/assets/icons/BugLine.vue b/ui/src/assets/icons/BugLine.vue
new file mode 100644
index 0000000..a8fac62
--- /dev/null
+++ b/ui/src/assets/icons/BugLine.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1637035533040" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25872" width="200" height="200"><path d="M554.666667 849.066667a213.418667 213.418667 0 0 0 170.666666-209.066667v-128a212.48 212.48 0 0 0-17.706666-85.333333h-391.253334A212.48 212.48 0 0 0 298.666667 512v128a213.418667 213.418667 0 0 0 170.666666 209.066667V597.333333h85.333334v251.733334z m-318.464-94.293334A297.770667 297.770667 0 0 1 213.333333 640H85.333333v-85.333333h128v-42.666667c0-27.434667 3.712-53.973333 10.624-79.189333L129.536 378.282667l42.666667-73.898667L258.389333 354.133333a299.093333 299.093333 0 0 1 8.490667-12.8h490.24c2.944 4.181333 5.76 8.490667 8.490667 12.8l86.186666-49.749333 42.666667 73.898667-94.421333 54.528c6.912 25.173333 10.624 51.754667 10.624 79.189333v42.666667h128v85.333333h-128a296.96 296.96 0 0 1-22.869334 114.773333l106.666667 61.610667-42.666667 73.898667-107.776-62.208A298.069333 298.069333 0 0 1 512 938.666667a298.069333 298.069333 0 0 1-232.021333-110.592l-107.776 62.208-42.666667-73.898667 106.666667-61.568zM341.333333 256a170.666667 170.666667 0 1 1 341.333334 0H341.333333z" p-id="25873"></path></svg>
+</template>
diff --git a/ui/src/assets/icons/Code.vue b/ui/src/assets/icons/Code.vue
new file mode 100644
index 0000000..51aeff9
--- /dev/null
+++ b/ui/src/assets/icons/Code.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1637029965066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4502" width="200" height="200"><path d="M981.333333 512l-301.696 301.696-60.330666-60.330667L860.672 512l-241.365333-241.365333 60.330666-60.330667L981.333333 512zM163.328 512l241.365333 241.365333-60.330666 60.330667L42.666667 512l301.696-301.696 60.330666 60.330667L163.328 512z" p-id="4503"></path></svg>
+</template>
\ No newline at end of file
diff --git a/ui/src/assets/icons/FileExcel.vue b/ui/src/assets/icons/FileExcel.vue
new file mode 100644
index 0000000..a0aedc0
--- /dev/null
+++ b/ui/src/assets/icons/FileExcel.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1637036788756" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3793" width="200" height="200"><path d="M121.984 122.752l536.32-76.586667a21.333333 21.333333 0 0 1 24.362667 21.12v889.429334a21.333333 21.333333 0 0 1-24.32 21.12L121.941333 901.248a42.666667 42.666667 0 0 1-36.650666-42.24V164.992a42.666667 42.666667 0 0 1 36.650666-42.24zM725.333333 128h170.666667a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-170.666667V128z m-290.133333 384L554.666667 341.333333h-102.4L384 438.869333 315.733333 341.333333H213.333333l119.466667 170.666667L213.333333 682.666667h102.4L384 585.130667 452.266667 682.666667H554.666667l-119.466667-170.666667z" p-id="3794"></path></svg>
+</template>
\ No newline at end of file
diff --git a/ui/src/assets/icons/FilePpt.vue b/ui/src/assets/icons/FilePpt.vue
new file mode 100644
index 0000000..90ef7e8
--- /dev/null
+++ b/ui/src/assets/icons/FilePpt.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1637036833058" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3924" width="200" height="200"><path d="M725.333333 128h170.666667a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-170.666667V128zM121.984 122.752l536.32-76.586667a21.333333 21.333333 0 0 1 24.362667 21.12v889.429334a21.333333 21.333333 0 0 1-24.32 21.12L121.941333 901.248a42.666667 42.666667 0 0 1-36.650666-42.24V164.992a42.666667 42.666667 0 0 1 36.650666-42.24zM213.333333 341.333333v341.333334h85.333334v-85.333334h256V341.333333H213.333333z m85.333334 85.333334h170.666666v85.333333H298.666667v-85.333333z" p-id="3925"></path></svg>
+</template>
\ No newline at end of file
diff --git a/ui/src/assets/icons/FileWord.vue b/ui/src/assets/icons/FileWord.vue
new file mode 100644
index 0000000..c438afe
--- /dev/null
+++ b/ui/src/assets/icons/FileWord.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1637036713041" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3662" width="200" height="200"><path d="M725.333333 128h170.666667a42.666667 42.666667 0 0 1 42.666667 42.666667v682.666666a42.666667 42.666667 0 0 1-42.666667 42.666667h-170.666667V128zM121.984 122.752l536.32-76.586667a21.333333 21.333333 0 0 1 24.362667 21.12v889.429334a21.333333 21.333333 0 0 1-24.32 21.12L121.941333 901.248a42.666667 42.666667 0 0 1-36.650666-42.24V164.992a42.666667 42.666667 0 0 1 36.650666-42.24zM469.333333 341.333333v212.864L384 469.333333l-84.906667 85.333334L298.666667 341.333333H213.333333v341.333334h85.333334l85.333333-85.333334 85.333333 85.333334h85.333334V341.333333h-85.333334z" p-id="3663"></path></svg>
+</template>
\ No newline at end of file
diff --git a/ui/src/assets/icons/Vue.vue b/ui/src/assets/icons/Vue.vue
new file mode 100644
index 0000000..3f36dd1
--- /dev/null
+++ b/ui/src/assets/icons/Vue.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1637029992998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4633" width="200" height="200"><path d="M42.666667 128h170.666666l298.666667 512 298.666667-512h170.666666L512 938.666667 42.666667 128z m369.792 0L512 298.666667l99.541333-170.666667h172.16L512 597.333333 240.298667 128h172.16z" p-id="4634"></path></svg>
+</template>
\ No newline at end of file
diff --git a/ui/src/assets/icons/Wechat.vue b/ui/src/assets/icons/Wechat.vue
new file mode 100644
index 0000000..445e527
--- /dev/null
+++ b/ui/src/assets/icons/Wechat.vue
@@ -0,0 +1,3 @@
+<template>
+	<svg t="1637029542482" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4371" width="200" height="200"><path d="M792.490667 585.002667a38.826667 38.826667 0 0 0 38.314666-38.314667c0-21.248-17.024-38.314667-38.314666-38.314667s-38.314667 17.066667-38.314667 38.314667c0 21.333333 17.066667 38.314667 38.314667 38.314667z m-188.8 0a38.826667 38.826667 0 0 0 38.314666-38.314667c0-21.248-17.066667-38.314667-38.314666-38.314667-21.333333 0-38.314667 17.066667-38.314667 38.314667 0 21.333333 17.024 38.314667 38.314667 38.314667z m280.192 215.04a14.805333 14.805333 0 0 0-7.338667 15.786666c0 2.048 0 4.138667 1.066667 6.272 4.181333 17.792 12.544 46.122667 12.544 47.189334 0 3.114667 1.066667 5.205333 1.066666 7.338666a9.386667 9.386667 0 0 1-9.429333 9.386667c-2.133333 0-3.157333-1.024-5.248-2.048l-61.824-35.669333a34.090667 34.090667 0 0 0-14.677333-4.181334c-3.114667 0-6.272 0-8.362667 1.024-29.354667 8.405333-59.733333 12.586667-92.202667 12.586667-156.16 0-281.898667-104.832-281.898666-234.88 0-130.005333 125.738667-234.88 281.898666-234.88 156.117333 0 281.856 104.874667 281.856 234.88 0 70.272-37.717333 134.229333-97.450666 177.237333zM711.381333 345.557333a388.48 388.48 0 0 0-11.946666-0.213333c-178.090667 0-324.522667 122.026667-324.522667 277.546667 0 23.637333 3.413333 46.506667 9.728 68.266666h-3.797333a425.088 425.088 0 0 1-110.250667-15.701333c-3.157333-1.066667-6.314667-1.066667-9.472-1.066667a35.498667 35.498667 0 0 0-17.834667 5.248l-74.581333 42.88c-2.133333 1.066667-4.224 2.133333-6.314667 2.133334a11.648 11.648 0 0 1-11.52-11.52c0-3.157333 1.024-5.248 2.090667-8.405334 1.024-1.024 10.496-35.584 15.744-56.490666 0-2.133333 1.024-5.248 1.024-7.338667a23.722667 23.722667 0 0 0-9.429333-18.858667C87.808 570.709333 42.666667 494.336 42.666667 409.514667 42.666667 253.653333 194.986667 128 381.866667 128c160.64 0 295.68 92.544 329.514666 217.514667z m-219.904 17.834667c24.448 0 43.776-20.352 43.776-43.776 0-24.448-19.328-43.776-43.776-43.776s-43.776 19.328-43.776 43.776 19.328 43.776 43.776 43.776z m-224.426666 0c24.448 0 43.818667-20.352 43.818666-43.776 0-24.448-19.370667-43.776-43.818666-43.776-24.405333 0-43.776 19.328-43.776 43.776s19.370667 43.776 43.776 43.776z" p-id="4372"></path></svg>
+</template>
\ No newline at end of file
diff --git a/ui/src/assets/icons/index.js b/ui/src/assets/icons/index.js
new file mode 100644
index 0000000..c5139c1
--- /dev/null
+++ b/ui/src/assets/icons/index.js
@@ -0,0 +1,8 @@
+export { default as Vue } from './Vue.vue'
+export { default as Code } from './Code.vue'
+export { default as Wechat } from './Wechat.vue'
+export { default as BugFill } from './BugFill.vue'
+export { default as BugLine } from './BugLine.vue'
+export { default as FileWord } from './FileWord.vue'
+export { default as FileExcel } from './FileExcel.vue'
+export { default as FilePpt } from './FilePpt.vue'
\ No newline at end of file
diff --git a/ui/src/components/HelloWorld.vue b/ui/src/components/HelloWorld.vue
new file mode 100644
index 0000000..d167419
--- /dev/null
+++ b/ui/src/components/HelloWorld.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/ui/src/components/scContextmenu/index.vue b/ui/src/components/scContextmenu/index.vue
new file mode 100644
index 0000000..8e1c8f0
--- /dev/null
+++ b/ui/src/components/scContextmenu/index.vue
@@ -0,0 +1,101 @@
+<!--
+ * @Descripttion: scContextmenu组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月23日09:25:57
+ * @LastEditors:
+ * @LastEditTime:
+ * @other: 代码完全开源，欢迎参考，也欢迎PR
+-->
+
+<template>
+	<transition name="el-zoom-in-top">
+		<div v-if="visible" ref="contextmenu" class="sc-contextmenu" :style="{left:left+'px',top:top+'px'}" @contextmenu.prevent="fun">
+			<ul class="sc-contextmenu__menu">
+				<slot></slot>
+			</ul>
+		</div>
+	</transition>
+</template>
+
+<script>
+	export default {
+		provide() {
+			return {
+				menuClick: this.menuClick
+			}
+		},
+		data() {
+			return {
+				visible: false,
+				top: 0,
+				left: 0
+			}
+		},
+		watch: {
+			visible(value) {
+				var _this = this;
+				var cm = function(e){
+					let sp = _this.$refs.contextmenu
+					if(sp&&!sp.contains(e.target)){
+						_this.closeMenu()
+					}
+				}
+				if (value) {
+					document.body.addEventListener('click', e=>cm(e))
+				}else{
+					document.body.removeEventListener('click',  e=>cm(e))
+				}
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			menuClick(command){
+				this.closeMenu()
+				this.$emit('command', command)
+			},
+			openMenu(e) {
+				e.preventDefault()
+				this.visible = true
+				this.left = e.clientX + 1
+				this.top = e.clientY + 1
+
+				this.$nextTick(() => {
+					var ex = e.clientX + 1
+					var ey = e.clientY + 1
+					var innerWidth = window.innerWidth
+					var innerHeight = window.innerHeight
+					var menuHeight = this.$refs.contextmenu.offsetHeight
+					var menuWidth = this.$refs.contextmenu.offsetWidth
+					//位置修正公示
+					//left = (当前点击X + 菜单宽度 > 可视区域宽度 ? 可视区域宽度 - 菜单宽度 : 当前点击X)
+					//top = (当前点击Y + 菜单高度 > 可视区域高度 ? 当前点击Y - 菜单高度 : 当前点击Y)
+					this.left = ex + menuWidth > innerWidth ? innerWidth - menuWidth : ex
+					this.top = ey + menuHeight > innerHeight ? ey - menuHeight : ey
+				})
+				this.$emit('visibleChange', true)
+			},
+			closeMenu() {
+				this.visible = false;
+				this.$emit('visibleChange', false)
+			},
+			fun(){
+				return false;
+			}
+		}
+	}
+</script>
+
+<style>
+	.sc-contextmenu {position: fixed;z-index: 3000;}
+	.sc-contextmenu__menu {display: inline-block;min-width: 120px;border: 1px solid #e4e7ed;background: #fff;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);z-index: 3000;list-style-type: none;padding: 10px 0;}
+	.sc-contextmenu__menu > hr {margin:5px 0;border: none;height: 1px;font-size: 0px;background-color: #ebeef5;}
+	.sc-contextmenu__menu > li {margin:0;cursor: pointer;line-height: 30px;padding: 0 17px 0 10px;color: #606266;display: flex;justify-content: space-between;white-space: nowrap;text-decoration: none;position: relative;}
+	.sc-contextmenu__menu > li:hover {background-color: #ecf5ff;color: #66b1ff;}
+	.sc-contextmenu__menu > li.disabled {cursor: not-allowed;color: #bbb;background: transparent;}
+	.sc-contextmenu__icon {display: inline-block;width: 14px;font-size: 14px;margin-right: 10px;}
+	.sc-contextmenu__suffix {margin-left: 40px;color: #999;}
+	.sc-contextmenu__menu li ul {position: absolute;top:0px;left:100%;display: none;margin: -11px 0;}
+</style>
diff --git a/ui/src/components/scContextmenu/item.vue b/ui/src/components/scContextmenu/item.vue
new file mode 100644
index 0000000..aa5a44e
--- /dev/null
+++ b/ui/src/components/scContextmenu/item.vue
@@ -0,0 +1,84 @@
+<!--
+ * @Descripttion: scContextmenuItem组件
+ * @version: 1.2
+ * @Author: sakuya
+ * @Date: 2021年7月23日16:29:36
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年2月8日15:51:07
+-->
+
+<template>
+	<hr v-if="divided">
+	<li :class="disabled?'disabled':''" @click.stop="liClick" @mouseenter="openSubmenu($event)" @mouseleave="closeSubmenu($event)">
+		<span class="title">
+			<el-icon class="sc-contextmenu__icon"><component v-if="icon" :is="icon" /></el-icon>
+			{{title}}
+		</span>
+		<span class="sc-contextmenu__suffix">
+			<el-icon v-if="$slots.default"><el-icon-arrow-right /></el-icon>
+			<template v-else>{{suffix}}</template>
+		</span>
+		<ul v-if="$slots.default" class="sc-contextmenu__menu">
+			<slot></slot>
+		</ul>
+	</li>
+</template>
+
+<script>
+	export default {
+		props: {
+			command: { type: String, default: "" },
+			title: { type: String, default: "" },
+			suffix: { type: String, default: "" },
+			icon: { type: String, default: "" },
+			divided: { type: Boolean, default: false },
+			disabled: { type: Boolean, default: false },
+		},
+		inject: ['menuClick'],
+		methods: {
+			liClick(){
+				if(this.$slots.default){
+					return false
+				}
+				if(this.disabled){
+					return false
+				}
+				this.menuClick(this.command)
+			},
+			openSubmenu(e){
+				var menu = e.target.querySelector('ul')
+				if(!menu){
+					return false
+				}
+				menu.style.display = 'inline-block'
+				var rect = menu.getBoundingClientRect()
+				var menuX = rect.left
+				var menuY = rect.top
+				var innerWidth = window.innerWidth
+				var innerHeight = window.innerHeight
+				var menuHeight = menu.offsetHeight
+				var menuWidth = menu.offsetWidth
+				if(menuX + menuWidth > innerWidth){
+					menu.style.left = 'auto'
+					menu.style.right = '100%'
+				}
+				if(menuY + menuHeight > innerHeight){
+					menu.style.top = 'auto'
+					menu.style.bottom = '0'
+				}
+			},
+			closeSubmenu(e){
+				var menu = e.target.querySelector('ul')
+				if(!menu){
+					return false
+				}
+				menu.removeAttribute("style")
+				menu.style.display = 'none'
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/ui/src/components/scCron/index.vue b/ui/src/components/scCron/index.vue
new file mode 100644
index 0000000..6c5e776
--- /dev/null
+++ b/ui/src/components/scCron/index.vue
@@ -0,0 +1,730 @@
+<!--
+ * @Descripttion: cron规则生成器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年12月29日15:23:54
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-input v-model="defaultValue" v-bind="$attrs">
+		<template #append>
+			<el-dropdown size="medium" @command="handleShortcuts">
+				<el-button icon="el-icon-arrow-down"></el-button>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item command="0 * * * * ?">每分钟</el-dropdown-item>
+						<el-dropdown-item command="0 0 * * * ?">每小时</el-dropdown-item>
+						<el-dropdown-item command="0 0 0 * * ?">每天零点</el-dropdown-item>
+						<el-dropdown-item command="0 0 0 1 * ?">每月一号零点</el-dropdown-item>
+						<el-dropdown-item command="0 0 0 L * ?">每月最后一天零点</el-dropdown-item>
+						<el-dropdown-item command="0 0 0 ? * 1">每周星期日零点</el-dropdown-item>
+						<el-dropdown-item v-for="(item, index) in shortcuts" :key="item.value" :divided="index==0" :command="item.value">{{item.text}}</el-dropdown-item>
+						<el-dropdown-item icon="el-icon-plus" divided command="custom">自定义</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+		</template>
+	</el-input>
+
+	<el-dialog title="cron规则生成器" v-model="dialogVisible" :width="580" destroy-on-close append-to-body>
+		<div class="sc-cron">
+			<el-tabs>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>秒</h2>
+							<h4>{{value_second}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.second.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.second.type==1">
+							<el-input-number v-model="value.second.range.start" :min="0" :max="59" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.second.range.end" :min="0" :max="59" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.second.type==2">
+							<el-input-number v-model="value.second.loop.start" :min="0" :max="59" controls-position="right"></el-input-number>
+							秒开始，每
+							<el-input-number v-model="value.second.loop.end" :min="0" :max="59" controls-position="right"></el-input-number>
+							秒执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.second.type==3">
+							<el-select v-model="value.second.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.second" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>分钟</h2>
+							<h4>{{value_minute}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.minute.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.minute.type==1">
+							<el-input-number v-model="value.minute.range.start" :min="0" :max="59" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.minute.range.end" :min="0" :max="59" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.minute.type==2">
+							<el-input-number v-model="value.minute.loop.start" :min="0" :max="59" controls-position="right"></el-input-number>
+							分钟开始，每
+							<el-input-number v-model="value.minute.loop.end" :min="0" :max="59" controls-position="right"></el-input-number>
+							分钟执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.minute.type==3">
+							<el-select v-model="value.minute.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.minute" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>小时</h2>
+							<h4>{{value_hour}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.hour.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.hour.type==1">
+							<el-input-number v-model="value.hour.range.start" :min="0" :max="23" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.hour.range.end" :min="0" :max="23" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.hour.type==2">
+							<el-input-number v-model="value.hour.loop.start" :min="0" :max="23" controls-position="right"></el-input-number>
+							小时开始，每
+							<el-input-number v-model="value.hour.loop.end" :min="0" :max="23" controls-position="right"></el-input-number>
+							小时执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.hour.type==3">
+							<el-select v-model="value.hour.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.hour" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>日</h2>
+							<h4>{{value_day}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.day.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+								<el-radio-button label="4">本月最后一天</el-radio-button>
+								<el-radio-button label="5">不指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.day.type==1">
+							<el-input-number v-model="value.day.range.start" :min="1" :max="31" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.day.range.end" :min="1" :max="31" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.day.type==2">
+							<el-input-number v-model="value.day.loop.start" :min="1" :max="31" controls-position="right"></el-input-number>
+							号开始，每
+							<el-input-number v-model="value.day.loop.end" :min="1" :max="31" controls-position="right"></el-input-number>
+							天执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.day.type==3">
+							<el-select v-model="value.day.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.day" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>月</h2>
+							<h4>{{value_month}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.month.type">
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.month.type==1">
+							<el-input-number v-model="value.month.range.start" :min="1" :max="12" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.month.range.end" :min="1" :max="12" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.month.type==2">
+							<el-input-number v-model="value.month.loop.start" :min="1" :max="12" controls-position="right"></el-input-number>
+							月开始，每
+							<el-input-number v-model="value.month.loop.end" :min="1" :max="12" controls-position="right"></el-input-number>
+							月执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.month.type==3">
+							<el-select v-model="value.month.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.month" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>周</h2>
+							<h4>{{value_week}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form>
+							<el-form-item label="类型">
+								<el-radio-group v-model="value.week.type">
+									<el-radio-button label="0">任意值</el-radio-button>
+									<el-radio-button label="1">范围</el-radio-button>
+									<el-radio-button label="2">间隔</el-radio-button>
+									<el-radio-button label="3">指定</el-radio-button>
+									<el-radio-button label="4">本月最后一周</el-radio-button>
+									<el-radio-button label="5">不指定</el-radio-button>
+								</el-radio-group>
+							</el-form-item>
+							<el-form-item label="范围" v-if="value.week.type==1">
+								<el-select v-model="value.week.range.start">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+								<span style="padding:0 15px;">-</span>
+								<el-select v-model="value.week.range.end">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item label="间隔" v-if="value.week.type==2">
+								第
+								<el-input-number v-model="value.week.loop.start" :min="1" :max="4" controls-position="right"></el-input-number>
+								周的星期
+								<el-select v-model="value.week.loop.end">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+								执行一次
+							</el-form-item>
+							<el-form-item label="指定" v-if="value.week.type==3">
+								<el-select v-model="value.week.appoint" multiple style="width: 100%;">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item label="最后一周" v-if="value.week.type==4">
+								<el-select v-model="value.week.last">
+									<el-option v-for="(item, index) in data.week" :key="index" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+							</el-form-item>
+						</el-form>
+					</el-form>
+				</el-tab-pane>
+				<el-tab-pane>
+					<template #label>
+						<div class="sc-cron-num">
+							<h2>年</h2>
+							<h4>{{value_year}}</h4>
+						</div>
+					</template>
+					<el-form>
+						<el-form-item label="类型">
+							<el-radio-group v-model="value.year.type">
+								<el-radio-button label="-1">忽略</el-radio-button>
+								<el-radio-button label="0">任意值</el-radio-button>
+								<el-radio-button label="1">范围</el-radio-button>
+								<el-radio-button label="2">间隔</el-radio-button>
+								<el-radio-button label="3">指定</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="范围" v-if="value.year.type==1">
+							<el-input-number v-model="value.year.range.start" controls-position="right"></el-input-number>
+							<span style="padding:0 15px;">-</span>
+							<el-input-number v-model="value.year.range.end" controls-position="right"></el-input-number>
+						</el-form-item>
+						<el-form-item label="间隔" v-if="value.year.type==2">
+							<el-input-number v-model="value.year.loop.start" controls-position="right"></el-input-number>
+							年开始，每
+							<el-input-number v-model="value.year.loop.end" :min="1" controls-position="right"></el-input-number>
+							年执行一次
+						</el-form-item>
+						<el-form-item label="指定" v-if="value.year.type==3">
+							<el-select v-model="value.year.appoint" multiple style="width: 100%;">
+								<el-option v-for="(item, index) in data.year" :key="index" :label="item" :value="item"></el-option>
+							</el-select>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+			</el-tabs>
+		</div>
+
+		<template #footer>
+			<el-button @click="dialogVisible=false" >取 消</el-button>
+			<el-button type="primary" @click="submit()">确 认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: String, default: "* * * * * ?" },
+			shortcuts: { type: Array, default: () => [] }
+		},
+		data() {
+			return {
+				type: '0',
+				defaultValue: '',
+				dialogVisible: false,
+
+				value:{
+					second: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 0,
+							end: 1
+						},
+						appoint: []
+					},
+					minute: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 0,
+							end: 1
+						},
+						appoint: []
+					},
+					hour: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 0,
+							end: 1
+						},
+						appoint: []
+					},
+					day: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 1,
+							end: 1
+						},
+						appoint: []
+					},
+					month: {
+						type: '0',
+						range: {
+							start: 1,
+							end: 2
+						},
+						loop: {
+							start: 1,
+							end: 1
+						},
+						appoint: []
+					},
+					week: {
+						type: '5',
+						range: {
+							start: '2',
+							end: '3'
+						},
+						loop: {
+							start: 0,
+							end: '2'
+						},
+						last: '2',
+						appoint: []
+					},
+					year: {
+						type: '-1',
+						range: {
+							start: this.getYear()[0],
+							end: this.getYear()[1]
+						},
+						loop: {
+							start: this.getYear()[0],
+							end: 1
+						},
+						appoint: []
+					}
+				},
+				data: {
+					second: ['0','5','15','20','25','30','35','40','45','50','55','59'],
+					minute: ['0','5','15','20','25','30','35','40','45','50','55','59'],
+					hour: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
+					day: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
+					month: ['1','2','3','4','5','6','7','8','9','10','11','12'],
+					week: [
+						{
+							value: '1',
+							label: '周日'
+						},
+						{
+							value: '2',
+							label: '周一'
+						},
+						{
+							value: '3',
+							label: '周二'
+						},
+						{
+							value: '4',
+							label: '周三'
+						},
+						{
+							value: '5',
+							label: '周四'
+						},
+						{
+							value: '6',
+							label: '周五'
+						},
+						{
+							value: '7',
+							label: '周六'
+						}
+					],
+					year: this.getYear()
+				}
+			}
+		},
+		watch: {
+			'value.week.type'(val){
+				if(val != '5'){
+					this.value.day.type = '5'
+				}
+			},
+			'value.day.type'(val){
+				if(val != '5'){
+					this.value.week.type = '5'
+				}
+			}
+		},
+		computed: {
+			value_second(){
+				let v = this.value.second
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else{
+					return '*'
+				}
+			},
+			value_minute(){
+				let v = this.value.minute
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else{
+					return '*'
+				}
+			},
+			value_hour(){
+				let v = this.value.hour
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else{
+					return '*'
+				}
+			},
+			value_day(){
+				let v = this.value.day
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else if(v.type==4){
+					return 'L'
+				}else if(v.type==5){
+					return '?'
+				}else{
+					return '*'
+				}
+			},
+			value_month(){
+				let v = this.value.month
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else{
+					return '*'
+				}
+			},
+			value_week(){
+				let v = this.value.week
+				if(v.type == 0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.end + '#' + v.loop.start
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : '*'
+				}else if(v.type==4){
+					return v.last + 'L'
+				}else if(v.type==5){
+					return '?'
+				}else{
+					return '*'
+				}
+			},
+			value_year(){
+				let v = this.value.year
+				if(v.type == -1){
+					return ''
+				}else if(v.type==0){
+					return '*'
+				}else if(v.type==1){
+					return v.range.start + '-' +v.range.end
+				}else if(v.type==2){
+					return v.loop.start + '/' + v.loop.end
+				}else if(v.type==3){
+					return v.appoint.length>0 ? v.appoint.join(',') : ''
+				}else{
+					return ''
+				}
+			},
+		},
+		mounted() {
+			this.defaultValue = this.modelValue
+		},
+		methods: {
+			handleShortcuts(command){
+				if(command == 'custom'){
+					this.open()
+				}else{
+					this.defaultValue = command
+					this.$emit('update:modelValue', this.defaultValue)
+				}
+			},
+			open(){
+				this.set()
+				this.dialogVisible = true
+			},
+			set(){
+				this.defaultValue = this.modelValue
+				let arr = (this.modelValue || "* * * * * ?").split(" ")
+				//简单检查
+				if(arr.length < 6){
+					this.$message.warning("cron表达式错误，已转换为默认表达式")
+					arr = "* * * * * ?".split(" ")
+				}
+
+				//秒
+				if(arr[0]=='*'){
+					this.value.second.type = '0'
+				}else if(arr[0].includes('-')){
+					this.value.second.type = '1'
+					this.value.second.range.start = Number(arr[0].split("-")[0])
+					this.value.second.range.end = Number(arr[0].split("-")[1])
+				}else if(arr[0].includes('/')){
+					this.value.second.type = '2'
+					this.value.second.loop.start = Number(arr[0].split("/")[0])
+					this.value.second.loop.end = Number(arr[0].split("/")[1])
+				}else{
+					this.value.second.type = '3'
+					this.value.second.appoint = arr[0].split(",")
+				}
+				//分
+				if(arr[1]=='*'){
+					this.value.minute.type = '0'
+				}else if(arr[1].includes('-')){
+					this.value.minute.type = '1'
+					this.value.minute.range.start = Number(arr[1].split("-")[0])
+					this.value.minute.range.end = Number(arr[1].split("-")[1])
+				}else if(arr[1].includes('/')){
+					this.value.minute.type = '2'
+					this.value.minute.loop.start = Number(arr[1].split("/")[0])
+					this.value.minute.loop.end = Number(arr[1].split("/")[1])
+				}else{
+					this.value.minute.type = '3'
+					this.value.minute.appoint = arr[1].split(",")
+				}
+				//小时
+				if(arr[2]=='*'){
+					this.value.hour.type = '0'
+				}else if(arr[2].includes('-')){
+					this.value.hour.type = '1'
+					this.value.hour.range.start = Number(arr[2].split("-")[0])
+					this.value.hour.range.end = Number(arr[2].split("-")[1])
+				}else if(arr[2].includes('/')){
+					this.value.hour.type = '2'
+					this.value.hour.loop.start = Number(arr[2].split("/")[0])
+					this.value.hour.loop.end = Number(arr[2].split("/")[1])
+				}else{
+					this.value.hour.type = '3'
+					this.value.hour.appoint = arr[2].split(",")
+				}
+				//日
+				if(arr[3]=='*'){
+					this.value.day.type = '0'
+				}else if(arr[3]=='L'){
+					this.value.day.type = '4'
+				}else if(arr[3]=='?'){
+					this.value.day.type = '5'
+				}else if(arr[3].includes('-')){
+					this.value.day.type = '1'
+					this.value.day.range.start = Number(arr[3].split("-")[0])
+					this.value.day.range.end = Number(arr[3].split("-")[1])
+				}else if(arr[3].includes('/')){
+					this.value.day.type = '2'
+					this.value.day.loop.start = Number(arr[3].split("/")[0])
+					this.value.day.loop.end = Number(arr[3].split("/")[1])
+				}else{
+					this.value.day.type = '3'
+					this.value.day.appoint = arr[3].split(",")
+				}
+				//月
+				if(arr[4]=='*'){
+					this.value.month.type = '0'
+				}else if(arr[4].includes('-')){
+					this.value.month.type = '1'
+					this.value.month.range.start = Number(arr[4].split("-")[0])
+					this.value.month.range.end = Number(arr[4].split("-")[1])
+				}else if(arr[4].includes('/')){
+					this.value.month.type = '2'
+					this.value.month.loop.start = Number(arr[4].split("/")[0])
+					this.value.month.loop.end = Number(arr[4].split("/")[1])
+				}else{
+					this.value.month.type = '3'
+					this.value.month.appoint = arr[4].split(",")
+				}
+				//周
+				if(arr[5]=='*'){
+					this.value.week.type = '0'
+				}else if(arr[5]=='?'){
+					this.value.week.type = '5'
+				}else if(arr[5].includes('-')){
+					this.value.week.type = '1'
+					this.value.week.range.start = arr[5].split("-")[0]
+					this.value.week.range.end = arr[5].split("-")[1]
+				}else if(arr[5].includes('#')){
+					this.value.week.type = '2'
+					this.value.week.loop.start = Number(arr[5].split("#")[1])
+					this.value.week.loop.end = arr[5].split("#")[0]
+				}else if(arr[5].includes('L')){
+					this.value.week.type = '4'
+					this.value.week.last = arr[5].split("L")[0]
+				}else{
+					this.value.week.type = '3'
+					this.value.week.appoint = arr[5].split(",")
+				}
+				//年
+				if(!arr[6]){
+					this.value.year.type = '-1'
+				}else if(arr[6]=='*'){
+					this.value.year.type = '0'
+				}else if(arr[6].includes('-')){
+					this.value.year.type = '1'
+					this.value.year.range.start = Number(arr[6].split("-")[0])
+					this.value.year.range.end = Number(arr[6].split("-")[1])
+				}else if(arr[6].includes('/')){
+					this.value.year.type = '2'
+					this.value.year.loop.start = Number(arr[6].split("/")[1])
+					this.value.year.loop.end = Number(arr[6].split("/")[0])
+				}else{
+					this.value.year.type = '3'
+					this.value.year.appoint = arr[6].split(",")
+				}
+			},
+			getYear(){
+				let v = []
+				let y = new Date().getFullYear()
+				for (let i = 0; i < 11; i++) {
+					v.push(y+i)
+				}
+				return v
+			},
+			submit(){
+				let year = this.value_year ? ' '+this.value_year : ''
+				this.defaultValue = this.value_second + ' ' + this.value_minute + ' ' + this.value_hour + ' ' + this.value_day + ' ' + this.value_month + ' ' + this.value_week + year
+				this.$emit('update:modelValue', this.defaultValue)
+				this.dialogVisible = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-cron:deep(.el-tabs__item) {height: auto;line-height: 1;padding:0 7px;vertical-align: bottom;}
+	.sc-cron-num {text-align: center;margin-bottom: 15px;width: 100%;}
+	.sc-cron-num h2 {font-size: 12px;margin-bottom: 15px;font-weight: normal;}
+	.sc-cron-num h4 {display: block;height: 32px;line-height: 30px;width: 100%;font-size: 12px;padding:0 15px;background: var(--el-color-primary-light-9);border-radius:4px;}
+	.sc-cron:deep(.el-tabs__item.is-active) .sc-cron-num h4 {background: var(--el-color-primary);color: #fff;}
+
+	[data-theme='dark'] .sc-cron-num h4 {background: var(--el-color-white);}
+</style>
diff --git a/ui/src/components/scCropper/index.vue b/ui/src/components/scCropper/index.vue
new file mode 100644
index 0000000..96055d9
--- /dev/null
+++ b/ui/src/components/scCropper/index.vue
@@ -0,0 +1,84 @@
+<!--
+ * @Descripttion: 图像裁剪组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月24日17:05:43
+ * @LastEditors:
+ * @LastEditTime:
+ * @other: 代码完全开源，欢迎参考，也欢迎PR
+-->
+
+<template>
+	<div class="sc-cropper">
+		<div class="sc-cropper__img">
+			<img :src="src" ref="img">
+		</div>
+		<div class="sc-cropper__preview">
+			<h4>图像预览</h4>
+			<div class="sc-cropper__preview__img" ref="preview"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import Cropper from 'cropperjs'
+	import 'cropperjs/dist/cropper.css'
+
+	export default {
+		props: {
+			src: { type: String, default: "" },
+			compress: {type: Number, default: 1},
+			aspectRatio:  {type: Number, default: NaN},
+		},
+		data() {
+			return {
+				crop: null
+			}
+		},
+		watch:{
+			aspectRatio(val){
+				this.crop.setAspectRatio(val)
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init(){
+				this.crop = new Cropper(this.$refs.img, {
+					viewMode: 2,
+					dragMode: 'move',
+					responsive: false,
+					aspectRatio: this.aspectRatio,
+					preview: this.$refs.preview
+				})
+			},
+			setAspectRatio(aspectRatio){
+				this.crop.setAspectRatio(aspectRatio)
+			},
+			getCropData(cb, type='image/jpeg'){
+				cb(this.crop.getCroppedCanvas().toDataURL(type, this.compress))
+			},
+			getCropBlob(cb, type='image/jpeg'){
+				this.crop.getCroppedCanvas().toBlob((blob) => {
+					cb(blob)
+				}, type, this.compress)
+			},
+			getCropFile(cb, fileName='fileName.jpg', type='image/jpeg'){
+				this.crop.getCroppedCanvas().toBlob((blob) => {
+					let file = new File([blob], fileName, {type: type})
+					cb(file)
+				}, type, this.compress)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-cropper {height:300px;}
+	.sc-cropper__img {height:100%;width:400px;float: left;background: #EBEEF5;}
+	.sc-cropper__img img {display: none;}
+	.sc-cropper__preview {width: 120px;margin-left: 20px;float: left;}
+	.sc-cropper__preview h4 {font-weight: normal;font-size: 12px;color: #999;margin-bottom: 20px;}
+	.sc-cropper__preview__img {overflow: hidden;width: 120px;height: 120px;border: 1px solid #ebeef5;}
+</style>
diff --git a/ui/src/components/scDialog/index.vue b/ui/src/components/scDialog/index.vue
new file mode 100644
index 0000000..8713fd3
--- /dev/null
+++ b/ui/src/components/scDialog/index.vue
@@ -0,0 +1,141 @@
+<!--
+ * @Descripttion: 弹窗扩展组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年8月27日08:51:52
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-dialog" ref="scDialog">
+	<el-dialog ref="dialog" v-model="dialogVisible" :fullscreen="isFullscreen" v-bind="$attrs" :show-close="false">
+		<template #title>
+			<slot name="title">
+				<span class="el-dialog__title">{{ title }}</span>
+			</slot>
+			<div class="sc-dialog__headerbtn">
+				<button v-if="showFullscreen" aria-label="fullscreen" type="button" @click="setFullscreen">
+					<el-icon v-if="isFullscreen" class="el-dialog__close"><el-icon-bottom-left /></el-icon>
+					<el-icon v-else class="el-dialog__close"><el-icon-full-screen /></el-icon>
+				</button>
+				<button v-if="showClose" aria-label="close" type="button" @click="closeDialog">
+					<el-icon class="el-dialog__close"><el-icon-close /></el-icon>
+				</button>
+			</div>
+		</template>
+		<div v-loading="loading">
+			<slot></slot>
+		</div>
+		<template #footer>
+			<slot name="footer"></slot>
+		</template>
+	</el-dialog>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: Boolean, default: false },
+			title: { type: String, default: "" },
+			showClose: { type: Boolean, default: true },
+			showFullscreen: { type: Boolean, default: true },
+			drag: { type: Boolean, default: true },
+			loading: { type: Boolean, default: false }
+		},
+		data() {
+			return {
+				dialogVisible: false,
+				isFullscreen: false
+			}
+		},
+		watch:{
+			modelValue(){
+				this.dialogVisible = this.modelValue
+				if(this.dialogVisible){
+					this.$refs.scDialog.querySelector('.el-dialog').style.top = '0px'
+					this.$refs.scDialog.querySelector('.el-dialog').style.left = '0px'
+					this.isFullscreen = false
+				}
+			}
+		},
+		mounted() {
+			this.dialogVisible = this.modelValue
+			this.drag && this.dialogdrag()
+		},
+		methods: {
+			//关闭
+			closeDialog(){
+				this.dialogVisible = false
+			},
+			//最大化
+			setFullscreen(){
+				this.isFullscreen = !this.isFullscreen
+			},
+			//绑定拖拽
+			dialogdrag(){
+				const dialogHeaderEl = this.$refs.scDialog.querySelector('.el-dialog__header')
+				const dragDom = this.$refs.scDialog.querySelector('.el-dialog')
+				//dialogHeaderEl.style.cursor = 'move'
+
+				dialogHeaderEl.onmousedown = (e) => {
+					const disX = e.clientX - dialogHeaderEl.offsetLeft
+					const disY = e.clientY - dialogHeaderEl.offsetTop
+					const screenWidth = document.body.clientWidth
+					const screenHeight = document.documentElement.clientHeight
+					const dragDomWidth = dragDom.offsetWidth
+					const dragDomheight = dragDom.offsetHeight
+					let minDragDomLeft = -dragDom.offsetLeft
+					let maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
+					let minDragDomTop = -dragDom.offsetTop
+					let maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight
+
+					if(screenHeight < dragDomheight){
+						return false
+					}
+					dragDom.style.marginBottom = '0px'
+
+					let styL = getComputedStyle(dragDom).left
+					let styT = getComputedStyle(dragDom).top
+					if(styL.includes('%')) {
+						styL = +document.body.clientWidth * (+styL.replace('%', '') / 100)
+						styT = +document.body.clientHeight * (+styT.replace('%', '') / 100)
+					}else {
+						styL = +styL.replace('px', '')
+						styT = +styT.replace('px', '')
+					}
+					document.onmousemove = function (e) {
+						let left = e.clientX - disX
+						let top = e.clientY - disY
+						if (left < minDragDomLeft) {
+							left = minDragDomLeft
+						} else if (left > maxDragDomLeft) {
+							left = maxDragDomLeft
+						}
+						if (top < minDragDomTop) {
+							top = minDragDomTop
+						} else if (top > maxDragDomTop) {
+							top = maxDragDomTop
+						}
+						dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
+					}
+					document.onmouseup = function () {
+						document.onmousemove = null
+						document.onmouseup = null
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-dialog__headerbtn {position: absolute;top: var(--el-dialog-padding-primary);right: var(--el-dialog-padding-primary);}
+	.sc-dialog__headerbtn button {padding: 0;background: transparent;border: none;outline: none;cursor: pointer;font-size: var(--el-message-close-size,16px);margin-left: 15px;color: var(--el-color-info);}
+	.sc-dialog__headerbtn button:hover .el-dialog__close {color: var(--el-color-primary);}
+	.sc-dialog:deep(.el-dialog).is-fullscreen {display: flex;flex-direction: column;top:0px !important;left:0px !important;}
+	.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__header {}
+	.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__body {flex:1;overflow: auto;}
+	.sc-dialog:deep(.el-dialog).is-fullscreen .el-dialog__footer {padding-bottom: 10px;border-top: 1px solid var(--el-border-color-base);}
+</style>
diff --git a/ui/src/components/scEcharts/echarts-theme-T.js b/ui/src/components/scEcharts/echarts-theme-T.js
new file mode 100644
index 0000000..4154161
--- /dev/null
+++ b/ui/src/components/scEcharts/echarts-theme-T.js
@@ -0,0 +1,74 @@
+const T = {
+	"color": [
+		"#409EFF",
+		"#36CE9E",
+		"#f56e6a",
+		"#626c91",
+		"#edb00d",
+		"#909399"
+	],
+	'grid': {
+		'left': '3%',
+		'right': '3%',
+		'bottom': '10',
+		'top': '40',
+		'containLabel': true
+	},
+	"legend": {
+		"textStyle": {
+			"color": "#999"
+		},
+		"inactiveColor": "rgba(128,128,128,0.4)"
+	},
+	"categoryAxis": {
+		"axisLine": {
+			"show": true,
+			"lineStyle": {
+				"color": "rgba(128,128,128,0.2)",
+				"width": 1
+			}
+		},
+		"axisTick": {
+			"show": false,
+			"lineStyle": {
+				"color": "#333"
+			}
+		},
+		"axisLabel": {
+			"color": "#999"
+		},
+		"splitLine": {
+			"show": false,
+			"lineStyle": {
+				"color": [
+					"#eee"
+				]
+			}
+		},
+		"splitArea": {
+			"show": false,
+			"areaStyle": {
+				"color": [
+					"rgba(255,255,255,0.01)",
+					"rgba(0,0,0,0.01)"
+				]
+			}
+		}
+	},
+	"valueAxis": {
+		"axisLine": {
+			"show": false,
+			"lineStyle": {
+				"color": "#999"
+			}
+		},
+		"splitLine": {
+			"show": true,
+			"lineStyle": {
+				"color": "rgba(128,128,128,0.2)"
+			}
+		}
+	}
+}
+
+export default T
diff --git a/ui/src/components/scEcharts/index.vue b/ui/src/components/scEcharts/index.vue
new file mode 100644
index 0000000..9e2112c
--- /dev/null
+++ b/ui/src/components/scEcharts/index.vue
@@ -0,0 +1,64 @@
+<template>
+	<div ref="scEcharts" :style="{height:height, width:width}"></div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+	import T from './echarts-theme-T.js';
+	echarts.registerTheme('T', T);
+	const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
+
+	export default {
+		...echarts,
+		name: "scEcharts",
+		props: {
+			height: { type: String, default: "100%" },
+			width: { type: String, default: "100%" },
+			nodata: {type: Boolean, default: false },
+			option: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				isActivat: false,
+				myChart: null
+			}
+		},
+		watch: {
+			option: {
+				deep:true,
+				handler (v) {
+					unwarp(this.myChart).setOption(v);
+				}
+			}
+		},
+		computed: {
+			myOptions: function() {
+				return this.option || {};
+			}
+		},
+		activated(){
+			if(!this.isActivat){
+				this.$nextTick(() => {
+					this.myChart.resize()
+				})
+			}
+		},
+		deactivated(){
+			this.isActivat = false;
+		},
+		mounted(){
+			this.isActivat = true;
+			this.$nextTick(() => {
+				this.draw();
+			})
+		},
+		methods: {
+			draw(){
+				var myChart = echarts.init(this.$refs.scEcharts, 'T');
+				myChart.setOption(this.myOptions);
+				this.myChart = myChart;
+				window.addEventListener('resize', () => myChart.resize());
+			}
+		}
+	}
+</script>
diff --git a/ui/src/components/scEditor/index.vue b/ui/src/components/scEditor/index.vue
new file mode 100644
index 0000000..6b73ff2
--- /dev/null
+++ b/ui/src/components/scEditor/index.vue
@@ -0,0 +1,111 @@
+<template>
+	<div class="sceditor">
+		<Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" @onClick="onClick" />
+	</div>
+</template>
+
+<script>
+	import API from "@/api";
+	import Editor from '@tinymce/tinymce-vue'
+	import tinymce from 'tinymce/tinymce'
+	import 'tinymce/themes/silver'
+	import 'tinymce/icons/default'
+
+	// 引入编辑器插件
+	import 'tinymce/plugins/code'  //编辑源码
+	import 'tinymce/plugins/image'  //插入编辑图片
+	import 'tinymce/plugins/link'  //超链接
+	import 'tinymce/plugins/preview'//预览
+	import 'tinymce/plugins/table'  //表格
+
+	export default {
+		components: {
+			Editor
+		},
+		props: {
+			modelValue: {
+				type: String,
+				default: ""
+			},
+			placeholder: {
+				type: String,
+				default: ""
+			},
+			height: {
+				type: Number,
+				default: 300,
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			plugins: {
+				type: [String, Array],
+				default: 'code image link preview table'
+			},
+			toolbar: {
+				type: [String, Array],
+				default: 'undo redo |  forecolor backcolor bold italic underline strikethrough link | formatselect fontselect fontsizeselect | \
+					alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
+					image table  preview | code selectall'
+			}
+		},
+		data() {
+			return {
+				init: {
+					language_url: 'tinymce/langs/zh_CN.js',
+					language: 'zh_CN',
+					skin_url: 'tinymce/skins/ui/oxide',
+					content_css: "tinymce/skins/content/default/content.css",
+					menubar: false,
+					statusbar: true,
+					plugins: this.plugins,
+					toolbar: this.toolbar,
+					fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
+					height: this.height,
+					placeholder: this.placeholder,
+					branding: false,
+					resize: true,
+					elementpath: true,
+					content_style: "",
+					images_upload_handler: async (blobInfo, success, failure) => {
+						const data = new FormData();
+						data.append("file", blobInfo.blob() ,blobInfo.filename());
+						try {
+							const res = await API.common.upload.post(data)
+							success(res.data.src)
+						}catch (error) {
+							failure("Image upload failed")
+						}
+					},
+					setup: function(editor) {
+						editor.on('init', function() {
+							this.getBody().style.fontSize = '14px';
+						})
+
+					}
+				},
+				contentValue: this.modelValue
+			}
+		},
+		watch: {
+			modelValue(val) {
+				this.contentValue = val
+			},
+			contentValue(val){
+				this.$emit('update:modelValue', val);
+			}
+		},
+		mounted() {
+			tinymce.init({})
+		},
+		methods: {
+			onClick(e){
+				this.$emit('onClick', e, tinymce)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scFileSelect/index.vue b/ui/src/components/scFileSelect/index.vue
new file mode 100644
index 0000000..224baed
--- /dev/null
+++ b/ui/src/components/scFileSelect/index.vue
@@ -0,0 +1,283 @@
+<!--
+ * @Descripttion: 资源文件选择器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年10月11日16:01:40
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-file-select">
+		<div class="sc-file-select__side" v-loading="menuLoading">
+			<div class="sc-file-select__side-menu">
+				<el-tree ref="group" class="menu" :data="menu" :node-key="treeProps.key" :props="treeProps" :current-node-key="menu.length>0?menu[0][treeProps.key]:''" highlight-current @node-click="groupClick">
+					<template #default="{ node }">
+						<span class="el-tree-node__label">
+							<el-icon class="icon"><el-icon-folder /></el-icon>{{node.label}}
+						</span>
+					</template>
+				</el-tree>
+			</div>
+			<div class="sc-file-select__side-msg" v-if="multiple">
+				已选择 <b>{{value.length}}</b> / <b>{{max}}</b> 项
+			</div>
+		</div>
+		<div class="sc-file-select__files" v-loading="listLoading">
+			<div class="sc-file-select__top">
+				<div class="upload" v-if="!hideUpload">
+					<el-upload class="sc-file-select__upload" action="" multiple :show-file-list="false" :accept="accept" :on-change="uploadChange" :before-upload="uploadBefore" :on-progress="uploadProcess" :on-success="uploadSuccess" :on-error="uploadError" :http-request="uploadRequest">
+						<el-button type="primary" icon="el-icon-upload">本地上传</el-button>
+					</el-upload>
+					<span class="tips"><el-icon><el-icon-warning /></el-icon>大小不超过{{maxSize}}MB</span>
+				</div>
+				<div class="keyword">
+					<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="文件名搜索" clearable @keyup.enter="search" @clear="search"></el-input>
+				</div>
+			</div>
+			<div class="sc-file-select__list">
+				<el-scrollbar ref="scrollbar">
+					<el-empty v-if="fileList.length==0 && data.length==0" description="无数据" :image-size="80"></el-empty>
+					<div v-for="(file, index) in fileList" :key="index" class="sc-file-select__item">
+						<div class="sc-file-select__item__file">
+							<div class="sc-file-select__item__upload">
+								<el-progress type="circle" :percentage="file.progress" :width="70"></el-progress>
+							</div>
+							<el-image :src="file.tempImg" fit="contain"></el-image>
+						</div>
+						<p>{{file.name}}</p>
+					</div>
+					<div v-for="item in data" :key="item[fileProps.key]" class="sc-file-select__item" :class="{active: value.includes(item[fileProps.url]) }" @click="select(item)">
+						<div class="sc-file-select__item__file">
+							<div class="sc-file-select__item__checkbox" v-if="multiple">
+								<el-icon><el-icon-check /></el-icon>
+							</div>
+							<div class="sc-file-select__item__select" v-else>
+								<el-icon><el-icon-check /></el-icon>
+							</div>
+							<div class="sc-file-select__item__box"></div>
+							<el-image v-if="_isImg(item[fileProps.url])" :src="item[fileProps.url]" fit="contain" lazy></el-image>
+							<div v-else class="item-file item-file-doc">
+								<i v-if="files[_getExt(item[fileProps.url])]" :class="files[_getExt(item[fileProps.url])].icon" :style="{color:files[_getExt(item[fileProps.url])].color}"></i>
+								<i v-else class="sc-icon-file-list-fill" style="color: #999;"></i>
+							</div>
+						</div>
+						<p :title="item[fileProps.fileName]">{{item[fileProps.fileName]}}</p>
+					</div>
+				</el-scrollbar>
+			</div>
+			<div class="sc-file-select__pagination">
+				<el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
+			</div>
+			<div class="sc-file-select__do">
+				<slot name="do"></slot>
+				<el-button type="primary" :disabled="value.length<=0" @click="submit">确 定</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import config from "@/config/fileSelect"
+
+	export default {
+		props: {
+			modelValue: null,
+			hideUpload: { type: Boolean, default: false },
+			multiple: { type: Boolean, default: false },
+			max: {type: Number, default: config.max},
+			onlyImage: { type: Boolean, default: false },
+			maxSize: {type: Number, default: config.maxSize},
+		},
+		data() {
+			return {
+				keyword: null,
+				pageSize: 20,
+				total: 0,
+				currentPage: 1,
+				data: [],
+				menu: [],
+				menuId: '',
+				value: this.multiple ? [] : '',
+				fileList: [],
+				accept: this.onlyImage ? "image/gif, image/jpeg, image/png" : "",
+				listLoading: false,
+				menuLoading: false,
+				treeProps: config.menuProps,
+				fileProps: config.fileProps,
+				files: config.files
+			}
+		},
+		watch: {
+			multiple(){
+				this.value = this.multiple ? [] : ''
+				this.$emit('update:modelValue', JSON.parse(JSON.stringify(this.value)));
+			}
+		},
+		mounted() {
+			this.getMenu()
+			this.getData()
+		},
+		methods: {
+			//获取分类数据
+			async getMenu(){
+				this.menuLoading = true
+				var res = await config.menuApiObj.get()
+				this.menu = res.data
+				this.menuLoading = false
+			},
+			//获取列表数据
+			async getData(){
+				this.listLoading = true
+				var reqData = {
+					[config.request.menuKey]: this.menuId,
+					[config.request.page]: this.currentPage,
+					[config.request.pageSize]: this.pageSize,
+					[config.request.keyword]: this.keyword
+				}
+				if(this.onlyImage){
+					reqData.type = 'image'
+				}
+				var res = await config.listApiObj.get(reqData)
+				var parseData = config.listParseData(res)
+				this.data = parseData.rows
+				this.total = parseData.total
+				this.listLoading = false
+				this.$refs.scrollbar.setScrollTop(0)
+			},
+			//树点击事件
+			groupClick(data){
+				this.menuId = data.id
+				this.currentPage = 1
+				this.keyword = null
+				this.getData()
+			},
+			//分页刷新表格
+			reload(){
+				this.getData()
+			},
+			search(){
+				this.currentPage = 1
+				this.getData()
+			},
+			select(item){
+				const itemUrl = item[this.fileProps.url]
+				if(this.multiple){
+					if(this.value.includes(itemUrl)){
+						this.value.splice(this.value.findIndex(f => f == itemUrl), 1)
+					}else{
+						this.value.push(itemUrl)
+					}
+				}else{
+					if(this.value.includes(itemUrl)){
+						this.value = ''
+					}else{
+						this.value = itemUrl
+					}
+				}
+			},
+			submit(){
+				const value = JSON.parse(JSON.stringify(this.value))
+				this.$emit('update:modelValue', value);
+				this.$emit('submit', value);
+			},
+			//上传处理
+			uploadChange(file, fileList){
+				file.tempImg = URL.createObjectURL(file.raw);
+				this.fileList = fileList
+			},
+			uploadBefore(file){
+				const maxSize = file.size / 1024 / 1024 < this.maxSize;
+				if (!maxSize) {
+					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
+					return false;
+				}
+			},
+			uploadRequest(param){
+				var apiObj = config.apiObj;
+				const data = new FormData();
+				data.append("file", param.file);
+				data.append([config.request.menuKey], this.menuId);
+				apiObj.post(data, {
+					onUploadProgress: e => {
+						param.onProgress(e)
+					}
+				}).then(res => {
+					param.onSuccess(res)
+				}).catch(err => {
+					param.onError(err)
+				})
+			},
+			uploadProcess(event, file){
+				file.progress = Number((event.loaded / event.total * 100).toFixed(2))
+			},
+			uploadSuccess(res, file){
+				this.fileList.splice(this.fileList.findIndex(f => f.uid == file.uid), 1)
+				var response = config.uploadParseData(res);
+				this.data.unshift({
+					[this.fileProps.key]: response.id,
+					[this.fileProps.fileName]: response.fileName,
+					[this.fileProps.url]: response.url
+				})
+				if(!this.multiple){
+					this.value = response.url
+				}
+			},
+			uploadError(err){
+				this.$notify.error({
+					title: '上传文件错误',
+					message: err
+				})
+			},
+			//内置函数
+			_isImg(fileUrl){
+				const imgExt = ['.jpg', '.jpeg', '.png', '.gif', '.bmp']
+				const fileExt = fileUrl.substring(fileUrl.lastIndexOf("."))
+				return imgExt.indexOf(fileExt) != -1
+			},
+			_getExt(fileUrl){
+				return fileUrl.substring(fileUrl.lastIndexOf(".") + 1)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-file-select {display: flex;}
+	.sc-file-select__files {flex: 1;}
+
+	.sc-file-select__list {height:400px;}
+	.sc-file-select__item {display: inline-block;float: left;margin:0 15px 25px 0;width:110px;cursor: pointer;}
+	.sc-file-select__item__file {width:110px;height:110px;position: relative;}
+	.sc-file-select__item__file .el-image {width:110px;height:110px;}
+	.sc-file-select__item__box {position: absolute;top:0;right:0;bottom:0;left:0;border: 2px solid var(--el-color-success);z-index: 1;display: none;}
+	.sc-file-select__item__box::before {content: '';position: absolute;top:0;right:0;bottom:0;left:0;background: var(--el-color-success);opacity: 0.2;display: none;}
+	.sc-file-select__item:hover .sc-file-select__item__box {display: block;}
+	.sc-file-select__item.active .sc-file-select__item__box {display: block;}
+	.sc-file-select__item.active .sc-file-select__item__box::before {display: block;}
+	.sc-file-select__item p {margin-top: 10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-text-overflow:ellipsis;text-align: center;}
+	.sc-file-select__item__checkbox {position: absolute;width: 20px;height: 20px;top:7px;right:7px;z-index: 2;background: rgba(0,0,0,0.2);border: 1px solid #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+	.sc-file-select__item__checkbox i {font-size: 14px;color: #fff;font-weight: bold;display: none;}
+	.sc-file-select__item__select {position: absolute;width: 20px;height: 20px;top:0px;right:0px;z-index: 2;background: var(--el-color-success);display: none;flex-direction: column;align-items: center;justify-content: center;}
+	.sc-file-select__item__select i {font-size: 14px;color: #fff;font-weight: bold;}
+	.sc-file-select__item.active .sc-file-select__item__checkbox {background: var(--el-color-success);}
+	.sc-file-select__item.active .sc-file-select__item__checkbox i {display: block;}
+	.sc-file-select__item.active .sc-file-select__item__select {display: flex;}
+	.sc-file-select__item__file .item-file {width:110px;height:110px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+	.sc-file-select__item__file .item-file i {font-size: 40px;}
+	.sc-file-select__item__file .item-file.item-file-doc {color: #409eff;}
+
+	.sc-file-select__item__upload {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;background: rgba(255,255,255,0.7);display: flex;flex-direction: column;align-items: center;justify-content: center;}
+
+	.sc-file-select__side {width: 200px;margin-right: 15px;border-right: 1px solid rgba(128,128,128,0.2);display: flex;flex-flow: column;}
+	.sc-file-select__side-menu {flex: 1;}
+	.sc-file-select__side-msg {height:32px;line-height: 32px;}
+
+	.sc-file-select__top {margin-bottom: 15px;display: flex;justify-content: space-between;}
+	.sc-file-select__upload {display: inline-block;}
+	.sc-file-select__top .tips {font-size: 12px;margin-left: 10px;color: #999;}
+	.sc-file-select__top .tips i {font-size: 14px;margin-right: 5px;position: relative;bottom: -0.125em;}
+	.sc-file-select__pagination {margin:15px 0;}
+
+	.sc-file-select__do {text-align: right;}
+</style>
diff --git a/ui/src/components/scFilterBar/index.vue b/ui/src/components/scFilterBar/index.vue
new file mode 100644
index 0000000..136cb34
--- /dev/null
+++ b/ui/src/components/scFilterBar/index.vue
@@ -0,0 +1,310 @@
+<!--
+ * @Descripttion: 过滤器V2
+ * @version: 2.4
+ * @Author: sakuya
+ * @Date: 2021年7月30日14:48:41
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年2月8日15:28:24
+-->
+
+<template>
+	<div class="sc-filterBar">
+		<slot :filterLength="filterObjLength" :openFilter="openFilter">
+			<el-badge :value="filterObjLength" type="danger" :hidden="filterObjLength<=0">
+				<el-button icon="el-icon-filter" @click="openFilter"></el-button>
+			</el-badge>
+		</slot>
+
+		<el-drawer title="过滤器" v-model="drawer" :size="650" append-to-body>
+			<el-container v-loading="saveLoading">
+				<el-main style="padding:0">
+					<el-tabs class="root">
+						<el-tab-pane lazy>
+							<template #label>
+								<div class="tabs-label">过滤项</div>
+							</template>
+							<el-scrollbar>
+								<div class="sc-filter-main">
+									<h2>设置过滤条件</h2>
+									<div v-if="filter.length<=0"  class="nodata">
+										没有默认过滤条件，请点击增加过滤项
+									</div>
+									<table v-else>
+										<colgroup>
+											<col width="50">
+											<col width="140">
+											<col v-if="showOperator" width="120">
+											<col>
+											<col width="40">
+										</colgroup>
+										<tr v-for="(item,index) in filter" :key="index">
+											<td>
+												<el-tag>{{index+1}}</el-tag>
+											</td>
+											<td>
+												<py-select v-model="item.field" :options="fields" placeholder="过滤字段" filterable @change="fieldChange(item)">
+												</py-select>
+											</td>
+											<td v-if="showOperator">
+												<el-select v-model="item.operator" placeholder="运算符">
+													<el-option v-for="ope in item.field.operators || operator" :key="ope.value" :label="ope.label" :value="ope.value"></el-option>
+												</el-select>
+											</td>
+											<td>
+												<el-input v-if="!item.field.type" v-model="item.value" placeholder="请选择过滤字段" disabled></el-input>
+												<!-- 输入框 -->
+												<el-input v-if="item.field.type=='text'" v-model="item.value" :placeholder="item.field.placeholder||'请输入'"></el-input>
+												<!-- 下拉框 -->
+												<el-select v-if="item.field.type=='select'" v-model="item.value" :placeholder="item.field.placeholder||'请选择'" filterable :multiple="item.field.extend.multiple" :loading="item.selectLoading" @visible-change="visibleChange($event, item)" :remote="item.field.extend.remote" :remote-method="(query)=>{remoteMethod(query, item)}">
+													<el-option v-for="field in item.field.extend.data" :key="field.value" :label="field.label" :value="field.value"></el-option>
+												</el-select>
+												<!-- 日期 -->
+												<el-date-picker v-if="item.field.type=='date'" v-model="item.value" type="date" value-format="YYYY-MM-DD" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
+												<!-- 日期范围 -->
+												<el-date-picker v-if="item.field.type=='daterange'" v-model="item.value" type="daterange" value-format="YYYY-MM-DD"  start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
+												<!-- 日期时间 -->
+												<el-date-picker v-if="item.field.type=='datetime'" v-model="item.value" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="item.field.placeholder||'请选择日期'" style="width: 100%;"></el-date-picker>
+												<!-- 日期时间范围 -->
+												<el-date-picker v-if="item.field.type=='datetimerange'" v-model="item.value" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"></el-date-picker>
+												<!-- 开关 -->
+												<el-switch v-if="item.field.type=='switch'" v-model="item.value" active-value="1" inactive-value="0"></el-switch>
+												<!-- 标签 -->
+												<el-select v-if="item.field.type=='tags'" v-model="item.value" multiple filterable allow-create default-first-option no-data-text="输入关键词后按回车确认" :placeholder="item.field.placeholder||'请输入'"></el-select>
+											</td>
+											<td>
+												<el-icon class="del" @click="delFilter(index)"><el-icon-delete /></el-icon>
+											</td>
+										</tr>
+									</table>
+									<el-button type="text" icon="el-icon-plus" @click="addFilter">增加过滤项</el-button>
+								</div>
+							</el-scrollbar>
+						</el-tab-pane>
+						<el-tab-pane lazy>
+							<template #label>
+								<div class="tabs-label">常用</div>
+							</template>
+							<el-scrollbar>
+								<my ref="my" :data="myFilter" :filterName="filterName" @selectMyfilter="selectMyfilter"></my>
+							</el-scrollbar>
+						</el-tab-pane>
+					</el-tabs>
+				</el-main>
+				<el-footer>
+					<el-button type="primary" @click="ok" :disabled="filter.length<=0">立即过滤</el-button>
+					<el-button type="primary" plain @click="saveMy" :disabled="filter.length<=0">另存为常用</el-button>
+					<el-button @click="clear">清空过滤</el-button>
+				</el-footer>
+			</el-container>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+	import config from "@/config/filterBar"
+	import pySelect from './pySelect'
+	import my from './my'
+
+	export default {
+		name: 'filterBar',
+		components: {
+			pySelect,
+			my
+		},
+		props: {
+			filterName: { type: String, default: "" },
+			showOperator: { type: Boolean, default: true },
+			options: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				drawer: false,
+				operator: config.operator,
+				fields: this.options,
+				filter: [],
+				myFilter: [],
+				filterObjLength: 0,
+				saveLoading: false
+			}
+		},
+		computed: {
+			filterObj(){
+				const obj = {}
+				this.filter.forEach((item) => {
+					obj[item.field.value] = this.showOperator ? `${item.value}${config.separator}${item.operator}` : `${item.value}`
+				})
+				return obj
+			}
+		},
+		mounted(){
+			//默认显示的过滤项
+			this.fields.forEach((item) => {
+				if(item.selected){
+					this.filter.push({
+						field: item,
+						operator: item.operator || 'include',
+						value: ''
+					})
+				}
+			})
+		},
+		methods: {
+			//打开过滤器
+			openFilter(){
+				this.drawer = true
+			},
+			//增加过滤项
+			addFilter(){
+				if(this.fields.length<=0){
+					this.$message.warning('无过滤项');
+					return false
+				}
+				const filterNum = this.fields[this.filter.length] || this.fields[0]
+				this.filter.push({
+					field: filterNum,
+					operator: filterNum.operator || 'include',
+					value: ''
+				})
+			},
+			//删除过滤项
+			delFilter(index){
+				this.filter.splice(index, 1)
+			},
+			//过滤项字段变更事件
+			fieldChange(tr){
+				let oldType = tr.field.type
+				tr.field.type = ''
+				this.$nextTick(() => {
+					tr.field.type = oldType
+				})
+				tr.operator = tr.field.operator || 'include'
+				tr.value = ''
+			},
+			//下拉框显示事件处理异步
+			async visibleChange(isopen, item){
+				if(isopen && item.field.extend.request && !item.field.extend.remote){
+					item.selectLoading = true;
+					try {
+						var data = await item.field.extend.request()
+					}catch (error) {
+						console.log(error);
+					}
+					item.field.extend.data = data;
+					item.selectLoading = false;
+				}
+			},
+			//下拉框显示事件处理异步搜索
+			async remoteMethod(query, item){
+				if(query !== ''){
+					item.selectLoading = true;
+					try {
+					var data = await item.field.extend.request(query);
+					}catch (error) {
+						console.log(error);
+					}
+					item.field.extend.data = data;
+					item.selectLoading = false;
+				}else{
+					item.field.extend.data = [];
+				}
+			},
+			//选择常用过滤
+			selectMyfilter(item){
+				//常用过滤回显当前过滤项
+				this.filter = []
+				this.fields.forEach((field) => {
+					var filterValue = item.filterObj[field.value]
+					if(filterValue){
+						var operator = filterValue.split("|")[1]
+						var value = filterValue.split("|")[0]
+						if(field.type=='select' && field.extend.multiple){
+							value = value.split(",")
+						}else if(field.type=='daterange'){
+							value = value.split(",")
+						}
+						this.filter.push({
+							field: field,
+							operator: operator,
+							value:  value
+						})
+					}
+				})
+				this.filterObjLength = Object.keys(item.filterObj).length
+				this.$emit('filterChange',item.filterObj)
+				this.drawer = false
+			},
+			//立即过滤
+			ok(){
+				this.filterObjLength = this.filter.length
+				this.$emit('filterChange',this.filterObj)
+				this.drawer = false
+			},
+			//保存常用
+			saveMy(){
+				this.$prompt('常用过滤名称', '另存为常用', {
+					inputPlaceholder: '请输入识别度较高的常用过滤名称',
+					inputPattern: /\S/,
+					inputErrorMessage: '名称不能为空'
+				})
+				.then(async ({ value }) => {
+					this.saveLoading = true
+					const saveObj = {
+						title: value,
+						filterObj: this.filterObj
+					}
+					try {
+						var save = await config.saveMy(this.filterName, saveObj)
+					}catch (error) {
+						this.saveLoading = false
+						console.log(error);
+						return false
+					}
+					if(!save){
+						return false
+					}
+
+					this.myFilter.push(saveObj)
+					this.$message.success(`${this.filterName} 保存常用成功`)
+					this.saveLoading = false
+				})
+				.catch(() => {
+					//
+				})
+			},
+			//清空过滤
+			clear(){
+				this.filter = []
+				this.filterObjLength = 0
+				this.$emit('filterChange',this.filterObj)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tabs-label {padding:0 20px;}
+
+	.nodata {height:46px;line-height: 46px;margin:15px 0;border: 1px dashed #e6e6e6;color: #999;text-align: center;border-radius: 3px;}
+
+	.sc-filter-main {padding:20px;border-bottom: 1px solid #e6e6e6;background: #fff;}
+	.sc-filter-main h2 {font-size: 12px;color: #999;font-weight: normal;}
+	.sc-filter-main table {width: 100%;margin: 15px 0;}
+	.sc-filter-main table tr {}
+	.sc-filter-main table td {padding:5px 10px 5px 0;}
+	.sc-filter-main table td:deep(.el-input .el-input__inner)  {vertical-align: top;}
+	.sc-filter-main table td .el-select {display: block;}
+	.sc-filter-main table td .el-date-editor.el-input {display: block;width: 100%;}
+	.sc-filter-main table td .del {background: #fff;color: #999;width: 32px;height: 32px;line-height: 32px;text-align: center;border-radius:50%;font-size: 12px;cursor: pointer;}
+	.sc-filter-main table td .del:hover {background: #F56C6C;color: #fff;}
+
+	.root {display: flex;height: 100%;flex-direction: column}
+	.root:deep(.el-tabs__header) {margin: 0;}
+	.root:deep(.el-tabs__content) {flex: 1;background: #f6f8f9;}
+	.root:deep(.el-tabs__content) .el-tab-pane{overflow: auto;height:100%;}
+
+	[data-theme='dark'] .root:deep(.el-tabs__content) {background: none;}
+	[data-theme='dark'] .sc-filter-main {background: none;border-color:var(--el-border-color-base);}
+	[data-theme='dark'] .sc-filter-main table td .del {background: none;}
+	[data-theme='dark'] .sc-filter-main table td .del:hover {background: #F56C6C;}
+	[data-theme='dark'] .nodata {border-color:var(--el-border-color-base);}
+</style>
diff --git a/ui/src/components/scFilterBar/my.vue b/ui/src/components/scFilterBar/my.vue
new file mode 100644
index 0000000..15a52c1
--- /dev/null
+++ b/ui/src/components/scFilterBar/my.vue
@@ -0,0 +1,112 @@
+<!--
+ * @Descripttion: 过滤器V2 常用组件
+ * @version: 2.0
+ * @Author: sakuya
+ * @Date: 2021年7月31日16:49:56
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-filter-my">
+		<div v-if="loading" class="sc-filter-my-loading">
+			<el-skeleton :rows="2" animated />
+		</div>
+		<template v-else>
+			<el-empty v-if="myFilter.length<=0" :image-size="100">
+				<template #description>
+					<h2>没有常用的过滤</h2>
+					<p style="margin-top: 10px;max-width: 300px;">常用过滤可以将多个过滤条件保存为一个集合，方便下次进行相同条件的过滤</p>
+				</template>
+			</el-empty>
+			<ul v-else class="sc-filter-my-list">
+				<h2>我的常用过滤</h2>
+				<li v-for="(item, index) in myFilter" :key="index" @click="selectMyfilter(item)">
+					<label>{{item.title}}</label>
+					<el-popconfirm title="确认删除此常用过滤吗？" @confirm="closeMyfilter(item, index)">
+						<template #reference>
+							<el-icon class="del" @click.stop="()=>{}"><el-icon-delete /></el-icon>
+						</template>
+					</el-popconfirm>
+				</li>
+			</ul>
+		</template>
+	</div>
+
+</template>
+
+<script>
+	import config from "@/config/filterBar";
+
+	export default {
+		props: {
+			filterName: { type: String, default: "" },
+			data: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				loading: false,
+				myFilter: []
+			}
+		},
+		watch:{
+			data: {
+				handler(){
+					this.myFilter = this.data
+				},
+				deep: true
+			}
+		},
+		mounted() {
+			this.myFilter = this.data
+			this.getMyfilter()
+		},
+		methods: {
+			//选择常用过滤
+			selectMyfilter(item){
+				this.$emit('selectMyfilter', item)
+			},
+			//删除常用过滤
+			async closeMyfilter(item, index){
+				try {
+					var del = await config.delMy(this.filterName)
+				}catch (error) {
+					return false
+				}
+				if(!del){
+					return false
+				}
+				this.myFilter.splice(index, 1)
+				this.$message.success('删除常用成功')
+			},
+			//远程获取我的常用
+			async getMyfilter(){
+				this.loading = true
+				try {
+					this.myFilter = await config.getMy(this.filterName)
+				}catch (error) {
+					return false
+				}
+				this.loading = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-filter-my {}
+	.sc-filter-my-loading {padding:15px;}
+	.sc-filter-my-list {list-style-type: none;background: #fff;border-bottom: 1px solid #e6e6e6;}
+	.sc-filter-my-list h2 {font-size: 12px;color: #999;font-weight: normal;padding:20px;}
+	.sc-filter-my-list li {padding:12px 20px;cursor: pointer;position: relative;color: #3c4a54;padding-right:80px;}
+	.sc-filter-my-list li:hover {background: #ecf5ff;color: #409EFF;}
+	.sc-filter-my-list li label {cursor: pointer;font-size: 14px;line-height: 1.8;}
+	.sc-filter-my-list li label span {color: #999;margin-right: 10px;}
+	.sc-filter-my-list li .del {position: absolute;right:20px;top:8px;border-radius:50%;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;color: #999;}
+	.sc-filter-my-list li .del:hover {background: #F56C6C;color: #fff;}
+
+	[data-theme='dark'] .sc-filter-my .el-empty h2 {color: #fff;}
+	[data-theme='dark'] .sc-filter-my-list {background: none;border-color:var(--el-border-color-base);}
+	[data-theme='dark'] .sc-filter-my-list li {color: #d0d0d0;}
+	[data-theme='dark'] .sc-filter-my-list li:hover {background: var(--el-color-white);}
+</style>
diff --git a/ui/src/components/scFilterBar/pinyin.js b/ui/src/components/scFilterBar/pinyin.js
new file mode 100644
index 0000000..1308b4e
--- /dev/null
+++ b/ui/src/components/scFilterBar/pinyin.js
@@ -0,0 +1,2 @@
+/* eslint-disable */
+!function(n,a){"object"==typeof exports&&"undefined"!=typeof module?module.exports=a():"function"==typeof define&&define.amd?define(a):(n="undefined"!=typeof globalThis?globalThis:n||self).PinyinMatch=a()}(this,(function(){"use strict";var n=[],a={},i={};function u(n){for(var a=[],i=[],u=0;n.length>=u;u++)i.push(!0);return e(0,n,[],a,i),a}function e(a,i,u,o,g){if(a!==i.length)for(var h=function(h){var t=i.substring(a,h+1),r=!1;if(n.some((function(n){return 0===n.indexOf(t)}))&&!i[h+1]&&g[h+1]){if(1===t.length)u.push(t);else{var s=[];n.forEach((function(n){0===n.indexOf(t)&&s.push(n)})),u.push(s)}r=!0}else-1!==n.indexOf(t)&&g[h+1]&&(u.push(t),r=!0);if(r){var f=o.length;e(h+1,i,u,o,g),o.length===f&&(g[h+1]=!1),u.pop()}},t=a;i.length>t;t++)h(t);else o.push(u.join(" "))}function o(n){var a=[];return u(n).forEach((function(n){var i=n.split(" "),u=i.length-1;i[u].indexOf(",")?i[u].split(",").forEach((function(n){i.splice(u,1,n),a.push(JSON.parse(JSON.stringify(i)))})):a.push(i)})),0!==a.length&&a[0].length===n.length||a.push(n.split("")),i=function(n,a,i){return a in n?Object.defineProperty(n,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):n[a]=i,n}({},n,a),a}function g(n,a,i,u){if(!n)return!1;var e=n.split(" ");return e.forEach((function(n){n.length>0&&u&&e.push(n.charAt(0))})),i?e.some((function(n){return 0===n.indexOf(a)})):-1!==e.indexOf(a)}function h(n,u){if(!n||!u)return!1;n=n.toLowerCase(),u=u.replace(/\s+/g,"").toLowerCase();var e=n.indexOf(u);if(-1!==e)return[e,e+u.length-1];var g=t(n.split(""),[u.split("")],u);return g||t(function(n){for(var i=[],u=0,e=n.length;e>u;u++){var o=n.charAt(u);i.push(a[o]||o)}return i}(n),i[u]||o(u),u)}function t(n,a,i){for(var u=0;n.length>u;u++)for(var e=0;a.length>e;e++){var o=a[e],h=o.length,t=h===i.length,r=!0,s=0,f=0,c=0;if(n.length>=h){for(;o.length>s;s++)if(0===s&&" "===n[u+s+f])f+=1,s-=1;else if(" "===n[u+s+c])c+=1,s-=1;else if(!g(n[u+s+c],o[s],!n[u+s+1]||!o[s+1],t)){r=!1;break}if(r)return[u+f,c+u+s-1]}}return!1}return{match:function(i){return n=Object.keys(i),a=function(n){var a={};for(var i in n)for(var u=n[i],e=0,o=u.length;o>e;e++)a[u[e]]=a[u[e]]?a[u[e]]+" "+i:i;return a}(i),h}({a:"阿啊呵腌嗄吖锕",e:"额阿俄恶鹅遏鄂厄饿峨扼娥鳄哦蛾噩愕讹锷垩婀鹗萼谔莪腭锇颚呃阏屙苊轭",ai:"爱埃艾碍癌哀挨矮隘蔼唉皑哎霭捱暧嫒嗳瑷嗌锿砹",ei:"诶",xi:"系西席息希习吸喜细析戏洗悉锡溪惜稀袭夕洒晰昔牺腊烯熙媳栖膝隙犀蹊硒兮熄曦禧嬉玺奚汐徙羲铣淅嘻歙熹矽蟋郗唏皙隰樨浠忾蜥檄郄翕阋鳃舾屣葸螅咭粞觋欷僖醯鼷裼穸饩舄禊诶菥蓰",yi:"一以已意议义益亿易医艺食依移衣异伊仪宜射遗疑毅谊亦疫役忆抑尾乙译翼蛇溢椅沂泄逸蚁夷邑怡绎彝裔姨熠贻矣屹颐倚诣胰奕翌疙弈轶蛾驿壹猗臆弋铱旖漪迤佚翊诒怿痍懿饴峄揖眙镒仡黟肄咿翳挹缢呓刈咦嶷羿钇殪荑薏蜴镱噫癔苡悒嗌瘗衤佾埸圯舣酏劓",an:"安案按岸暗鞍氨俺胺铵谙庵黯鹌桉埯犴揞厂广",han:"厂汉韩含旱寒汗涵函喊憾罕焊翰邯撼瀚憨捍酣悍鼾邗颔蚶晗菡旰顸犴焓撖",ang:"昂仰盎肮",ao:"奥澳傲熬凹鳌敖遨鏖袄坳翱嗷拗懊岙螯骜獒鏊艹媪廒聱",wa:"瓦挖娃洼袜蛙凹哇佤娲呙腽",yu:"于与育余预域予遇奥语誉玉鱼雨渔裕愈娱欲吁舆宇羽逾豫郁寓吾狱喻御浴愉禹俞邪榆愚渝尉淤虞屿峪粥驭瑜禺毓钰隅芋熨瘀迂煜昱汩於臾盂聿竽萸妪腴圄谕觎揄龉谀俣馀庾妤瘐鬻欤鹬阈嵛雩鹆圉蜮伛纡窬窳饫蓣狳肀舁蝓燠",niu:"牛纽扭钮拗妞忸狃",o:"哦噢喔",ba:"把八巴拔伯吧坝爸霸罢芭跋扒叭靶疤笆耙鲅粑岜灞钯捌菝魃茇",pa:"怕帕爬扒趴琶啪葩耙杷钯筢",pi:"被批副否皮坏辟啤匹披疲罢僻毗坯脾譬劈媲屁琵邳裨痞癖陂丕枇噼霹吡纰砒铍淠郫埤濞睥芘蚍圮鼙罴蜱疋貔仳庀擗甓陴",bi:"比必币笔毕秘避闭佛辟壁弊彼逼碧鼻臂蔽拂泌璧庇痹毙弼匕鄙陛裨贲敝蓖吡篦纰俾铋毖筚荸薜婢哔跸濞秕荜愎睥妣芘箅髀畀滗狴萆嬖襞舭",bai:"百白败摆伯拜柏佰掰呗擘捭稗",bo:"波博播勃拨薄佛伯玻搏柏泊舶剥渤卜驳簿脖膊簸菠礴箔铂亳钵帛擘饽跛钹趵檗啵鹁擗踣",bei:"北被备倍背杯勃贝辈悲碑臂卑悖惫蓓陂钡狈呗焙碚褙庳鞴孛鹎邶鐾",ban:"办版半班般板颁伴搬斑扮拌扳瓣坂阪绊钣瘢舨癍",pan:"判盘番潘攀盼拚畔胖叛拌蹒磐爿蟠泮袢襻丬",bin:"份宾频滨斌彬濒殡缤鬓槟摈膑玢镔豳髌傧",bang:"帮邦彭旁榜棒膀镑绑傍磅蚌谤梆浜蒡",pang:"旁庞乓磅螃彷滂逄耪",beng:"泵崩蚌蹦迸绷甭嘣甏堋",bao:"报保包宝暴胞薄爆炮饱抱堡剥鲍曝葆瀑豹刨褒雹孢苞煲褓趵鸨龅勹",bu:"不部步布补捕堡埔卜埠簿哺怖钚卟瓿逋晡醭钸",pu:"普暴铺浦朴堡葡谱埔扑仆蒲曝瀑溥莆圃璞濮菩蹼匍噗氆攵镨攴镤",mian:"面棉免绵缅勉眠冕娩腼渑湎沔黾宀眄",po:"破繁坡迫颇朴泊婆泼魄粕鄱珀陂叵笸泺皤钋钷",fan:"反范犯繁饭泛翻凡返番贩烦拚帆樊藩矾梵蕃钒幡畈蘩蹯燔",fu:"府服副负富复福夫妇幅付扶父符附腐赴佛浮覆辅傅伏抚赋辐腹弗肤阜袱缚甫氟斧孚敷俯拂俘咐腑孵芙涪釜脯茯馥宓绂讣呋罘麸蝠匐芾蜉跗凫滏蝮驸绋蚨砩桴赙菔呒趺苻拊阝鲋怫稃郛莩幞祓艴黻黼鳆",ben:"本体奔苯笨夯贲锛畚坌",feng:"风丰封峰奉凤锋冯逢缝蜂枫疯讽烽俸沣酆砜葑唪",bian:"变便边编遍辩鞭辨贬匾扁卞汴辫砭苄蝙鳊弁窆笾煸褊碥忭缏",pian:"便片篇偏骗翩扁骈胼蹁谝犏缏",zhen:"镇真针圳振震珍阵诊填侦臻贞枕桢赈祯帧甄斟缜箴疹砧榛鸩轸稹溱蓁胗椹朕畛浈",biao:"表标彪镖裱飚膘飙镳婊骠飑杓髟鳔灬瘭",piao:"票朴漂飘嫖瓢剽缥殍瞟骠嘌莩螵",huo:"和活或货获火伙惑霍祸豁嚯藿锪蠖钬耠镬夥灬劐攉",bie:"别鳖憋瘪蹩",min:"民敏闽闵皿泯岷悯珉抿黾缗玟愍苠鳘",fen:"分份纷奋粉氛芬愤粪坟汾焚酚吩忿棼玢鼢瀵偾鲼",bing:"并病兵冰屏饼炳秉丙摒柄槟禀枋邴冫",geng:"更耕颈庚耿梗埂羹哽赓绠鲠",fang:"方放房防访纺芳仿坊妨肪邡舫彷枋鲂匚钫",xian:"现先县见线限显险献鲜洗宪纤陷闲贤仙衔掀咸嫌掺羡弦腺痫娴舷馅酰铣冼涎暹籼锨苋蚬跹岘藓燹鹇氙莶霰跣猃彡祆筅",fou:"不否缶",ca:"拆擦嚓礤",cha:"查察差茶插叉刹茬楂岔诧碴嚓喳姹杈汊衩搽槎镲苴檫馇锸猹",cai:"才采财材菜彩裁蔡猜踩睬",can:"参残餐灿惨蚕掺璨惭粲孱骖黪",shen:"信深参身神什审申甚沈伸慎渗肾绅莘呻婶娠砷蜃哂椹葚吲糁渖诜谂矧胂",cen:"参岑涔",san:"三参散伞叁糁馓毵",cang:"藏仓苍沧舱臧伧",zang:"藏脏葬赃臧奘驵",chen:"称陈沈沉晨琛臣尘辰衬趁忱郴宸谌碜嗔抻榇伧谶龀肜",cao:"草操曹槽糙嘈漕螬艚屮",ce:"策测册侧厕栅恻",ze:"责则泽择侧咋啧仄箦赜笮舴昃迮帻",zhai:"债择齐宅寨侧摘窄斋祭翟砦瘵哜",dao:"到道导岛倒刀盗稻蹈悼捣叨祷焘氘纛刂帱忉",ceng:"层曾蹭噌",zha:"查扎炸诈闸渣咋乍榨楂札栅眨咤柞喳喋铡蚱吒怍砟揸痄哳齄",chai:"差拆柴钗豺侪虿瘥",ci:"次此差词辞刺瓷磁兹慈茨赐祠伺雌疵鹚糍呲粢",zi:"资自子字齐咨滋仔姿紫兹孜淄籽梓鲻渍姊吱秭恣甾孳訾滓锱辎趑龇赀眦缁呲笫谘嵫髭茈粢觜耔",cuo:"措错磋挫搓撮蹉锉厝嵯痤矬瘥脞鹾",chan:"产单阐崭缠掺禅颤铲蝉搀潺蟾馋忏婵孱觇廛谄谗澶骣羼躔蒇冁",shan:"山单善陕闪衫擅汕扇掺珊禅删膳缮赡鄯栅煽姗跚鳝嬗潸讪舢苫疝掸膻钐剡蟮芟埏彡骟",zhan:"展战占站崭粘湛沾瞻颤詹斩盏辗绽毡栈蘸旃谵搌",xin:"新心信辛欣薪馨鑫芯锌忻莘昕衅歆囟忄镡",lian:"联连练廉炼脸莲恋链帘怜涟敛琏镰濂楝鲢殓潋裢裣臁奁莶蠊蔹",chang:"场长厂常偿昌唱畅倡尝肠敞倘猖娼淌裳徜昶怅嫦菖鲳阊伥苌氅惝鬯",zhang:"长张章障涨掌帐胀彰丈仗漳樟账杖璋嶂仉瘴蟑獐幛鄣嫜",chao:"超朝潮炒钞抄巢吵剿绰嘲晁焯耖怊",zhao:"着照招找召朝赵兆昭肇罩钊沼嘲爪诏濯啁棹笊",zhou:"调州周洲舟骤轴昼宙粥皱肘咒帚胄绉纣妯啁诌繇碡籀酎荮",che:"车彻撤尺扯澈掣坼砗屮",ju:"车局据具举且居剧巨聚渠距句拒俱柜菊拘炬桔惧矩鞠驹锯踞咀瞿枸掬沮莒橘飓疽钜趄踽遽琚龃椐苣裾榘狙倨榉苴讵雎锔窭鞫犋屦醵",cheng:"成程城承称盛抢乘诚呈净惩撑澄秤橙骋逞瞠丞晟铛埕塍蛏柽铖酲裎枨",rong:"容荣融绒溶蓉熔戎榕茸冗嵘肜狨蝾",sheng:"生声升胜盛乘圣剩牲甸省绳笙甥嵊晟渑眚",deng:"等登邓灯澄凳瞪蹬噔磴嶝镫簦戥",zhi:"制之治质职只志至指织支值知识直致执置止植纸拓智殖秩旨址滞氏枝芝脂帜汁肢挚稚酯掷峙炙栉侄芷窒咫吱趾痔蜘郅桎雉祉郦陟痣蛭帙枳踯徵胝栀贽祗豸鸷摭轵卮轾彘觯絷跖埴夂黹忮骘膣踬",zheng:"政正证争整征郑丁症挣蒸睁铮筝拯峥怔诤狰徵钲",tang:"堂唐糖汤塘躺趟倘棠烫淌膛搪镗傥螳溏帑羰樘醣螗耥铴瑭",chi:"持吃池迟赤驰尺斥齿翅匙痴耻炽侈弛叱啻坻眙嗤墀哧茌豉敕笞饬踟蚩柢媸魑篪褫彳鸱螭瘛眵傺",shi:"是时实事市十使世施式势视识师史示石食始士失适试什泽室似诗饰殖释驶氏硕逝湿蚀狮誓拾尸匙仕柿矢峙侍噬嗜栅拭嘘屎恃轼虱耆舐莳铈谥炻豕鲥饣螫酾筮埘弑礻蓍鲺贳",qi:"企其起期气七器汽奇齐启旗棋妻弃揭枝歧欺骑契迄亟漆戚岂稽岐琦栖缉琪泣乞砌祁崎绮祺祈凄淇杞脐麒圻憩芪伎俟畦耆葺沏萋骐鳍綦讫蕲屺颀亓碛柒啐汔綮萁嘁蛴槭欹芑桤丌蜞",chuai:"揣踹啜搋膪",tuo:"托脱拓拖妥驼陀沱鸵驮唾椭坨佗砣跎庹柁橐乇铊沲酡鼍箨柝",duo:"多度夺朵躲铎隋咄堕舵垛惰哆踱跺掇剁柁缍沲裰哚隳",xue:"学血雪削薛穴靴谑噱鳕踅泶彐",chong:"重种充冲涌崇虫宠忡憧舂茺铳艟",chou:"筹抽绸酬愁丑臭仇畴稠瞅踌惆俦瘳雠帱",qiu:"求球秋丘邱仇酋裘龟囚遒鳅虬蚯泅楸湫犰逑巯艽俅蝤赇鼽糗",xiu:"修秀休宿袖绣臭朽锈羞嗅岫溴庥馐咻髹鸺貅",chu:"出处础初助除储畜触楚厨雏矗橱锄滁躇怵绌搐刍蜍黜杵蹰亍樗憷楮",tuan:"团揣湍疃抟彖",zhui:"追坠缀揣椎锥赘惴隹骓缒",chuan:"传川船穿串喘椽舛钏遄氚巛舡",zhuan:"专转传赚砖撰篆馔啭颛",yuan:"元员院原源远愿园援圆缘袁怨渊苑宛冤媛猿垣沅塬垸鸳辕鸢瑗圜爰芫鼋橼螈眢箢掾",cuan:"窜攒篡蹿撺爨汆镩",chuang:"创床窗闯幢疮怆",zhuang:"装状庄壮撞妆幢桩奘僮戆",chui:"吹垂锤炊椎陲槌捶棰",chun:"春纯醇淳唇椿蠢鹑朐莼肫蝽",zhun:"准屯淳谆肫窀",cu:"促趋趣粗簇醋卒蹴猝蹙蔟殂徂",dun:"吨顿盾敦蹲墩囤沌钝炖盹遁趸砘礅",qu:"区去取曲趋渠趣驱屈躯衢娶祛瞿岖龋觑朐蛐癯蛆苣阒诎劬蕖蘧氍黢蠼璩麴鸲磲",xu:"需许续须序徐休蓄畜虚吁绪叙旭邪恤墟栩絮圩婿戌胥嘘浒煦酗诩朐盱蓿溆洫顼勖糈砉醑",chuo:"辍绰戳淖啜龊踔辶",zu:"组族足祖租阻卒俎诅镞菹",ji:"济机其技基记计系期际及集级几给积极己纪即继击既激绩急奇吉季齐疾迹鸡剂辑籍寄挤圾冀亟寂暨脊跻肌稽忌饥祭缉棘矶汲畸姬藉瘠骥羁妓讥稷蓟悸嫉岌叽伎鲫诘楫荠戟箕霁嵇觊麂畿玑笈犄芨唧屐髻戢佶偈笄跽蒺乩咭赍嵴虮掎齑殛鲚剞洎丌墼蕺彐芰哜",cong:"从丛匆聪葱囱琮淙枞骢苁璁",zong:"总从综宗纵踪棕粽鬃偬枞腙",cou:"凑辏腠楱",cui:"衰催崔脆翠萃粹摧璀瘁悴淬啐隹毳榱",wei:"为位委未维卫围违威伟危味微唯谓伪慰尾魏韦胃畏帷喂巍萎蔚纬潍尉渭惟薇苇炜圩娓诿玮崴桅偎逶倭猥囗葳隗痿猬涠嵬韪煨艉隹帏闱洧沩隈鲔軎",cun:"村存寸忖皴",zuo:"作做座左坐昨佐琢撮祚柞唑嘬酢怍笮阼胙",zuan:"钻纂攥缵躜",da:"大达打答搭沓瘩惮嗒哒耷鞑靼褡笪怛妲",dai:"大代带待贷毒戴袋歹呆隶逮岱傣棣怠殆黛甙埭诒绐玳呔迨",tai:"台太态泰抬胎汰钛苔薹肽跆邰鲐酞骀炱",ta:"他它她拓塔踏塌榻沓漯獭嗒挞蹋趿遢铊鳎溻闼",dan:"但单石担丹胆旦弹蛋淡诞氮郸耽殚惮儋眈疸澹掸膻啖箪聃萏瘅赕",lu:"路六陆录绿露鲁卢炉鹿禄赂芦庐碌麓颅泸卤潞鹭辘虏璐漉噜戮鲈掳橹轳逯渌蓼撸鸬栌氇胪镥簏舻辂垆",tan:"谈探坦摊弹炭坛滩贪叹谭潭碳毯瘫檀痰袒坍覃忐昙郯澹钽锬",ren:"人任认仁忍韧刃纫饪妊荏稔壬仞轫亻衽",jie:"家结解价界接节她届介阶街借杰洁截姐揭捷劫戒皆竭桔诫楷秸睫藉拮芥诘碣嗟颉蚧孑婕疖桀讦疥偈羯袷哜喈卩鲒骱",yan:"研严验演言眼烟沿延盐炎燕岩宴艳颜殷彦掩淹阎衍铅雁咽厌焰堰砚唁焉晏檐蜒奄俨腌妍谚兖筵焱偃闫嫣鄢湮赝胭琰滟阉魇酽郾恹崦芫剡鼹菸餍埏谳讠厣罨",dang:"当党档荡挡宕砀铛裆凼菪谠",tao:"套讨跳陶涛逃桃萄淘掏滔韬叨洮啕绦饕鼗",tiao:"条调挑跳迢眺苕窕笤佻啁粜髫铫祧龆蜩鲦",te:"特忑忒铽慝",de:"的地得德底锝",dei:"得",di:"的地第提低底抵弟迪递帝敌堤蒂缔滴涤翟娣笛棣荻谛狄邸嘀砥坻诋嫡镝碲骶氐柢籴羝睇觌",ti:"体提题弟替梯踢惕剔蹄棣啼屉剃涕锑倜悌逖嚏荑醍绨鹈缇裼",tui:"推退弟腿褪颓蜕忒煺",you:"有由又优游油友右邮尤忧幼犹诱悠幽佑釉柚铀鱿囿酉攸黝莠猷蝣疣呦蚴莸莜铕宥繇卣牖鼬尢蚰侑",dian:"电点店典奠甸碘淀殿垫颠滇癫巅惦掂癜玷佃踮靛钿簟坫阽",tian:"天田添填甜甸恬腆佃舔钿阗忝殄畋栝掭",zhu:"主术住注助属逐宁著筑驻朱珠祝猪诸柱竹铸株瞩嘱贮煮烛苎褚蛛拄铢洙竺蛀渚伫杼侏澍诛茱箸炷躅翥潴邾槠舳橥丶瘃麈疰",nian:"年念酿辗碾廿捻撵拈蔫鲶埝鲇辇黏",diao:"调掉雕吊钓刁貂凋碉鲷叼铫铞",yao:"要么约药邀摇耀腰遥姚窑瑶咬尧钥谣肴夭侥吆疟妖幺杳舀窕窈曜鹞爻繇徭轺铫鳐崾珧",die:"跌叠蝶迭碟爹谍牒耋佚喋堞瓞鲽垤揲蹀",she:"设社摄涉射折舍蛇拾舌奢慑赦赊佘麝歙畲厍猞揲滠",ye:"业也夜叶射野液冶喝页爷耶邪咽椰烨掖拽曳晔谒腋噎揶靥邺铘揲",xie:"些解协写血叶谢械鞋胁斜携懈契卸谐泄蟹邪歇泻屑挟燮榭蝎撷偕亵楔颉缬邂鲑瀣勰榍薤绁渫廨獬躞",zhe:"这者着著浙折哲蔗遮辙辄柘锗褶蜇蛰鹧谪赭摺乇磔螫",ding:"定订顶丁鼎盯钉锭叮仃铤町酊啶碇腚疔玎耵",diu:"丢铥",ting:"听庭停厅廷挺亭艇婷汀铤烃霆町蜓葶梃莛",dong:"动东董冬洞懂冻栋侗咚峒氡恫胴硐垌鸫岽胨",tong:"同通统童痛铜桶桐筒彤侗佟潼捅酮砼瞳恸峒仝嗵僮垌茼",zhong:"中重种众终钟忠仲衷肿踵冢盅蚣忪锺舯螽夂",dou:"都斗读豆抖兜陡逗窦渎蚪痘蔸钭篼",du:"度都独督读毒渡杜堵赌睹肚镀渎笃竺嘟犊妒牍蠹椟黩芏髑",duan:"断段短端锻缎煅椴簖",dui:"对队追敦兑堆碓镦怼憝",rui:"瑞兑锐睿芮蕊蕤蚋枘",yue:"月说约越乐跃兑阅岳粤悦曰钥栎钺樾瀹龠哕刖",tun:"吞屯囤褪豚臀饨暾氽",hui:"会回挥汇惠辉恢徽绘毁慧灰贿卉悔秽溃荟晖彗讳诲珲堕诙蕙晦睢麾烩茴喙桧蛔洄浍虺恚蟪咴隳缋哕",wu:"务物无五武午吴舞伍污乌误亡恶屋晤悟吾雾芜梧勿巫侮坞毋诬呜钨邬捂鹜兀婺妩於戊鹉浯蜈唔骛仵焐芴鋈庑鼯牾怃圬忤痦迕杌寤阢",ya:"亚压雅牙押鸭呀轧涯崖邪芽哑讶鸦娅衙丫蚜碣垭伢氩桠琊揠吖睚痖疋迓岈砑",he:"和合河何核盖贺喝赫荷盒鹤吓呵苛禾菏壑褐涸阂阖劾诃颌嗬貉曷翮纥盍",wo:"我握窝沃卧挝涡斡渥幄蜗喔倭莴龌肟硪",en:"恩摁蒽",n:"嗯唔",er:"而二尔儿耳迩饵洱贰铒珥佴鸸鲕",fa:"发法罚乏伐阀筏砝垡珐",quan:"全权券泉圈拳劝犬铨痊诠荃醛蜷颧绻犭筌鬈悛辁畎",fei:"费非飞肥废菲肺啡沸匪斐蜚妃诽扉翡霏吠绯腓痱芾淝悱狒榧砩鲱篚镄",pei:"配培坏赔佩陪沛裴胚妃霈淠旆帔呸醅辔锫",ping:"平评凭瓶冯屏萍苹乒坪枰娉俜鲆",fo:"佛",hu:"和护户核湖互乎呼胡戏忽虎沪糊壶葫狐蝴弧瑚浒鹄琥扈唬滹惚祜囫斛笏芴醐猢怙唿戽槲觳煳鹕冱瓠虍岵鹱烀轷",ga:"夹咖嘎尬噶旮伽尕钆尜",ge:"个合各革格歌哥盖隔割阁戈葛鸽搁胳舸疙铬骼蛤咯圪镉颌仡硌嗝鬲膈纥袼搿塥哿虼",ha:"哈蛤铪",xia:"下夏峡厦辖霞夹虾狭吓侠暇遐瞎匣瑕唬呷黠硖罅狎瘕柙",gai:"改该盖概溉钙丐芥赅垓陔戤",hai:"海还害孩亥咳骸骇氦嗨胲醢",gan:"干感赶敢甘肝杆赣乾柑尴竿秆橄矸淦苷擀酐绀泔坩旰疳澉",gang:"港钢刚岗纲冈杠缸扛肛罡戆筻",jiang:"将强江港奖讲降疆蒋姜浆匠酱僵桨绛缰犟豇礓洚茳糨耩",hang:"行航杭巷夯吭桁沆绗颃",gong:"工公共供功红贡攻宫巩龚恭拱躬弓汞蚣珙觥肱廾",hong:"红宏洪轰虹鸿弘哄烘泓訇蕻闳讧荭黉薨",guang:"广光逛潢犷胱咣桄",qiong:"穷琼穹邛茕筇跫蛩銎",gao:"高告搞稿膏糕镐皋羔锆杲郜睾诰藁篙缟槁槔",hao:"好号毫豪耗浩郝皓昊皋蒿壕灏嚎濠蚝貉颢嗥薅嚆",li:"理力利立里李历例离励礼丽黎璃厉厘粒莉梨隶栗荔沥犁漓哩狸藜罹篱鲤砺吏澧俐骊溧砾莅锂笠蠡蛎痢雳俪傈醴栎郦俚枥喱逦娌鹂戾砬唳坜疠蜊黧猁鬲粝蓠呖跞疬缡鲡鳢嫠詈悝苈篥轹",jia:"家加价假佳架甲嘉贾驾嫁夹稼钾挟拮迦伽颊浃枷戛荚痂颉镓笳珈岬胛袈郏葭袷瘕铗跏蛱恝哿",luo:"落罗络洛逻螺锣骆萝裸漯烙摞骡咯箩珞捋荦硌雒椤镙跞瘰泺脶猡倮蠃",ke:"可科克客刻课颗渴壳柯棵呵坷恪苛咳磕珂稞瞌溘轲窠嗑疴蝌岢铪颏髁蚵缂氪骒钶锞",qia:"卡恰洽掐髂袷咭葜",gei:"给",gen:"根跟亘艮哏茛",hen:"很狠恨痕哏",gou:"构购够句沟狗钩拘勾苟垢枸篝佝媾诟岣彀缑笱鞲觏遘",kou:"口扣寇叩抠佝蔻芤眍筘",gu:"股古顾故固鼓骨估谷贾姑孤雇辜菇沽咕呱锢钴箍汩梏痼崮轱鸪牯蛊诂毂鹘菰罟嘏臌觚瞽蛄酤牿鲴",pai:"牌排派拍迫徘湃俳哌蒎",gua:"括挂瓜刮寡卦呱褂剐胍诖鸹栝呙",tou:"投头透偷愉骰亠",guai:"怪拐乖",kuai:"会快块筷脍蒯侩浍郐蒉狯哙",guan:"关管观馆官贯冠惯灌罐莞纶棺斡矜倌鹳鳏盥掼涫",wan:"万完晚湾玩碗顽挽弯蔓丸莞皖宛婉腕蜿惋烷琬畹豌剜纨绾脘菀芄箢",ne:"呢哪呐讷疒",gui:"规贵归轨桂柜圭鬼硅瑰跪龟匮闺诡癸鳜桧皈鲑刽晷傀眭妫炅庋簋刿宄匦",jun:"军均俊君峻菌竣钧骏龟浚隽郡筠皲麇捃",jiong:"窘炯迥炅冂扃",jue:"决绝角觉掘崛诀獗抉爵嚼倔厥蕨攫珏矍蹶谲镢鳜噱桷噘撅橛孓觖劂爝",gun:"滚棍辊衮磙鲧绲丨",hun:"婚混魂浑昏棍珲荤馄诨溷阍",guo:"国过果郭锅裹帼涡椁囗蝈虢聒埚掴猓崞蜾呙馘",hei:"黑嘿嗨",kan:"看刊勘堪坎砍侃嵌槛瞰阚龛戡凵莰",heng:"衡横恒亨哼珩桁蘅",mo:"万没么模末冒莫摩墨默磨摸漠脉膜魔沫陌抹寞蘑摹蓦馍茉嘿谟秣蟆貉嫫镆殁耱嬷麽瘼貊貘",peng:"鹏朋彭膨蓬碰苹棚捧亨烹篷澎抨硼怦砰嘭蟛堋",hou:"后候厚侯猴喉吼逅篌糇骺後鲎瘊堠",hua:"化华划话花画滑哗豁骅桦猾铧砉",huai:"怀坏淮徊槐踝",huan:"还环换欢患缓唤焕幻痪桓寰涣宦垸洹浣豢奂郇圜獾鲩鬟萑逭漶锾缳擐",xun:"讯训迅孙寻询循旬巡汛勋逊熏徇浚殉驯鲟薰荀浔洵峋埙巽郇醺恂荨窨蕈曛獯",huang:"黄荒煌皇凰慌晃潢谎惶簧璜恍幌湟蝗磺隍徨遑肓篁鳇蟥癀",nai:"能乃奶耐奈鼐萘氖柰佴艿",luan:"乱卵滦峦鸾栾銮挛孪脔娈",qie:"切且契窃茄砌锲怯伽惬妾趄挈郄箧慊",jian:"建间件见坚检健监减简艰践兼鉴键渐柬剑尖肩舰荐箭浅剪俭碱茧奸歼拣捡煎贱溅槛涧堑笺谏饯锏缄睑謇蹇腱菅翦戬毽笕犍硷鞯牮枧湔鲣囝裥踺搛缣鹣蒹谫僭戋趼楗",nan:"南难男楠喃囡赧腩囝蝻",qian:"前千钱签潜迁欠纤牵浅遣谦乾铅歉黔谴嵌倩钳茜虔堑钎骞阡掮钤扦芊犍荨仟芡悭缱佥愆褰凵肷岍搴箝慊椠",qiang:"强抢疆墙枪腔锵呛羌蔷襁羟跄樯戕嫱戗炝镪锖蜣",xiang:"向项相想乡象响香降像享箱羊祥湘详橡巷翔襄厢镶飨饷缃骧芗庠鲞葙蟓",jiao:"教交较校角觉叫脚缴胶轿郊焦骄浇椒礁佼蕉娇矫搅绞酵剿嚼饺窖跤蛟侥狡姣皎茭峤铰醮鲛湫徼鹪僬噍艽挢敫",zhuo:"着著缴桌卓捉琢灼浊酌拙茁涿镯淖啄濯焯倬擢斫棹诼浞禚",qiao:"桥乔侨巧悄敲俏壳雀瞧翘窍峭锹撬荞跷樵憔鞘橇峤诮谯愀鞒硗劁缲",xiao:"小效销消校晓笑肖削孝萧俏潇硝宵啸嚣霄淆哮筱逍姣箫骁枭哓绡蛸崤枵魈",si:"司四思斯食私死似丝饲寺肆撕泗伺嗣祀厮驷嘶锶俟巳蛳咝耜笥纟糸鸶缌澌姒汜厶兕",kai:"开凯慨岂楷恺揩锴铠忾垲剀锎蒈",jin:"进金今近仅紧尽津斤禁锦劲晋谨筋巾浸襟靳瑾烬缙钅矜觐堇馑荩噤廑妗槿赆衿卺",qin:"亲勤侵秦钦琴禽芹沁寝擒覃噙矜嗪揿溱芩衾廑锓吣檎螓",jing:"经京精境竞景警竟井惊径静劲敬净镜睛晶颈荆兢靖泾憬鲸茎腈菁胫阱旌粳靓痉箐儆迳婧肼刭弪獍",ying:"应营影英景迎映硬盈赢颖婴鹰荧莹樱瑛蝇萦莺颍膺缨瀛楹罂荥萤鹦滢蓥郢茔嘤璎嬴瘿媵撄潆",jiu:"就究九酒久救旧纠舅灸疚揪咎韭玖臼柩赳鸠鹫厩啾阄桕僦鬏",zui:"最罪嘴醉咀蕞觜",juan:"卷捐圈眷娟倦绢隽镌涓鹃鄄蠲狷锩桊",suan:"算酸蒜狻",yun:"员运云允孕蕴韵酝耘晕匀芸陨纭郧筠恽韫郓氲殒愠昀菀狁",qun:"群裙逡麇",ka:"卡喀咖咔咯佧胩",kang:"康抗扛慷炕亢糠伉钪闶",keng:"坑铿吭",kao:"考靠烤拷铐栲尻犒",ken:"肯垦恳啃龈裉",yin:"因引银印音饮阴隐姻殷淫尹荫吟瘾寅茵圻垠鄞湮蚓氤胤龈窨喑铟洇狺夤廴吲霪茚堙",kong:"空控孔恐倥崆箜",ku:"苦库哭酷裤枯窟挎骷堀绔刳喾",kua:"跨夸垮挎胯侉",kui:"亏奎愧魁馈溃匮葵窥盔逵睽馗聩喟夔篑岿喹揆隗傀暌跬蒉愦悝蝰",kuan:"款宽髋",kuang:"况矿框狂旷眶匡筐邝圹哐贶夼诳诓纩",que:"确却缺雀鹊阙瘸榷炔阕悫",kun:"困昆坤捆琨锟鲲醌髡悃阃",kuo:"扩括阔廓蛞",la:"拉落垃腊啦辣蜡喇剌旯砬邋瘌",lai:"来莱赖睐徕籁涞赉濑癞崃疠铼",lan:"兰览蓝篮栏岚烂滥缆揽澜拦懒榄斓婪阑褴罱啉谰镧漤",lin:"林临邻赁琳磷淋麟霖鳞凛拎遴蔺吝粼嶙躏廪檩啉辚膦瞵懔",lang:"浪朗郎廊狼琅榔螂阆锒莨啷蒗稂",liang:"量两粮良辆亮梁凉谅粱晾靓踉莨椋魉墚",lao:"老劳落络牢捞涝烙姥佬崂唠酪潦痨醪铑铹栳耢",mu:"目模木亩幕母牧莫穆姆墓慕牟牡募睦缪沐暮拇姥钼苜仫毪坶",le:"了乐勒肋叻鳓嘞仂泐",lei:"类累雷勒泪蕾垒磊擂镭肋羸耒儡嫘缧酹嘞诔檑",sui:"随岁虽碎尿隧遂髓穗绥隋邃睢祟濉燧谇眭荽",lie:"列烈劣裂猎冽咧趔洌鬣埒捩躐",leng:"冷愣棱楞塄",ling:"领令另零灵龄陵岭凌玲铃菱棱伶羚苓聆翎泠瓴囹绫呤棂蛉酃鲮柃",lia:"俩",liao:"了料疗辽廖聊寥缪僚燎缭撂撩嘹潦镣寮蓼獠钌尥鹩",liu:"流刘六留柳瘤硫溜碌浏榴琉馏遛鎏骝绺镏旒熘鹨锍",lun:"论轮伦仑纶沦抡囵",lv:"率律旅绿虑履吕铝屡氯缕滤侣驴榈闾偻褛捋膂稆",lou:"楼露漏陋娄搂篓喽镂偻瘘髅耧蝼嵝蒌",mao:"贸毛矛冒貌茂茅帽猫髦锚懋袤牦卯铆耄峁瑁蟊茆蝥旄泖昴瞀",long:"龙隆弄垄笼拢聋陇胧珑窿茏咙砻垅泷栊癃",nong:"农浓弄脓侬哝",shuang:"双爽霜孀泷",shu:"术书数属树输束述署熟殊蔬舒疏鼠淑叔暑枢墅俞曙抒竖蜀薯梳戍恕孰沭赎庶漱塾倏澍纾姝菽黍腧秫毹殳疋摅",shuai:"率衰帅摔甩蟀",lve:"略掠锊",ma:"么马吗摩麻码妈玛嘛骂抹蚂唛蟆犸杩",me:"么麽",mai:"买卖麦迈脉埋霾荬劢",man:"满慢曼漫埋蔓瞒蛮鳗馒幔谩螨熳缦镘颟墁鞔嫚",mi:"米密秘迷弥蜜谜觅靡泌眯麋猕谧咪糜宓汨醚嘧弭脒冖幂祢縻蘼芈糸敉",men:"们门闷瞒汶扪焖懑鞔钔",mang:"忙盲茫芒氓莽蟒邙硭漭",meng:"蒙盟梦猛孟萌氓朦锰檬勐懵蟒蜢虻黾蠓艨甍艋瞢礞",miao:"苗秒妙描庙瞄缪渺淼藐缈邈鹋杪眇喵",mou:"某谋牟缪眸哞鍪蛑侔厶",miu:"缪谬",mei:"美没每煤梅媒枚妹眉魅霉昧媚玫酶镁湄寐莓袂楣糜嵋镅浼猸鹛",wen:"文问闻稳温纹吻蚊雯紊瘟汶韫刎璺玟阌",mie:"灭蔑篾乜咩蠛",ming:"明名命鸣铭冥茗溟酩瞑螟暝",na:"内南那纳拿哪娜钠呐捺衲镎肭",nei:"内那哪馁",nuo:"难诺挪娜糯懦傩喏搦锘",ruo:"若弱偌箬",nang:"囊馕囔曩攮",nao:"脑闹恼挠瑙淖孬垴铙桡呶硇猱蛲",ni:"你尼呢泥疑拟逆倪妮腻匿霓溺旎昵坭铌鲵伲怩睨猊",nen:"嫩恁",neng:"能",nin:"您恁",niao:"鸟尿溺袅脲茑嬲",nie:"摄聂捏涅镍孽捻蘖啮蹑嗫臬镊颞乜陧",niang:"娘酿",ning:"宁凝拧泞柠咛狞佞聍甯",nu:"努怒奴弩驽帑孥胬",nv:"女钕衄恧",ru:"入如女乳儒辱汝茹褥孺濡蠕嚅缛溽铷洳薷襦颥蓐",nuan:"暖",nve:"虐疟",re:"热若惹喏",ou:"区欧偶殴呕禺藕讴鸥瓯沤耦怄",pao:"跑炮泡抛刨袍咆疱庖狍匏脬",pou:"剖掊裒",pen:"喷盆湓",pie:"瞥撇苤氕丿",pin:"品贫聘频拼拚颦姘嫔榀牝",se:"色塞瑟涩啬穑铯槭",qing:"情青清请亲轻庆倾顷卿晴氢擎氰罄磬蜻箐鲭綮苘黥圊檠謦",zan:"赞暂攒堑昝簪糌瓒錾趱拶",shao:"少绍召烧稍邵哨韶捎勺梢鞘芍苕劭艄筲杓潲",sao:"扫骚嫂梢缫搔瘙臊埽缲鳋",sha:"沙厦杀纱砂啥莎刹杉傻煞鲨霎嗄痧裟挲铩唼歃",xuan:"县选宣券旋悬轩喧玄绚渲璇炫萱癣漩眩暄煊铉楦泫谖痃碹揎镟儇",ran:"然染燃冉苒髯蚺",rang:"让壤攘嚷瓤穰禳",rao:"绕扰饶娆桡荛",reng:"仍扔",ri:"日",rou:"肉柔揉糅鞣蹂",ruan:"软阮朊",run:"润闰",sa:"萨洒撒飒卅仨脎",suo:"所些索缩锁莎梭琐嗦唆唢娑蓑羧挲桫嗍睃",sai:"思赛塞腮噻鳃",shui:"说水税谁睡氵",sang:"桑丧嗓搡颡磉",sen:"森",seng:"僧",shai:"筛晒",shang:"上商尚伤赏汤裳墒晌垧觞殇熵绱",xing:"行省星腥猩惺兴刑型形邢饧醒幸杏性姓陉荇荥擤悻硎",shou:"收手受首售授守寿瘦兽狩绶艏扌",shuo:"说数硕烁朔铄妁槊蒴搠",su:"速素苏诉缩塑肃俗宿粟溯酥夙愫簌稣僳谡涑蔌嗉觫",shua:"刷耍唰",shuan:"栓拴涮闩",shun:"顺瞬舜吮",song:"送松宋讼颂耸诵嵩淞怂悚崧凇忪竦菘",sou:"艘搜擞嗽嗖叟馊薮飕嗾溲锼螋瞍",sun:"损孙笋荪榫隼狲飧",teng:"腾疼藤滕誊",tie:"铁贴帖餮萜",tu:"土突图途徒涂吐屠兔秃凸荼钍菟堍酴",wai:"外歪崴",wang:"王望往网忘亡旺汪枉妄惘罔辋魍",weng:"翁嗡瓮蓊蕹",zhua:"抓挝爪",yang:"样养央阳洋扬杨羊详氧仰秧痒漾疡泱殃恙鸯徉佯怏炀烊鞅蛘",xiong:"雄兄熊胸凶匈汹芎",yo:"哟唷",yong:"用永拥勇涌泳庸俑踊佣咏雍甬镛臃邕蛹恿慵壅痈鳙墉饔喁",za:"杂扎咱砸咋匝咂拶",zai:"在再灾载栽仔宰哉崽甾",zao:"造早遭枣噪灶燥糟凿躁藻皂澡蚤唣",zei:"贼",zen:"怎谮",zeng:"增曾综赠憎锃甑罾缯",zhei:"这",zou:"走邹奏揍诹驺陬楱鄹鲰",zhuai:"转拽",zun:"尊遵鳟樽撙",dia:"嗲",nou:"耨"})}}));
diff --git a/ui/src/components/scFilterBar/pySelect.vue b/ui/src/components/scFilterBar/pySelect.vue
new file mode 100644
index 0000000..bf3274f
--- /dev/null
+++ b/ui/src/components/scFilterBar/pySelect.vue
@@ -0,0 +1,51 @@
+<!--
+ * @Descripttion: 二次封装el-select 支持拼音
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月31日22:26:56
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-select v-bind="$attrs" :filter-method="filterMethod" @visible-change="visibleChange">
+		<el-option v-for="field in optionsList" :key="field.value" :label="field.label" :value="field"></el-option>
+	</el-select>
+</template>
+
+<script>
+	import pinyin from './pinyin'
+
+	export default {
+		props: {
+			options: { type: Array, default: () => [] }
+		},
+		data() {
+			return {
+				optionsList: [],
+				optionsList_: []
+			}
+		},
+		mounted() {
+			this.optionsList = this.options
+			this.optionsList_ = [...this.options]
+		},
+		methods: {
+			filterMethod(keyword){
+				if(keyword){
+					this.optionsList = this.optionsList_
+					this.optionsList = this.optionsList.filter((item) =>
+						pinyin.match(item.label, keyword)
+					);
+				}else{
+					this.optionsList = this.optionsList_
+				}
+			},
+			visibleChange(isopen){
+				if(isopen){
+					this.optionsList = this.optionsList_
+				}
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/ui/src/components/scForm/index.vue b/ui/src/components/scForm/index.vue
new file mode 100644
index 0000000..146acdf
--- /dev/null
+++ b/ui/src/components/scForm/index.vue
@@ -0,0 +1,272 @@
+<!--
+ * @Descripttion: 动态表单渲染器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年9月22日09:26:25
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-skeleton v-if="renderLoading || Object.keys(form).length==0" animated />
+
+	<el-form v-else ref="form" :model="form" :label-width="config.labelWidth" :label-position="config.labelPosition" v-loading="loading" element-loading-text="Loading...">
+		<el-row :gutter="15">
+			<template v-for="(item, index) in config.formItems" :key="index">
+				<el-col :span="item.span || 24" v-if="!hideHandle(item)">
+					<sc-title  v-if="item.component=='title'"  :title="item.label"></sc-title>
+					<el-form-item v-else :prop="item.name" :rules="rulesHandle(item)">
+						<template #label>
+							{{item.label}}
+							<el-tooltip v-if="item.tips" :content="item.tips">
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</template>
+						<!-- input -->
+						<template v-if="item.component=='input'" >
+							<el-input v-model="form[item.name]" :placeholder="item.options.placeholder" clearable :maxlength="item.options.maxlength" show-word-limit></el-input>
+						</template>
+						<!-- checkbox -->
+						<template v-else-if="item.component=='checkbox'" >
+							<template v-if="item.name" >
+								<el-checkbox v-model="form[item.name][_item.name]" :label="_item.label"  v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox>
+							</template>
+							<template v-else >
+								<el-checkbox v-model="form[_item.name]" :label="_item.label"  v-for="(_item, _index) in item.options.items" :key="_index"></el-checkbox>
+							</template>
+						</template>
+						<!-- checkboxGroup -->
+						<template v-else-if="item.component=='checkboxGroup'" >
+							<el-checkbox-group v-model="form[item.name]">
+								<el-checkbox v-for="_item in item.options.items" :key="_item.value" :label="_item.value">{{_item.label}}</el-checkbox>
+							</el-checkbox-group>
+						</template>
+						<!-- upload -->
+						<template v-else-if="item.component=='upload'" >
+							<el-col v-for="(_item, _index) in item.options.items" :key="_index">
+								<el-form-item :prop="_item.name">
+									<sc-upload v-model="form[_item.name]" :title="_item.label"></sc-upload>
+								</el-form-item>
+							</el-col>
+						</template>
+						<!-- switch -->
+						<template v-else-if="item.component=='switch'" >
+							<el-switch v-model="form[item.name]" />
+						</template>
+						<!-- select -->
+						<template v-else-if="item.component=='select'" >
+							<el-select v-model="form[item.name]" :multiple="item.options.multiple" :placeholder="item.options.placeholder" clearable filterable style="width: 100%;">
+								<el-option v-for="option in item.options.items" :key="option.value" :label="option.label" :value="option.value"></el-option>
+							</el-select>
+						</template>
+						<!-- cascader -->
+						<template v-else-if="item.component=='cascader'" >
+							<el-cascader v-model="form[item.name]" :options="item.options.items" clearable></el-cascader>
+						</template>
+						<!-- date -->
+						<template v-else-if="item.component=='date'" >
+							<el-date-picker v-model="form[item.name]" :type="item.options.type" :shortcuts="item.options.shortcuts" :default-time="item.options.defaultTime" :value-format="item.options.valueFormat" :placeholder="item.options.placeholder || '请选择'"></el-date-picker>
+						</template>
+						<!-- number -->
+						<template v-else-if="item.component=='number'" >
+							<el-input-number v-model="form[item.name]" controls-position="right"></el-input-number>
+						</template>
+						<!-- radio -->
+						<template v-else-if="item.component=='radio'" >
+							<el-radio-group v-model="form[item.name]">
+								<el-radio v-for="_item in item.options.items" :key="_item.value" :label="_item.value">{{_item.label}}</el-radio>
+							</el-radio-group>
+						</template>
+						<!-- color -->
+						<template v-else-if="item.component=='color'" >
+							<el-color-picker v-model="form[item.name]" />
+						</template>
+						<!-- rate -->
+						<template v-else-if="item.component=='rate'" >
+							<el-rate style="margin-top: 6px;" v-model="form[item.name]"></el-rate>
+						</template>
+						<!-- slider -->
+						<template v-else-if="item.component=='slider'" >
+							<el-slider v-model="form[item.name]" :marks="item.options.marks"></el-slider>
+						</template>
+						<!-- tableselect -->
+						<template v-else-if="item.component=='tableselect'" >
+							<tableselect-render v-model="form[item.name]" :item="item"></tableselect-render>
+						</template>
+						<!-- editor -->
+						<template v-else-if="item.component=='editor'" >
+							<sc-editor v-model="form[item.name]" placeholder="请输入" :height="400"></sc-editor>
+						</template>
+						<!-- noComponent -->
+						<template v-else>
+							<el-tag type="danger">[{{item.component}}] Component not found</el-tag>
+						</template>
+						<div v-if="item.message" class="el-form-item-msg">{{item.message}}</div>
+					</el-form-item>
+				</el-col>
+			</template>
+			<el-col :span="24">
+				<el-form-item>
+					<slot>
+						<el-button type="primary" @click="submit">提交</el-button>
+					</slot>
+				</el-form-item>
+			</el-col>
+		</el-row>
+	</el-form>
+</template>
+
+<script>
+	import http from "@/utils/request"
+
+	import { defineAsyncComponent } from 'vue'
+	const tableselectRender = defineAsyncComponent(() => import('./items/tableselect'))
+	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))
+
+	export default {
+		props: {
+			modelValue: { type: Object, default: () => {} },
+			config: { type: Object, default: () => {} },
+			loading: { type: Boolean, default: false },
+		},
+		components: {
+			tableselectRender,
+			scEditor
+		},
+		data() {
+			return {
+				form: {},
+				renderLoading: false
+			}
+		},
+		watch:{
+			modelValue(){
+				if(this.hasConfig){
+					this.deepMerge(this.form, this.modelValue)
+				}
+			},
+			config(){
+				this.render()
+			},
+			form:{
+				handler(val){
+					this.$emit("update:modelValue", val)
+				},
+				deep: true
+			}
+		},
+		computed: {
+			hasConfig(){
+				return Object.keys(this.config).length>0
+			},
+			hasValue(){
+				return Object.keys(this.modelValue).length>0
+			}
+		},
+		created() {
+
+		},
+		mounted() {
+			if(this.hasConfig){
+				this.render()
+			}
+		},
+		methods: {
+			//构建form对象
+			render() {
+				this.config.formItems.forEach((item) => {
+					if(item.component == 'checkbox'){
+						if(item.name){
+							const value = {}
+							item.options.items.forEach((option) => {
+								 value[option.name] = option.value
+							})
+							this.form[item.name] = value
+						}else{
+							item.options.items.forEach((option) => {
+								 this.form[option.name] = option.value
+							})
+						}
+					}else if(item.component == 'upload'){
+						if(item.name){
+							const value = {}
+							item.options.items.forEach((option) => {
+								 value[option.name] = option.value
+							})
+							this.form[item.name] = value
+						}else{
+							item.options.items.forEach((option) => {
+								 this.form[option.name] = option.value
+							})
+						}
+					}else{
+						this.form[item.name] = item.value
+					}
+				})
+				if(this.hasValue){
+					this.form = this.deepMerge(this.form, this.modelValue)
+				}
+				this.getData()
+			},
+			//处理远程选项数据
+			getData() {
+				this.renderLoading = true
+				var remoteData = []
+				this.config.formItems.forEach((item) => {
+					if(item.options && item.options.remote){
+						var req = http.get(item.options.remote.api, item.options.remote.data).then(res=>{
+							item.options.items = res.data
+						})
+						remoteData.push(req)
+					}
+				})
+				Promise.all(remoteData).then(()=>{
+					this.renderLoading = false
+				})
+			},
+			//合并深结构对象
+			deepMerge(obj1, obj2) {
+				let key;
+				for (key in obj2) {
+					obj1[key] = obj1[key] && obj1[key].toString() === "[object Object]" && (obj2[key] && obj2[key].toString() === "[object Object]") ? this.deepMerge(obj1[key], obj2[key]) : (obj1[key] = obj2[key])
+				}
+				return obj1
+				//return JSON.parse(JSON.stringify(obj1))
+			},
+			//处理动态隐藏
+			hideHandle(item){
+				if(item.hideHandle){
+					const exp = eval(item.hideHandle.replace(/\$/g,"this.form"))
+					return exp
+				}
+				return false
+			},
+			//处理动态必填
+			rulesHandle(item){
+				if(item.requiredHandle){
+					const exp = eval(item.requiredHandle.replace(/\$/g,"this.form"))
+					var requiredRule = item.rules.find(t => 'required' in t)
+					requiredRule.required = exp
+				}
+				return item.rules
+			},
+			//数据验证
+			validate(valid, obj){
+				return this.$refs.form.validate(valid, obj)
+			},
+			scrollToField(prop){
+				return this.$refs.form.scrollToField(prop)
+			},
+			resetFields(){
+				return this.$refs.form.resetFields()
+			},
+			//提交
+			submit(){
+				this.$emit("submit", this.form)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scForm/items/tableselect.vue b/ui/src/components/scForm/items/tableselect.vue
new file mode 100644
index 0000000..1a81ec4
--- /dev/null
+++ b/ui/src/components/scForm/items/tableselect.vue
@@ -0,0 +1,37 @@
+<template>
+	<sc-table-select v-model="value" :apiObj="apiObj" :table-width="600" :multiple="item.options.multiple" :props="item.options.props" style="width: 100%;">
+		<el-table-column  v-for="(_item, _index) in item.options.column" :key="_index" :prop="_item.prop" :label="_item.label" :width="_item.width"></el-table-column>
+	</sc-table-select>
+</template>
+
+<script>
+	export default {
+		name: 'uploadRender',
+		props: {
+			modelValue: [String, Number, Boolean, Date, Object, Array],
+			item: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				value: this.modelValue,
+				apiObj: this.getApiObj()
+			}
+		},
+		watch:{
+			value(val){
+				this.$emit("update:modelValue", val)
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			getApiObj(){
+				return eval(`this.`+this.item.options.apiObj)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scFormTable/index.vue b/ui/src/components/scFormTable/index.vue
new file mode 100644
index 0000000..2f292b3
--- /dev/null
+++ b/ui/src/components/scFormTable/index.vue
@@ -0,0 +1,98 @@
+<template>
+	<div class="sc-form-table">
+		<el-table :data="data" ref="table" :key="toggleIndex" border stripe>
+			<el-table-column type="index" width="50" fixed="left">
+				<template #header>
+					<el-button type="primary" icon="el-icon-plus" size="small" circle @click="rowAdd"></el-button>
+				</template>
+				<template #default="scope">
+					<div class="sc-form-table-handle">
+						<span>{{scope.$index + 1}}</span>
+						<el-button type="danger" icon="el-icon-delete" size="small" plain circle @click="rowDel(scope.row, scope.$index)"></el-button>
+					</div>
+				</template>
+			</el-table-column>
+			<el-table-column label="" width="58" v-if="dragSort">
+				<template #default>
+					<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
+				</template>
+			</el-table-column>
+			<slot></slot>
+			<el-table-column min-width="1"></el-table-column>
+			<template #empty>
+				{{placeholder}}
+			</template>
+		</el-table>
+	</div>
+</template>
+
+<script>
+	import Sortable from 'sortablejs'
+
+	export default {
+		props: {
+			modelValue: { type: Array, default: () => [] },
+			addTemplate: { type: Object, default: () => {} },
+			placeholder: { type: String, default: "暂无数据" },
+			dragSort: { type: Boolean, default: false }
+		},
+		data(){
+			return {
+				data: [],
+				toggleIndex: 0
+			}
+		},
+		mounted(){
+			this.data = this.modelValue
+			if(this.dragSort){
+				this.rowDrop()
+			}
+		},
+		watch:{
+			modelValue(){
+				this.data = this.modelValue
+			},
+			data: {
+				handler(){
+					this.$emit('update:modelValue', this.data);
+				},
+				deep: true
+			}
+		},
+		methods: {
+			rowDrop(){
+				const _this = this
+				const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
+				Sortable.create(tbody, {
+					handle: ".move",
+					animation: 300,
+					ghostClass: "ghost",
+					onEnd({ newIndex, oldIndex }) {
+						const tableData = _this.data
+						const currRow = tableData.splice(oldIndex, 1)[0]
+						tableData.splice(newIndex, 0, currRow)
+						_this.toggleIndex += 1
+						_this.$nextTick(() => {
+							_this.rowDrop()
+						})
+					}
+				})
+			},
+			rowAdd(){
+				const temp = JSON.parse(JSON.stringify(this.addTemplate))
+				this.data.push(temp)
+			},
+			rowDel(row, index){
+				this.data.splice(index, 1)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-form-table .sc-form-table-handle {text-align: center;}
+	.sc-form-table .sc-form-table-handle span {display: inline-block;}
+	.sc-form-table .sc-form-table-handle button {display: none;}
+	.sc-form-table .hover-row .sc-form-table-handle span {display: none;}
+	.sc-form-table .hover-row .sc-form-table-handle button {display: inline-block;}
+</style>
diff --git a/ui/src/components/scIconSelect/index.vue b/ui/src/components/scIconSelect/index.vue
new file mode 100644
index 0000000..11429c9
--- /dev/null
+++ b/ui/src/components/scIconSelect/index.vue
@@ -0,0 +1,94 @@
+<!--
+ * @Descripttion: 图标选择器组件
+ * @version: 1.3
+ * @Author: sakuya
+ * @Date: 2021年7月27日10:02:46
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年2月8日15:47:13
+-->
+
+<template>
+	<div class="sc-icon-select">
+		<el-input v-model="defaultValue" :prefix-icon="defaultValue||'none'" :placeholder="placeholder" :clearable="clearable" :disabled="disabled">
+			<template #append><el-button icon="el-icon-more-filled" @click="open"></el-button></template>
+		</el-input>
+		<el-dialog title="图标选择器" v-model="dialogVisible" :width="780" destroy-on-close>
+			<el-tabs style="margin-top: -30px;">
+				<el-tab-pane  v-for="item in data" :key="item.name" lazy>
+					<template #label>
+						{{item.name}} <el-tag size="small" type="info">{{item.icons.length}}</el-tag>
+					</template>
+					<div class="sc-icon-select__list">
+						<el-scrollbar>
+							<ul @click="selectIcon">
+								<li v-for="icon in item.icons" :key="icon">
+									<span :data-icon="icon"></span>
+									<el-icon><component :is="icon" /></el-icon>
+								</li>
+							</ul>
+						</el-scrollbar>
+					</div>
+				</el-tab-pane>
+			</el-tabs>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	import config from "@/config/iconSelect"
+
+	export default {
+		props: {
+			modelValue: { type: String, default: "" },
+			placeholder: { type: String, default: "请输入或者选择图标" },
+			clearable: { type: Boolean, default: false },
+			disabled: { type: Boolean, default: false },
+		},
+		data() {
+			return {
+				defaultValue: '',
+				dialogVisible: false,
+				data: []
+			}
+		},
+		watch:{
+			modelValue(val){
+				this.defaultValue = val
+			},
+			defaultValue(val){
+				this.$emit('update:modelValue', val)
+			}
+		},
+		mounted() {
+			this.defaultValue = this.modelValue
+			this.data.push(...config.icons)
+		},
+		methods: {
+			open(){
+				if(this.disabled){
+					return false
+				}
+				this.dialogVisible = true
+			},
+			selectIcon(e){
+				if(e.target.tagName != 'SPAN'){
+					return false
+				}
+				this.defaultValue = e.target.dataset.icon
+				this.dialogVisible = false
+				this.$emit('update:modelValue', this.defaultValue);
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-icon-select {display: inline-block;}
+	.sc-icon-select__list {height:360px;overflow: auto;}
+	.sc-icon-select__list ul {}
+	.sc-icon-select__list li {display: inline-block;width:80px;height:80px;margin:5px;vertical-align: top;box-shadow: 0 0 0 1px #eee;transition: all 0.1s;border-radius: 4px;position: relative;}
+	.sc-icon-select__list li span {position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;cursor: pointer;}
+	.sc-icon-select__list li i {display: inline-block;width: 100%;height:100%;font-size: 26px;color: #6d7882;background: #fff;display: flex;justify-content: center;align-items: center;border-radius: 4px;}
+	.sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px rgba(64,158,255,1);}
+	.sc-icon-select__list li:hover i {color: #409EFF;}
+</style>
diff --git a/ui/src/components/scMini/scStatusIndicator.vue b/ui/src/components/scMini/scStatusIndicator.vue
new file mode 100644
index 0000000..4e51b40
--- /dev/null
+++ b/ui/src/components/scMini/scStatusIndicator.vue
@@ -0,0 +1,47 @@
+<!--
+ * @Descripttion: 状态指示器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年11月11日09:30:12
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<span class="sc-state" :class="[{'sc-status-processing':pulse}, 'sc-state-bg--'+type]"></span>
+</template>
+
+<script>
+	export default {
+		props: {
+			type: { type: String, default: "primary" },
+			pulse: { type: Boolean, default: false }
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-state {display: inline-block;background: #000;width: 8px;height: 8px;border-radius: 50%;vertical-align: middle;}
+	.sc-status-processing {position: relative;}
+	.sc-status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}
+
+	.sc-state-bg--primary {background: var(--el-color-primary);}
+	.sc-state-bg--success {background: var(--el-color-success);}
+	.sc-state-bg--warning {background: var(--el-color-warning);}
+	.sc-state-bg--danger {background: var(--el-color-danger);}
+	.sc-state-bg--info {background: var(--el-color-info);}
+
+	@keyframes warn {
+		0% {
+			transform: scale(0.5);
+			opacity: 1;
+		}
+		30% {
+			opacity: 0.7;
+		}
+		100% {
+			transform: scale(2.5);
+			opacity: 0;
+		}
+	}
+</style>
diff --git a/ui/src/components/scMini/scTrend.vue b/ui/src/components/scMini/scTrend.vue
new file mode 100644
index 0000000..304c44d
--- /dev/null
+++ b/ui/src/components/scMini/scTrend.vue
@@ -0,0 +1,66 @@
+<!--
+ * @Descripttion: 趋势标记
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年11月11日11:07:10
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<span class="sc-trend" :class="'sc-trend--'+type">
+		<el-icon v-if="iconType=='P'" class="sc-trend-icon"><el-icon-top /></el-icon>
+		<el-icon v-if="iconType=='N'" class="sc-trend-icon"><el-icon-bottom /></el-icon>
+		<el-icon v-if="iconType=='Z'" class="sc-trend-icon"><el-icon-right /></el-icon>
+		<em class="sc-trend-prefix">{{prefix}}</em>
+		<em class="sc-trend-value">{{modelValue}}</em>
+		<em class="sc-trend-suffix">{{suffix}}</em>
+	</span>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: Number, default: 0 },
+			prefix: { type: String, default: "" },
+			suffix: { type: String, default: "" },
+			reverse: { type: Boolean, default: false }
+		},
+		computed: {
+			absValue(){
+				return Math.abs(this.modelValue);
+			},
+			iconType(v){
+				if(this.modelValue == 0){
+					v = 'Z'
+				}else if(this.modelValue < 0){
+					v = 'N'
+				}else if(this.modelValue > 0){
+					v = 'P'
+				}
+				return v
+			},
+			type(v){
+				if(this.modelValue == 0){
+					v = 'Z'
+				}else if(this.modelValue < 0){
+					v =  this.reverse?'P':'N'
+				}else if(this.modelValue > 0){
+					v =   this.reverse?'N':'P'
+				}
+				return v
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-trend {display: flex;align-items: center;}
+	.sc-trend-icon {margin-right: 2px;}
+	.sc-trend em {font-style: normal;}
+	.sc-trend-prefix {margin-right: 2px;}
+	.sc-trend-suffix {margin-left: 2px;}
+	.sc-trend--P {color: #f56c6c;}
+	.sc-trend--N {color: #67c23a;}
+	.sc-trend--Z {color: #555;}
+</style>
diff --git a/ui/src/components/scPageHeader/index.vue b/ui/src/components/scPageHeader/index.vue
new file mode 100644
index 0000000..9ca2d35
--- /dev/null
+++ b/ui/src/components/scPageHeader/index.vue
@@ -0,0 +1,52 @@
+<!--
+ * @Descripttion: 页面头部样式组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月20日08:49:07
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-page-header">
+		<div v-if="icon" class="sc-page-header__icon">
+			<span>
+				<el-icon><component :is="icon" /></el-icon>
+			</span>
+		</div>
+		<div class="sc-page-header__title">
+			<h2>{{ title }}</h2>
+			<p v-if="description || $slots.default">
+				<slot>
+				{{ description }}
+				</slot>
+			</p>
+		</div>
+		<div v-if="$slots.main" class="sc-page-header__main">
+			<slot name="main"></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: { type: String, required: true, default: "" },
+			description: { type: String, default: "" },
+			icon: { type: String, default: "" },
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-page-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:20px 25px;display: flex;}
+	.sc-page-header__icon {width: 50px;}
+	.sc-page-header__icon span {display: inline-block;width: 30px;height: 30px;background: #409EFF;border-radius: 40%;display: flex;align-items: center;justify-content: center;}
+	.sc-page-header__icon span i {color: #fff;font-size: 14px;}
+	.sc-page-header__title {flex: 1;}
+	.sc-page-header__title h2 {font-size: 17px;color: #3c4a54;font-weight: bold;margin-top: 3px;}
+	.sc-page-header__title p {font-size: 13px;color: #999;margin-top: 15px;}
+
+	[data-theme='dark'] .sc-page-header {background:#2b2b2b ;border-color:var(--el-border-color-base);}
+	[data-theme='dark'] .sc-page-header__title h2 {color: #d0d0d0;}
+</style>
diff --git a/ui/src/components/scQrCode/index.vue b/ui/src/components/scQrCode/index.vue
new file mode 100644
index 0000000..0166ec3
--- /dev/null
+++ b/ui/src/components/scQrCode/index.vue
@@ -0,0 +1,88 @@
+<!--
+ * @Descripttion: 生成二维码组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年12月20日14:22:20
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<img ref="img"/>
+</template>
+
+<script>
+	import QRcode from "qrcodejs2"
+
+	export default {
+		props: {
+			text: { type: String, required: true, default: "" },
+			size: { type: Number, default: 100 },
+			logo: { type: String, default: "" },
+			logoSize: { type: Number, default: 30 },
+			logoPadding: { type: Number, default: 5 },
+			colorDark: { type: String, default: "#000000" },
+			colorLight: { type: String, default: "#ffffff" },
+			correctLevel: { type: Number, default: 2 },
+		},
+		data() {
+			return {
+				qrcode: null
+			}
+		},
+		watch:{
+			text(){
+				this.draw()
+			}
+		},
+		mounted() {
+			this.draw()
+		},
+		methods: {
+			//创建原始二维码DOM
+			async create(){
+				return new Promise((resolve) => {
+					var element = document.createElement("div");
+					new QRcode(element, {
+						text: this.text,
+						width: this.size,
+						height: this.size,
+						colorDark: this.colorDark,
+						colorLight: this.colorLight,
+						correctLevel: this.correctLevel
+					})
+					if (element.getElementsByTagName("canvas")[0]) {
+						this.qrcode = element
+						resolve()
+					}
+				})
+			},
+			//绘制LOGO
+			async drawLogo(){
+				return new Promise((resolve) => {
+					var logo = new Image()
+					logo.src = this.logo
+					const logoPos = (this.size - this.logoSize) / 2
+					const rectSize = this.logoSize + this.logoPadding
+					const rectPos = (this.size - rectSize) / 2
+					var ctx = this.qrcode.getElementsByTagName("canvas")[0].getContext("2d")
+					logo.onload = ()=>{
+						ctx.fillRect(rectPos, rectPos, rectSize, rectSize)
+						ctx.drawImage(logo, logoPos, logoPos, this.logoSize, this.logoSize)
+						resolve()
+					}
+				})
+			},
+			async draw(){
+				await this.create()
+				if(this.logo){
+					await this.drawLogo()
+				}
+				this.$refs.img.src = this.qrcode.getElementsByTagName("canvas")[0].toDataURL("image/png")
+			},
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scSelect/index.vue b/ui/src/components/scSelect/index.vue
new file mode 100644
index 0000000..f1ce708
--- /dev/null
+++ b/ui/src/components/scSelect/index.vue
@@ -0,0 +1,80 @@
+<!--
+ * @Descripttion: 异步选择器
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年8月3日15:53:37
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-select">
+		<div v-if="initloading" class="sc-select-loading">
+			<el-icon class="is-loading"><el-icon-loading /></el-icon>
+		</div>
+		<el-select v-bind="$attrs" :loading="loading" @visible-change="visibleChange">
+			<el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]">
+				<slot name="option" :data="item"></slot>
+			</el-option>
+		</el-select>
+	</div>
+</template>
+
+<script>
+	import config from "@/config/select";
+
+	export default {
+		props: {
+			apiObj: { type: Object, default: () => {} },
+			dic: { type: String, default: "" },
+			params: { type: Object, default: () => ({}) }
+		},
+		data() {
+			return {
+				dicParams: this.params,
+				loading: false,
+				options: [],
+				props: config.props,
+				initloading: false
+			}
+		},
+		created() {
+			//如果有默认值就去请求接口获取options
+			if(this.$attrs.modelValue && this.$attrs.modelValue.length > 0){
+				this.initloading = true
+				this.getRemoteData()
+			}
+		},
+		methods: {
+			//选项显示隐藏事件
+			visibleChange(ispoen){
+				if(ispoen && this.options.length==0 && (this.dic || this.apiObj)){
+					this.getRemoteData()
+				}
+			},
+			//获取数据
+			async getRemoteData(){
+				this.loading = true
+				this.dicParams[config.request.name] = this.dic
+				var res = {}
+				if(this.apiObj){
+					res = await this.apiObj.get(this.params)
+				}else if(this.dic){
+					res = await config.dicApiObj.get(this.params)
+				}
+				var response = config.parseData(res)
+				this.options = response.data
+				this.loading = false
+				this.initloading = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-select {display: inline-block;position: relative;}
+	.sc-select-loading {position: absolute;top:0;left:0;right:0;bottom:0;background: #fff;z-index: 100;border-radius: 5px;border: 1px solid #EBEEF5;display: flex;align-items: center;padding-left:10px;}
+	.sc-select-loading i {font-size: 14px;}
+
+	[data-theme='dark'] .sc-select-loading {background: var(--el-color-white);border-color: var(--el-border-color-base) ;}
+</style>
diff --git a/ui/src/components/scStatistic/index.vue b/ui/src/components/scStatistic/index.vue
new file mode 100644
index 0000000..c87af9b
--- /dev/null
+++ b/ui/src/components/scStatistic/index.vue
@@ -0,0 +1,70 @@
+<!--
+ * @Descripttion: 统计数值组件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年6月23日13:11:32
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-statistic">
+		<div class="sc-statistic-title">
+			{{ title }}
+			<el-tooltip v-if="tips" effect="light">
+				<template #content>
+					<div style="width: 200px;line-height: 2;">
+						{{ tips }}
+					</div>
+				</template>
+				<el-icon class="sc-statistic-tips"><el-icon-question-filled/></el-icon>
+			</el-tooltip>
+		</div>
+		<div class="sc-statistic-content">
+			<span v-if="prefix" class="sc-statistic-content-prefix">{{ prefix }}</span>
+			<span class="sc-statistic-content-value">{{ cmtValue }}</span>
+			<span v-if="suffix" class="sc-statistic-content-suffix">{{ suffix }}</span>
+		</div>
+		<div v-if="description || $slots.default" class="sc-statistic-description">
+			<slot>
+			{{ description }}
+			</slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: { type: String, required: true, default: "" },
+			value: { type: String, required: true, default: "" },
+			prefix: { type: String, default: "" },
+			suffix: { type: String, default: "" },
+			description: { type: String, default: "" },
+			tips: { type: String, default: "" },
+			groupSeparator: { type: Boolean, default: false }
+		},
+		data() {
+			return {
+
+			}
+		},
+		computed: {
+			cmtValue(){
+				return this.groupSeparator ? this.$TOOL.groupSeparator(this.value) : this.value
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-statistic-title {font-size: 12px;color: #999;margin-bottom: 10px;display: flex;align-items: center;}
+	.sc-statistic-tips {margin-left: 5px;}
+	.sc-statistic-content {font-size: 20px;color: #333;}
+	.sc-statistic-content-value {font-weight: bold;}
+	.sc-statistic-content-prefix {margin-right: 5px;}
+	.sc-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
+	.sc-statistic-description {margin-top: 10px;color: #999;}
+
+	[data-theme='dark'] .sc-statistic-content {color: #d0d0d0;}
+</style>
diff --git a/ui/src/components/scTable/columnSetting.vue b/ui/src/components/scTable/columnSetting.vue
new file mode 100644
index 0000000..ecaecf6
--- /dev/null
+++ b/ui/src/components/scTable/columnSetting.vue
@@ -0,0 +1,117 @@
+<template>
+	<div v-if="usercolumn.length>0" class="setting-column" v-loading="isSave">
+		<div class="setting-column__title">
+			<span class="move_b"></span>
+			<span class="show_b">显示</span>
+			<span class="name_b">名称</span>
+			<span class="width_b">宽度</span>
+			<span class="sortable_b">排序</span>
+			<span class="fixed_b">固定</span>
+		</div>
+		<div class="setting-column__list" ref="list">
+			<ul>
+				<li v-for="item in usercolumn" :key="item.prop">
+					<span class="move_b">
+						<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
+					</span>
+					<span class="show_b">
+						<el-switch v-model="item.hide" :active-value="false" :inactive-value="true"></el-switch>
+					</span>
+					<span class="name_b" :title="item.prop">{{ item.label }}</span>
+					<span class="width_b">
+						<el-input v-model="item.width" placeholder="auto" size="small"></el-input>
+					</span>
+					<span class="sortable_b">
+						<el-switch v-model="item.sortable"></el-switch>
+					</span>
+					<span class="fixed_b">
+						<el-switch v-model="item.fixed"></el-switch>
+					</span>
+				</li>
+			</ul>
+		</div>
+		<div class="setting-column__bottom">
+			<el-button @click="backDefaul" :disabled="isSave">重置</el-button>
+			<el-button @click="save" type="primary">保存</el-button>
+		</div>
+	</div>
+	<el-empty v-else description="暂无可配置的列" :image-size="80"></el-empty>
+</template>
+
+<script>
+	import Sortable from 'sortablejs'
+
+	export default {
+		components: {
+			Sortable
+		},
+		props: {
+			column: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				isSave: false,
+				usercolumn: JSON.parse(JSON.stringify(this.column||[]))
+			}
+		},
+		watch:{
+			usercolumn: {
+				handler(){
+					this.$emit('userChange', this.usercolumn)
+				},
+				deep: true
+			}
+		},
+		mounted() {
+			this.usercolumn.length>0 && this.rowDrop()
+		},
+		methods: {
+			rowDrop(){
+				const _this = this
+				const tbody = this.$refs.list.querySelector('ul')
+				Sortable.create(tbody, {
+					handle: ".move",
+					animation: 300,
+					ghostClass: "ghost",
+					onEnd({ newIndex, oldIndex }) {
+						const tableData = _this.usercolumn
+						const currRow = tableData.splice(oldIndex, 1)[0]
+						tableData.splice(newIndex, 0, currRow)
+					}
+				})
+			},
+			backDefaul(){
+				this.$emit('back', this.usercolumn)
+			},
+			save(){
+				this.$emit('save', this.usercolumn)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.setting-column {}
+
+	.setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;}
+	.setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;}
+	.setting-column__title span.move_b {width: 30px;margin-right:15px;}
+	.setting-column__title span.show_b {width: 60px;}
+	.setting-column__title span.name_b {width: 140px;}
+	.setting-column__title span.width_b {width: 60px;margin-right:15px;}
+	.setting-column__title span.sortable_b {width: 60px;}
+	.setting-column__title span.fixed_b {width: 60px;}
+
+	.setting-column__list {max-height:314px;overflow: auto;}
+	.setting-column__list li {list-style: none;margin:10px 0;display: flex;align-items: center;}
+	.setting-column__list li>span {display: inline-block;font-size: 12px;}
+	.setting-column__list li span.move_b {width: 30px;margin-right:15px;}
+	.setting-column__list li span.show_b {width: 60px;}
+	.setting-column__list li span.name_b {width: 140px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;cursor:default;}
+	.setting-column__list li span.width_b {width: 60px;margin-right:15px;}
+	.setting-column__list li span.sortable_b {width: 60px;}
+	.setting-column__list li span.fixed_b {width: 60px;}
+	.setting-column__list li.ghost {opacity: 0.3;}
+
+	.setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;}
+</style>
diff --git a/ui/src/components/scTable/index.vue b/ui/src/components/scTable/index.vue
new file mode 100644
index 0000000..dafda61
--- /dev/null
+++ b/ui/src/components/scTable/index.vue
@@ -0,0 +1,353 @@
+<!--
+ * @Descripttion: 数据表格组件
+ * @version: 1.7
+ * @Author: sakuya
+ * @Date: 2021年11月29日21:51:15
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年2月9日09:59:37
+-->
+
+<template>
+	<div class="scTable" :style="{'height':_height}" ref="scTableMain" v-loading="loading">
+		<div class="scTable-table">
+			<el-table v-bind="$attrs" :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="height=='auto'?null:'100%'" :size="config.size" :border="config.border" :stripe="config.stripe" :summary-method="remoteSummary?remoteSummaryMethod:summaryMethod" @sort-change="sortChange" @filter-change="filterChange">
+				<slot></slot>
+				<template v-for="(item, index) in userColumn" :key="index">
+					<el-table-column v-if="!item.hide" :column-key="item.prop" :label="item.label" :prop="item.prop" :width="item.width" :sortable="item.sortable" :fixed="item.fixed" :filters="item.filters" :filter-method="remoteFilter||!item.filters?null:filterHandler" :show-overflow-tooltip="item.showOverflowTooltip">
+						<template #default="scope">
+							<slot :name="item.prop" v-bind="scope">
+								{{scope.row[item.prop]}}
+							</slot>
+						</template>
+					</el-table-column>
+				</template>
+				<el-table-column min-width="1"></el-table-column>
+				<template #empty>
+					<el-empty :description="emptyText" :image-size="100"></el-empty>
+				</template>
+			</el-table>
+		</div>
+		<div class="scTable-page" v-if="!hidePagination&&!hideDo">
+			<div class="scTable-pagination">
+				<el-pagination v-if="!hidePagination" background :small="true" :layout="paginationLayout" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
+			</div>
+			<div class="scTable-do" v-if="!hideDo">
+				<el-button v-if="!hideRefresh" @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
+				<el-popover v-if="column" placement="top" title="列设置" :width="500" trigger="click" :hide-after="0" @show="customColumnShow=true" @after-leave="customColumnShow=false">
+					<template #reference>
+						<el-button icon="el-icon-set-up" circle style="margin-left:15px"></el-button>
+					</template>
+					<columnSetting v-if="customColumnShow" ref="columnSetting" @userChange="columnSettingChange" @save="columnSettingSave" @back="columnSettingBack" :column="userColumn"></columnSetting>
+				</el-popover>
+				<el-popover v-if="!hideSetting" placement="top" title="表格设置" :width="400" trigger="click" :hide-after="0">
+					<template #reference>
+						<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
+					</template>
+					<el-form label-width="80px" label-position="left">
+						<el-form-item label="表格尺寸">
+							<el-radio-group v-model="config.size" size="small" @change="configSizeChange">
+								<el-radio-button label="large">大</el-radio-button>
+								<el-radio-button label="default">正常</el-radio-button>
+								<el-radio-button label="small">小</el-radio-button>
+							</el-radio-group>
+						</el-form-item>
+						<el-form-item label="样式">
+							<el-checkbox v-model="config.border" label="纵向边框"></el-checkbox>
+							<el-checkbox v-model="config.stripe" label="斑马纹"></el-checkbox>
+						</el-form-item>
+					</el-form>
+				</el-popover>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import config from "@/config/table";
+	import columnSetting from './columnSetting'
+
+	export default {
+		name: 'scTable',
+		components: {
+			columnSetting
+		},
+		props: {
+			tableName: { type: String, default: "" },
+			apiObj: { type: Object, default: () => {} },
+			params: { type: Object, default: () => ({}) },
+			data: { type: Object, default: () => {} },
+			height: { type: [String,Number], default: "100%" },
+			size: { type: String, default: "default" },
+			border: { type: Boolean, default: false },
+			stripe: { type: Boolean, default: false },
+			pageSize: { type: Number, default: config.pageSize },
+			rowKey: { type: String, default: "" },
+			summaryMethod: { type: Function, default: null },
+			column: { type: Object, default: () => {} },
+			remoteSort: { type: Boolean, default: false },
+			remoteFilter: { type: Boolean, default: false },
+			remoteSummary: { type: Boolean, default: false },
+			hidePagination: { type: Boolean, default: false },
+			hideDo: { type: Boolean, default: false },
+			hideRefresh: { type: Boolean, default: false },
+			hideSetting: { type: Boolean, default: false },
+			paginationLayout: { type: String, default: "total, prev, pager, next, jumper" },
+		},
+		watch: {
+			//监听从props里拿到值了
+			data(){
+				this.tableData = this.data;
+				this.total = this.tableData.length;
+			},
+			apiObj(){
+				this.tableParams = this.params;
+				this.refresh();
+			}
+		},
+		computed: {
+			_height() {
+				return Number(this.height)?Number(this.height)+'px':this.height
+			}
+		},
+		data() {
+			return {
+				isActivat: true,
+				emptyText: "暂无数据",
+				toggleIndex: 0,
+				tableData: [],
+				total: 0,
+				currentPage: 1,
+				prop: null,
+				order: null,
+				loading: false,
+				tableHeight:'100%',
+				tableParams: this.params,
+				userColumn: [],
+				customColumnShow: false,
+				summary: {},
+				config: {
+					size: this.size,
+					border: this.border,
+					stripe: this.stripe
+				}
+			}
+		},
+		mounted() {
+			//判断是否开启自定义列
+			if(this.column){
+				this.getCustomColumn()
+			}else{
+				this.userColumn = this.column
+			}
+			//判断是否静态数据
+			if(this.apiObj){
+				this.getData();
+			}else if(this.data){
+				this.tableData = this.data;
+				this.total = this.tableData.length
+			}
+		},
+		activated(){
+			if(!this.isActivat){
+				this.$refs.scTable.doLayout()
+			}
+		},
+		deactivated(){
+			this.isActivat = false;
+		},
+		methods: {
+			//获取列
+			async getCustomColumn(){
+				const userColumn = await config.columnSettingGet(this.tableName, this.column)
+				this.userColumn = userColumn
+			},
+			//获取数据
+			async getData(){
+				this.loading = true;
+				var reqData = {
+					[config.request.page]: this.currentPage,
+					[config.request.pageSize]: this.pageSize,
+					[config.request.prop]: this.prop,
+					[config.request.order]: this.order
+				}
+				if(this.hidePagination){
+					delete reqData[config.request.page]
+					delete reqData[config.request.pageSize]
+				}
+				Object.assign(reqData, this.tableParams)
+
+				try {
+					var res = await this.apiObj.get(reqData);
+				}catch(error){
+					this.loading = false;
+					this.emptyText = error.statusText;
+					return false;
+				}
+				try {
+					var response = config.parseData(res);
+				}catch(error){
+					this.loading = false;
+					this.emptyText = "数据格式错误";
+					return false;
+				}
+				if(response.code != config.successCode){
+					this.loading = false;
+					this.emptyText = response.msg;
+				}else{
+					this.emptyText = "暂无数据";
+					if(this.hidePagination){
+						this.tableData = response.data || [];
+					}else{
+						this.tableData = response.rows || [];
+					}
+					this.total = response.total || 0;
+					this.summary = response.summary || {};
+					this.loading = false;
+				}
+				this.$refs.scTable.$el.querySelector('.el-table__body-wrapper').scrollTop = 0
+				this.$emit('dataChange', res, this.tableData)
+			},
+			//分页点击
+			paginationChange(){
+				this.getData();
+			},
+			//刷新数据
+			refresh(){
+				this.$refs.scTable.clearSelection();
+				this.getData();
+			},
+			//更新数据 合并上一次params
+			upData(params, page=1){
+				this.currentPage = page;
+				this.$refs.scTable.clearSelection();
+				Object.assign(this.tableParams, params || {})
+				this.getData()
+			},
+			//重载数据 替换params
+			reload(params, page=1){
+				this.currentPage = page;
+				this.tableParams = params || {}
+				this.$refs.scTable.clearSelection();
+				this.$refs.scTable.clearSort()
+				this.$refs.scTable.clearFilter()
+				this.getData()
+			},
+			//自定义变化事件
+			columnSettingChange(userColumn){
+				this.userColumn = userColumn;
+				this.toggleIndex += 1;
+			},
+			//自定义列保存
+			async columnSettingSave(userColumn){
+				this.$refs.columnSetting.isSave = true
+				try {
+					await config.columnSettingSave(this.tableName, userColumn)
+				}catch(error){
+					this.$message.error('保存失败')
+					this.$refs.columnSetting.isSave = false
+				}
+				this.$message.success('保存成功')
+				this.$refs.columnSetting.isSave = false
+			},
+			//自定义列重置
+			async columnSettingBack(){
+				this.$refs.columnSetting.isSave = true
+				try {
+					const column = await config.columnSettingReset(this.tableName, this.column)
+					this.userColumn = column
+					this.$refs.columnSetting.usercolumn = JSON.parse(JSON.stringify(this.userColumn||[]))
+				}catch(error){
+					this.$message.error('重置失败')
+					this.$refs.columnSetting.isSave = false
+				}
+				this.$refs.columnSetting.isSave = false
+			},
+			//排序事件
+			sortChange(obj){
+				if(!this.remoteSort){
+					return false
+				}
+				if(obj.column && obj.prop){
+					this.prop = obj.prop
+					this.order = obj.order
+				}else{
+					this.prop = null
+					this.order = null
+				}
+				this.getData()
+			},
+			//本地过滤
+			filterHandler(value, row, column){
+				const property = column.property;
+				return row[property] === value;
+			},
+			//过滤事件
+			filterChange(filters){
+				if(!this.remoteFilter){
+					return false
+				}
+				Object.keys(filters).forEach(key => {
+					filters[key] = filters[key].join(',')
+				})
+				this.upData(filters)
+			},
+			//远程合计行处理
+			remoteSummaryMethod(param){
+				const {columns} = param
+				const sums = []
+				columns.forEach((column, index) => {
+					if(index === 0) {
+						sums[index] = '合计'
+						return
+					}
+					const values =  this.summary[column.property]
+					if(values){
+						sums[index] = values
+					}else{
+						sums[index] = ''
+					}
+				})
+				return sums
+			},
+			configSizeChange(){
+				this.$refs.scTable.doLayout()
+			},
+			//原生方法转发
+			clearSelection(){
+				this.$refs.scTable.clearSelection()
+			},
+			toggleRowSelection(row, selected){
+				this.$refs.scTable.toggleRowSelection(row, selected)
+			},
+			toggleAllSelection(){
+				this.$refs.scTable.toggleAllSelection()
+			},
+			toggleRowExpansion(row, expanded){
+				this.$refs.scTable.toggleRowExpansion(row, expanded)
+			},
+			setCurrentRow(row){
+				this.$refs.scTable.setCurrentRow(row)
+			},
+			clearSort(){
+				this.$refs.scTable.clearSort()
+			},
+			clearFilter(columnKey){
+				this.$refs.scTable.clearFilter(columnKey)
+			},
+			doLayout(){
+				this.$refs.scTable.doLayout()
+			},
+			sort(prop, order){
+				this.$refs.scTable.sort(prop, order)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.scTable {}
+	.scTable-table {height: calc(100% - 50px);}
+	.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
+	.scTable-do {white-space: nowrap;}
+	.scTable:deep(.el-table__footer) .cell {font-weight: bold;}
+</style>
diff --git a/ui/src/components/scTableSelect/index.vue b/ui/src/components/scTableSelect/index.vue
new file mode 100644
index 0000000..e3186de
--- /dev/null
+++ b/ui/src/components/scTableSelect/index.vue
@@ -0,0 +1,229 @@
+<!--
+ * @Descripttion: 表格选择器组件
+ * @version: 1.2
+ * @Author: sakuya
+ * @Date: 2021年6月10日10:04:07
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年2月28日09:39:03
+-->
+
+<template>
+	<el-select ref="select" v-model="defaultValue" clearable :multiple="multiple" filterable :placeholder="placeholder" :disabled="disabled" :filter-method="filterMethod" @remove-tag="removeTag" @visible-change="visibleChange" @clear="clear">
+		<template #empty>
+			<div class="sc-table-select__table" :style="{width: tableWidth+'px'}" v-loading="loading">
+				<div class="sc-table-select__header">
+					<slot name="header" :form="formData" :submit="formSubmit"></slot>
+				</div>
+				<el-table ref="table" :data="tableData" :height="245" :highlight-current-row="!multiple" @row-click="click" @select="select" @select-all="selectAll">
+					<el-table-column v-if="multiple" type="selection" width="45"></el-table-column>
+					<el-table-column v-else type="index" width="45">
+						<template #default="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
+					</el-table-column>
+					<slot></slot>
+				</el-table>
+				<div class="sc-table-select__page">
+					<el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
+				</div>
+			</div>
+		</template>
+	</el-select>
+</template>
+
+<script>
+	import config from "@/config/tableSelect";
+
+	export default {
+		props: {
+			modelValue: null,
+			apiObj: { type: Object, default: () => {} },
+			params: { type: Object, default: () => {} },
+			placeholder: { type: String, default: "请选择" },
+			multiple: { type: Boolean, default: false },
+			disabled: { type: Boolean, default: false },
+			tableWidth: {type: Number, default: 400},
+			mode: { type: String, default: "popover" },
+			props: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				loading: false,
+				keyword: null,
+				defaultValue: [],
+				tableData: [],
+				pageSize: config.pageSize,
+				total: 0,
+				currentPage: 1,
+				defaultProps: {
+					label: config.props.label,
+					value: config.props.value,
+					page: config.request.page,
+					pageSize: config.request.pageSize,
+					keyword: config.request.keyword
+				},
+				formData: {}
+			}
+		},
+		computed: {
+
+		},
+		watch: {
+			modelValue:{
+				handler(){
+					this.defaultValue = this.modelValue
+					this.autoCurrentLabel()
+				},
+				deep: true
+			}
+		},
+		mounted() {
+			this.defaultProps = Object.assign(this.defaultProps, this.props);
+			this.defaultValue =  this.modelValue
+			this.autoCurrentLabel()
+		},
+		methods: {
+			//表格显示隐藏回调
+			visibleChange(visible){
+				if(visible){
+					this.currentPage = 1
+					this.keyword = null
+					this.formData = {}
+					this.getData()
+				}else{
+					this.autoCurrentLabel()
+				}
+			},
+			//获取表格数据
+			async getData(){
+				this.loading = true;
+				var reqData = {
+					[this.defaultProps.page]: this.currentPage,
+					[this.defaultProps.pageSize]: this.pageSize,
+					[this.defaultProps.keyword]: this.keyword
+				}
+				Object.assign(reqData, this.params, this.formData)
+				var res = await this.apiObj.get(reqData);
+				var parseData = config.parseData(res)
+				this.tableData = parseData.rows;
+				this.total = parseData.total;
+				this.loading = false;
+				//表格默认赋值
+				this.$nextTick(() => {
+					if(this.multiple){
+						this.defaultValue.forEach(row => {
+							var setrow = this.tableData.filter(item => item[this.defaultProps.value]===row[this.defaultProps.value] )
+							if(setrow.length > 0){
+								this.$refs.table.toggleRowSelection(setrow[0], true);
+							}
+						})
+					}else{
+						var setrow = this.tableData.filter(item => item[this.defaultProps.value]===this.defaultValue[this.defaultProps.value] )
+						this.$refs.table.setCurrentRow(setrow[0]);
+					}
+					this.$refs.table.$el.querySelector('.el-table__body-wrapper').scrollTop = 0
+				})
+			},
+			//插糟表单提交
+			formSubmit(){
+				this.currentPage = 1
+				this.keyword = null
+				this.getData()
+			},
+			//分页刷新表格
+			reload(){
+				this.getData()
+			},
+			//自动模拟options赋值
+			autoCurrentLabel(){
+				this.$nextTick(() => {
+					if(this.multiple){
+						this.$refs.select.selected.forEach(item => {
+							item.currentLabel = item.value[this.defaultProps.label]
+						})
+					}else{
+						this.$refs.select.selectedLabel = this.defaultValue[this.defaultProps.label]
+					}
+				})
+			},
+			//表格勾选事件
+			select(rows, row){
+				var isSelect = rows.length && rows.indexOf(row) !== -1
+				if(isSelect){
+					this.defaultValue.push(row)
+				}else{
+					this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
+				}
+				this.autoCurrentLabel()
+				this.$emit('update:modelValue', this.defaultValue);
+				this.$emit('change', this.defaultValue);
+			},
+			//表格全选事件
+			selectAll(rows){
+				var isAllSelect = rows.length > 0
+				if(isAllSelect){
+					rows.forEach(row => {
+						var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
+						if(!isHas){
+							this.defaultValue.push(row)
+						}
+					})
+				}else{
+					this.tableData.forEach(row => {
+						var isHas = this.defaultValue.find(item => item[this.defaultProps.value] == row[this.defaultProps.value])
+						if(isHas){
+							this.defaultValue.splice(this.defaultValue.findIndex(item => item[this.defaultProps.value] == row[this.defaultProps.value]), 1)
+						}
+					})
+				}
+				this.autoCurrentLabel()
+				this.$emit('update:modelValue', this.defaultValue);
+				this.$emit('change', this.defaultValue);
+			},
+			click(row){
+				if(this.multiple){
+					//处理多选点击行
+				}else{
+					this.defaultValue = row
+					this.$refs.select.blur()
+					this.autoCurrentLabel()
+					this.$emit('update:modelValue', this.defaultValue);
+					this.$emit('change', this.defaultValue);
+				}
+			},
+			//tags删除后回调
+			removeTag(tag){
+				var row = this.findRowByKey(tag[this.defaultProps.value])
+				this.$refs.table.toggleRowSelection(row, false);
+				this.$emit('update:modelValue', this.defaultValue);
+			},
+			//清空后的回调
+			clear(){
+				this.$emit('update:modelValue', this.defaultValue);
+			},
+			// 关键值查询表格数据行
+			findRowByKey (value) {
+				return this.tableData.find(item => item[this.defaultProps.value] === value)
+			},
+			filterMethod(keyword){
+				if(!keyword){
+					this.keyword = null;
+					return false;
+				}
+				this.keyword = keyword;
+				this.getData()
+			},
+			// 触发select隐藏
+			blur(){
+				this.$refs.select.blur();
+			},
+			// 触发select显示
+			focus(){
+				this.$refs.select.focus();
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-table-select__table {padding:12px;}
+	.sc-table-select__page {padding-top: 12px;}
+</style>
diff --git a/ui/src/components/scTitle/index.vue b/ui/src/components/scTitle/index.vue
new file mode 100644
index 0000000..4ad28f4
--- /dev/null
+++ b/ui/src/components/scTitle/index.vue
@@ -0,0 +1,25 @@
+<template>
+	<div class="sc-title">
+		{{title}}
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: { type: String, required: true, default: "" },
+		},
+		data() {
+			return {
+
+			}
+		},
+		computed: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-title {border-bottom: 1px solid #eee;margin-bottom: 20px;font-size: 17px;padding-bottom: 15px;color: #3c4a54;font-weight: bold;}
+</style>
diff --git a/ui/src/components/scUpload/index.vue b/ui/src/components/scUpload/index.vue
new file mode 100644
index 0000000..1d86a47
--- /dev/null
+++ b/ui/src/components/scUpload/index.vue
@@ -0,0 +1,217 @@
+<template>
+	<div class="sc-upload" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" :style="style">
+		<div v-if="tempImg || img" class="sc-upload-file">
+			<div class="mask">
+				<span class="del" @click.stop="del"><el-icon><el-icon-delete /></el-icon></span>
+			</div>
+			<el-image v-if="fileIsImg" class="image" :src="tempImg || img" :preview-src-list="[img]" fit="cover" hide-on-click-modal append-to-body :z-index="9999"></el-image>
+			<a v-else :href="img" class="file" target="_blank"><el-icon><el-icon-document /></el-icon></a>
+		</div>
+		<div v-else class="sc-upload-uploader" @click="fileSelect && showfileSelect()">
+			<el-upload ref="upload" class="uploader" :disabled="fileSelect" :auto-upload="!cropper" :on-change="change" :accept="accept" :action="action" :show-file-list="false" :before-upload="before" :on-success="success" :on-error="error" :http-request="request">
+				<slot>
+					<div class="file-empty">
+						<el-icon><component :is="icon" /></el-icon>
+						<h4 v-if="title">{{title}}</h4>
+					</div>
+				</slot>
+			</el-upload>
+		</div>
+		<el-dialog title="剪裁" v-model="cropperDialogVisible" :width="580" destroy-on-close>
+			<sc-cropper :src="cropperImg" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
+			<template #footer>
+				<el-button @click="cropperDialogVisible=false" >取 消</el-button>
+				<el-button type="primary" @click="cropperSave">确 定</el-button>
+			</template>
+		</el-dialog>
+		<el-dialog title="打开" v-model="fileSelectDialogVisible" :width="880" destroy-on-close>
+			<sc-file-select @submit="fileSelectSubmit">
+				<template #do>
+					<el-button @click="fileSelectDialogVisible=false" >取 消</el-button>
+				</template>
+			</sc-file-select>
+		</el-dialog>
+		<span style="display:none!important"><el-input v-model="img"></el-input></span>
+
+	</div>
+</template>
+
+<script>
+	import { defineAsyncComponent } from 'vue'
+	import config from "@/config/upload"
+	const scCropper = defineAsyncComponent(() => import('@/components/scCropper'))
+	const scFileSelect = defineAsyncComponent(() => import('@/components/scFileSelect'))
+
+	export default {
+		props: {
+			height: {type: Number, default: 120},
+			width: {type: Number, default: 120},
+			modelValue: { type: String, default: "" },
+			action: { type: String, default: "" },
+			apiObj: { type: Object, default: () => {} },
+			accept: { type: String, default: "image/gif, image/jpeg, image/png" },
+			maxSize: { type: Number, default: config.maxSize },
+			title: { type: String, default: "" },
+			icon: { type: String, default: "el-icon-plus" },
+			fileSelect: { type: Boolean, default: false },
+			cropper: { type: Boolean, default: false },
+			compress: {type: Number, default: 1},
+			aspectRatio:  {type: Number, default: NaN},
+			onSuccess: { type: Function, default: () => { return true } }
+		},
+		components: {
+			scCropper,
+			scFileSelect
+		},
+		data() {
+			return {
+				loading: false,
+				fileIsImg: true,
+				img: "",
+				tempImg: "",
+				style: {
+					width: this.width + "px",
+					height: this.height + "px"
+				},
+				cropperDialogVisible: false,
+				cropperImg: "",
+				cropperUploadFile: null,
+				fileSelectDialogVisible: false,
+			}
+		},
+		watch:{
+			modelValue(){
+				this.isImg(this.modelValue)
+				this.img = this.modelValue;
+			},
+			img(){
+				this.$emit('update:modelValue', this.img);
+			}
+		},
+		mounted() {
+			this.isImg(this.modelValue)
+			this.img = this.modelValue;
+		},
+		methods: {
+			showfileSelect(){
+				this.fileSelectDialogVisible = true
+			},
+			fileSelectSubmit(val){
+				this.img = val
+				this.fileSelectDialogVisible = false
+			},
+			cropperSave(){
+				var uploadFile = this.$refs.upload.uploadFiles[0].raw
+				this.$refs.cropper.getCropFile(file => {
+					this.cropperUploadFile = file
+					this.$refs.upload.submit()
+				}, uploadFile.name, uploadFile.type)
+				this.cropperDialogVisible = false
+			},
+			isImg(fileUrl){
+				var strRegex = "(.jpg|.png|.gif|.jpeg)$";
+				var re = new RegExp(strRegex);
+				if (re.test(fileUrl.toLowerCase())){
+					this.fileIsImg=true;
+				}else{
+					this.fileIsImg=false;
+				}
+			},
+			change(file){
+				if(this.cropper && file.status=='ready'){
+					this.isImg(file.name)
+					if(!this.fileIsImg){
+						this.$notify.warning({
+							title: '上传文件警告',
+							message: '选择的文件非图像类文件'
+						})
+						return false
+					}
+					this.cropperDialogVisible = true
+					this.cropperImg = URL.createObjectURL(file.raw)
+				}
+			},
+			before(file){
+				file = this.cropper ? this.cropperUploadFile : file
+				const maxSize = file.size / 1024 / 1024 < this.maxSize;
+				if (!maxSize) {
+					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
+					return false;
+				}
+				this.isImg(file.name)
+				this.tempImg = URL.createObjectURL(file);
+				this.loading = true;
+			},
+			success(res){
+				this.loading = false;
+				this.tempImg = "";
+				var os = this.onSuccess(res);
+				if(os!=undefined && os==false){
+					return false;
+				}
+				var response = config.parseData(res);
+				if(response.code != config.successCode){
+					this.$message.warning(response.msg || "上传文件未知错误")
+				}else{
+					this.img = response.src;
+				}
+			},
+			error(err){
+				this.$notify.error({
+					title: '上传文件错误',
+					message: err
+				})
+				this.loading = false;
+				this.tempImg = "";
+				this.img = ""
+			},
+			del(){
+				this.img = ""
+			},
+			request(param){
+				var apiObj = config.apiObj;
+				if(this.apiObj){
+					apiObj = this.apiObj;
+				}
+				const data = new FormData();
+				var file = this.cropper ? this.cropperUploadFile : param.file
+				data.append("file", file);
+				apiObj.post(data).then(res => {
+					param.onSuccess(res)
+				}).catch(err => {
+					param.onError(err)
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.sc-upload+.sc-upload {margin-left: 10px;}
+</style>
+
+<style scoped>
+	.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}
+
+	.sc-upload {width: 120px;height: 120px;display: inline-block;vertical-align: top;box-sizing: border-box;}
+
+	.sc-upload-file {position: relative;width: 100%;height: 100%;}
+	.sc-upload-file .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
+	.sc-upload-file .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
+	.sc-upload-file .mask span i {font-size: 12px;}
+	.sc-upload-file .mask .del {background: #F56C6C;}
+	.sc-upload-file .image {width: 100%;height: 100%;}
+	.sc-upload-file .image img {vertical-align: bottom;}
+	.sc-upload-file .file {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;border: 1px solid #DCDFE6;}
+	.sc-upload-file .file i {font-size: 30px;color: #409EFF;}
+	.sc-upload-file:hover .mask {display: inline-block;}
+
+	.sc-upload-uploader {border: 1px dashed #d9d9d9;box-sizing: border-box;width: 100%;height: 100%;}
+	.sc-upload-uploader:hover {border: 1px dashed #409eff;}
+	.sc-upload-uploader .uploader {width: 100%;height: 100%;}
+	.sc-upload-uploader:deep(.el-upload) {width: 100%;height: 100%;}
+
+	.sc-upload-uploader .file-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+	.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
+	.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
+</style>
diff --git a/ui/src/components/scUpload/multiple.vue b/ui/src/components/scUpload/multiple.vue
new file mode 100644
index 0000000..21479bf
--- /dev/null
+++ b/ui/src/components/scUpload/multiple.vue
@@ -0,0 +1,227 @@
+<template>
+	<div class="sc-upload-multiple">
+		<div class="sc-upload-list">
+			<ul>
+				<li v-for="(file, index) in fileList" :key="index">
+					<div v-if="file.status!='success'" class="sc-upload-item" v-loading="true" element-loading-background="rgba(0, 0, 0, 0.5)">
+						<el-image class="image" :src="file.tempImg" fit="cover" :z-index="9999"></el-image>
+					</div>
+					<div v-else class="sc-upload-item">
+						<div class="mask">
+							<span class="del" @click.stop="del(index)"><el-icon><el-icon-delete /></el-icon></span>
+						</div>
+						<el-image class="image" :src="file.url" fit="cover" :preview-src-list="preview" hide-on-click-modal append-to-body>
+							<template #placeholder>
+								<div class="image-slot">
+									<el-icon><el-icon-more-filled /></el-icon>
+								</div>
+							</template>
+						</el-image>
+					</div>
+				</li>
+			</ul>
+		</div>
+		<div class="sc-upload-uploader" @click="fileSelect && showfileSelect()">
+			<el-upload ref="upload" class="uploader" :disabled="fileSelect" :action="action" :accept="accept" multiple  :show-file-list="false" :file-list="defaultFileList" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error" :http-request="request">
+				<div class="file-empty">
+					<el-icon><component :is="icon" /></el-icon>
+					<h4 v-if="title">{{title}}</h4>
+				</div>
+			</el-upload>
+		</div>
+		<el-dialog title="打开" v-model="fileSelectDialogVisible" :width="880" destroy-on-close>
+			<sc-file-select multiple @submit="fileSelectSubmit">
+				<template #do>
+					<el-button @click="fileSelectDialogVisible=false" >取 消</el-button>
+				</template>
+			</sc-file-select>
+		</el-dialog>
+		<span style="display:none!important"><el-input v-model="value"></el-input></span>
+
+	</div>
+</template>
+
+<script>
+	import { defineAsyncComponent } from 'vue'
+	import config from "@/config/upload";
+	const scFileSelect = defineAsyncComponent(() => import('@/components/scFileSelect'))
+
+	export default {
+		props: {
+			modelValue: { type: String, default: "" },
+			action: { type: String, default: "" },
+			apiObj: { type: Object, default: () => {} },
+			accept: { type: String, default: "image/gif, image/jpeg, image/png" },
+			maxSize: { type: Number, default: config.maxSize },
+			title: { type: String, default: "" },
+			icon: { type: String, default: "el-icon-plus" },
+			fileSelect: { type: Boolean, default: false }
+		},
+		components: {
+			scFileSelect
+		},
+		data(){
+			return {
+				value: "",
+				defaultFileList: [],
+				fileList: [],
+				fileSelectDialogVisible: false,
+			}
+		},
+		watch:{
+			modelValue(){
+				this.$refs.upload.uploadFiles=this.modelValuetoArr
+				this.fileList = this.modelValuetoArr
+				this.value = this.modelValue
+			},
+			fileList: {
+				handler(){
+					if(this.isAllSuccess){
+						this.$emit('update:modelValue', this.fileListtoStr);
+					}
+				},
+				deep: true
+			}
+		},
+		computed: {
+			modelValuetoArr(){
+				return this.toArr(this.modelValue)
+			},
+			fileListtoStr(){
+				return this.toStr(this.fileList)
+			},
+			preview(){
+				return this.fileList.map(v => v.url)
+			},
+			isAllSuccess(){
+				var all_length = this.fileList.length;
+				var success_length = 0
+				this.fileList.forEach(item => {
+					if(item.status == "success"){
+						success_length += 1
+					}
+				})
+				return success_length == all_length
+			}
+		},
+		mounted() {
+			this.defaultFileList = this.toArr(this.modelValue);
+			this.fileList = this.toArr(this.modelValue)
+			this.value = this.modelValue
+		},
+		methods: {
+			showfileSelect(){
+				this.fileSelectDialogVisible = true
+			},
+			fileSelectSubmit(val){
+				const newval = [...this.modelValue.split(","),...val].join(",")
+				this.$emit('update:modelValue', newval);
+				this.fileSelectDialogVisible = false
+			},
+			//默认值转换为数组
+			toArr(str){
+				var _arr = [];
+				var arr = str.split(",");
+				arr.forEach(item => {
+					if(item){
+						_arr.push({
+							name: "F",
+							status: "success",
+							url: item
+						})
+					}
+				})
+				return _arr;
+			},
+			//数组转换为原始值
+			toStr(arr){
+				var _arr = [];
+				arr.forEach(item => {
+					_arr.push(item.url)
+				})
+				var str = _arr.join(",")
+				return str;
+			},
+			before(file){
+				const maxSize = file.size / 1024 / 1024 < this.maxSize;
+				if (!maxSize) {
+					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
+					return false;
+				}
+			},
+			change(file, fileList){
+				file.tempImg = URL.createObjectURL(file.raw);
+				this.fileList = fileList
+			},
+			success(res, file){
+				var response = config.parseData(res);
+				file.url = response.src
+			},
+			progress(){
+
+			},
+			remove(){
+
+			},
+			error(err){
+				this.$notify.error({
+					title: '上传文件错误',
+					message: err
+				})
+			},
+			del(index){
+				this.fileList.splice(index, 1);
+			},
+			request(param){
+				var apiObj = config.apiObj;
+				if(this.apiObj){
+					apiObj = this.apiObj;
+				}
+				const data = new FormData();
+				data.append("file", param.file);
+				apiObj.post(data).then(res => {
+					param.onSuccess(res)
+				}).catch(err => {
+					param.onError(err)
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+
+	.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}
+
+	.sc-upload-multiple {display: inline-block;}
+
+
+	.sc-upload-list {display: inline-block;}
+	.sc-upload-list li {list-style: none;display: inline-block;width: 120px;height: 120px;margin-right: 10px;vertical-align: top;box-sizing: border-box;}
+
+	.sc-upload-item {position: relative;width: 100%;height: 100%;}
+	.sc-upload-item .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
+	.sc-upload-item .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
+	.sc-upload-item .mask span i {font-size: 12px;}
+	.sc-upload-item .mask .del {background: #F56C6C;}
+
+	.sc-upload-item:hover .mask {display: inline-block;}
+
+
+	.sc-upload-list .image {width: 100%;height: 100%;}
+
+	.sc-upload-list .image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;}
+	.sc-upload-list .image-slot i {font-size: 20px;}
+
+	.sc-upload-uploader {border: 1px dashed #d9d9d9;width: 120px;height: 120px;display: inline-block;vertical-align: top;box-sizing: border-box;}
+	.sc-upload-uploader:hover {border: 1px dashed #409eff;}
+	.sc-upload-uploader .uploader {width: 100%;height: 100%;}
+	.sc-upload-uploader:deep(.el-upload) {width: 100%;height: 100%;}
+
+
+	.sc-upload-uploader .file-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+	.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
+	.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
+
+
+</style>
diff --git a/ui/src/components/scVideo/index.vue b/ui/src/components/scVideo/index.vue
new file mode 100644
index 0000000..74cf49a
--- /dev/null
+++ b/ui/src/components/scVideo/index.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Descripttion: xgplayer二次封装
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年11月29日12:10:06
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div class="sc-video" ref="scVideo"></div>
+</template>
+
+<script>
+	import Player from 'xgplayer'
+	import HlsPlayer from 'xgplayer-hls'
+
+	export default {
+		props: {
+			//视频路径
+			src: { type: String, required: true, default: "" },
+			//封面
+			poster: { type: String, default: "" },
+			//音量
+			volume: { type: Number, default: 0.8 },
+			//是否显示控制
+			controls: { type: Boolean, default: true },
+			//是否直播场景
+			isLive: { type: Boolean, default: false },
+			//自动播放
+			autoplay: { type: Boolean, default: false },
+			//循环播放
+			loop: { type: Boolean, default: false },
+			//初始化显示首帧
+			videoInit: { type: Boolean, default: false },
+			//画中画
+			pip: { type: Boolean, default: false },
+			//倍速播放
+			playbackRate: { type: [Array, String], default: () => [0.5, 0.75, 1, 1.5, 2] },
+			//记忆播放
+			lastPlayTime: { type: Number, default: 0 },
+			//弹幕
+			danmu: { type: [Array, String], default: "" },
+			//源切换
+			resource: { type: Array, default: () => [] },
+			//进度条特殊点标记
+			progressDot: { type: Array, default: () => [] },
+		},
+		data() {
+			return {
+				player: null
+			}
+		},
+		mounted() {
+			if(this.isLive){
+				this.initHls()
+			}else{
+				this.init()
+			}
+		},
+		methods: {
+			init(){
+				this.player = new Player({
+					el: this.$refs.scVideo,
+					url: this.src,
+					fluid: true,
+					poster: this.poster,
+					lang: 'zh-cn',
+					volume: this.volume,
+					autoplay: this.autoplay,
+					loop: this.loop,
+					videoInit: this.videoInit,
+					playbackRate: this.playbackRate,
+					lastPlayTime: this.lastPlayTime,
+					pip: this.pip,
+					controls: this.controls,
+					danmu: this.formatDanmu(this.danmu),
+					progressDot: this.progressDot
+				})
+				this.player.emit('resourceReady', this.resource)
+			},
+			initHls(){
+				this.player = new HlsPlayer({
+					el: this.$refs.scVideo,
+					url: this.src,
+					fluid: true,
+					poster: this.poster,
+					isLive: true,
+					ignores: ['time','progress'],
+					lang: 'zh-cn',
+					volume: this.volume,
+					pip: this.pip,
+					controls: this.controls,
+				})
+			},
+			formatDanmu(danmu){
+				if(!danmu){
+					return false
+				}
+				let newDanmu = []
+				danmu.forEach(item => {
+					newDanmu.push({
+						id: item.id || '',
+						start: item.start || 0,
+						txt: item.txt || '',
+						duration: 10000,
+						mode: item.mode || 'scroll',
+						style: item.style || {}
+					})
+				})
+				return {
+					comments: newDanmu
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-video:deep(.danmu) > * {color: #fff;font-size:20px;font-weight:bold;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000;}
+	.sc-video:deep(.xgplayer-controls) {background-image: linear-gradient(180deg, transparent, rgba(0,0,0,0.3));}
+	.sc-video:deep(.xgplayer-progress-tip) {border:0;color: #fff;background: rgba(0,0,0,.5);line-height: 25px;padding: 0 10px;border-radius: 25px;}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/scWaterMark/index.vue b/ui/src/components/scWaterMark/index.vue
new file mode 100644
index 0000000..bb93890
--- /dev/null
+++ b/ui/src/components/scWaterMark/index.vue
@@ -0,0 +1,66 @@
+<!--
+ * @Descripttion: 局部水印组件
+ * @version: 1.1
+ * @Author: sakuya
+ * @Date: 2021年12月18日12:16:16
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年1月5日09:52:59
+-->
+
+<template>
+	<div class="sc-water-mark" ref="scWaterMark">
+		<slot></slot>
+	</div>
+</template>
+
+<script>
+	export default {
+		props: {
+			text: { type: String, required: true, default: "" },
+			subtext: { type: String, default: "" },
+			color: { type: String, default: "rgba(128,128,128,0.2)" }
+		},
+		data() {
+			return {
+
+			}
+		},
+		mounted() {
+			this.create()
+		},
+		methods: {
+			create(){
+				this.clear()
+				//创建画板
+				var canvas = document.createElement('canvas')
+				canvas.width = 150
+				canvas.height = 150
+				canvas.style.display = 'none'
+				//绘制文字
+				var text = canvas.getContext('2d')
+				text.rotate(-45 * Math.PI / 180)
+				text.translate(-75, 25)
+				text.fillStyle = this.color
+				text.font = "bold 20px SimHei"
+				text.textAlign = "center"
+				text.fillText(this.text, canvas.width / 2, canvas.height / 2)
+				text.font = "14px Microsoft YaHei"
+				text.fillText(this.subtext, canvas.width / 2, canvas.height / 2 + 20)
+				//创建水印容器
+				var watermark = document.createElement('div')
+				watermark.setAttribute('class', 'watermark')
+				const styleStr = `position:absolute;top:0;left:0;right:0;bottom:0;z-index:99;pointer-events:none;background-repeat:repeat;background-image:url('${canvas.toDataURL("image/png")}');`
+				watermark.setAttribute('style', styleStr);
+				this.$refs.scWaterMark.appendChild(watermark)
+			},
+			clear(){
+				var wmDom = this.$refs.scWaterMark.querySelector('.watermark')
+				wmDom && wmDom.remove()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-water-mark {position: relative;display: inherit;width: 100%;height: 100%;}
+</style>
diff --git a/ui/src/components/scWorkflow/index.vue b/ui/src/components/scWorkflow/index.vue
new file mode 100644
index 0000000..30eaf56
--- /dev/null
+++ b/ui/src/components/scWorkflow/index.vue
@@ -0,0 +1,154 @@
+<!--
+ * @Descripttion: 仿钉钉流程设计器
+ * @version: 1.2
+ * @Author: sakuya
+ * @Date: 2021年9月14日08:38:35
+ * @LastEditors: sakuya
+ * @LastEditTime: 2022年2月9日16:48:49
+-->
+
+<template>
+	<div class="sc-workflow-design">
+		<div class="box-scale">
+			<node-wrap v-if="nodeConfig" v-model="nodeConfig"></node-wrap>
+			<div class="end-node">
+				<div class="end-node-circle"></div>
+				<div class="end-node-text">流程结束</div>
+			</div>
+		</div>
+		<use-select v-if="selectVisible" ref="useselect" @closed="selectVisible=false"></use-select>
+	</div>
+</template>
+
+<script>
+	import nodeWrap from './nodeWrap'
+	import useSelect from './select'
+
+	export default {
+		provide(){
+			return {
+				select: this.selectHandle
+			}
+		},
+		props: {
+			modelValue: { type: Object, default: () => {} }
+		},
+		components: {
+			nodeWrap,
+			useSelect
+		},
+		data() {
+			return {
+				nodeConfig: this.modelValue,
+				selectVisible: false
+			}
+		},
+		watch:{
+			modelValue(val){
+				this.nodeConfig = val
+			},
+			nodeConfig(val){
+				this.$emit("update:modelValue", val)
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			selectHandle(type, data){
+				this.selectVisible = true
+				this.$nextTick(() => {
+					this.$refs.useselect.open(type, data)
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.sc-workflow-design {width: 100%;}
+	.sc-workflow-design .box-scale {display: inline-block;position: relative;width: 100%;padding: 54.5px 0px;align-items: flex-start;justify-content: center;flex-wrap: wrap;min-width: min-content;}
+
+	.sc-workflow-design {
+		.node-wrap {display: inline-flex;width: 100%;flex-flow: column wrap;justify-content: flex-start;align-items: center;padding: 0px 50px;position: relative;z-index: 1;}
+		.node-wrap-box {display: inline-flex;flex-direction: column;position: relative;width: 220px;min-height: 72px;flex-shrink: 0;background: rgb(255, 255, 255);border-radius: 4px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
+		.node-wrap-box::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: #f6f8f9;}
+		.node-wrap-box.start-node:before {content: none}
+		.node-wrap-box .title {height:24px;line-height: 24px;color: #fff;padding-left: 16px;padding-right: 30px;border-radius: 4px 4px 0 0;position: relative;display: flex;align-items: center;}
+		.node-wrap-box .title .icon {margin-right: 5px;}
+		.node-wrap-box .title .close {font-size: 15px;position: absolute;top:50%;transform: translateY(-50%);right:10px;display: none;}
+		.node-wrap-box .content {position: relative;padding: 15px;}
+		.node-wrap-box .content .placeholder {color: #999;}
+		.node-wrap-box:hover .close {display: block;}
+		.add-node-btn-box {width: 240px;display: inline-flex;flex-shrink: 0;position: relative;z-index: 1;}
+		.add-node-btn-box:before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: -1;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
+		.add-node-btn {user-select: none;width: 240px;padding: 20px 0px 32px;display: flex;justify-content: center;flex-shrink: 0;flex-grow: 1;}
+		.add-node-btn span {}
+		.add-branch {justify-content: center;padding: 0px 10px;position: absolute;top: -16px;left: 50%;transform: translateX(-50%);transform-origin: center center;z-index: 1;display: inline-flex;align-items: center;}
+		.branch-wrap {display: inline-flex;width: 100%;}
+		.branch-box-wrap {display: flex;flex-flow: column wrap;align-items: center;min-height: 270px;width: 100%;flex-shrink: 0;}
+		.col-box {display: inline-flex;flex-direction: column;align-items: center;position: relative;background: #f6f8f9;}
+		.branch-box {display: flex;overflow: visible;min-height: 180px;height: auto;border-bottom: 2px solid #ccc;border-top: 2px solid #ccc;position: relative;margin-top: 15px;}
+		.branch-box .col-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;z-index: 0;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
+		.condition-node {display: inline-flex;flex-direction: column;min-height: 220px;}
+		.condition-node-box {padding-top: 30px;padding-right: 50px;padding-left: 50px;justify-content: center;align-items: center;flex-grow: 1;position: relative;display: inline-flex;flex-direction: column;}
+		.condition-node-box::before {content: "";position: absolute;top: 0px;left: 0px;right: 0px;bottom: 0px;margin: auto;width: 2px;height: 100%;background-color: rgb(202, 202, 202);}
+		.auto-judge {position: relative;width: 220px;min-height: 72px;background: rgb(255, 255, 255);border-radius: 4px;padding: 15px 15px;cursor: pointer;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
+		.auto-judge::before {content: "";position: absolute;top: -12px;left: 50%;transform: translateX(-50%);width: 0px;border-style: solid;border-width: 8px 6px 4px;border-color: rgb(202, 202, 202) transparent transparent;background: rgb(245, 245, 247);}
+		.auto-judge .title {line-height: 16px;}
+		.auto-judge .title .node-title {color: #15BC83;}
+		.auto-judge .title .close {font-size: 15px;position: absolute;top:15px;right:15px;color: #999;display: none;}
+		.auto-judge .title .priority-title {position: absolute;top:15px;right:15px;color: #999;}
+		.auto-judge .content {position: relative;padding-top: 15px;}
+		.auto-judge .content .placeholder {color: #999;}
+		.auto-judge:hover {
+			.close {display: block;}
+			.priority-title {display: none;}
+		}
+		.top-left-cover-line, .top-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;top: -2px;}
+		.bottom-left-cover-line, .bottom-right-cover-line {position: absolute;height: 3px;width: 50%;background-color: #f6f8f9;bottom: -2px;}
+		.top-left-cover-line {left: -1px;}
+		.top-right-cover-line {right: -1px;}
+		.bottom-left-cover-line {left: -1px;}
+		.bottom-right-cover-line {right: -1px;}
+		.end-node {border-radius: 50%;font-size: 14px;color: rgba(25,31,37,.4);text-align: left;}
+		.end-node-circle {width: 10px;height: 10px;margin: auto;border-radius: 50%;background: #dbdcdc;}
+		.end-node-text {margin-top: 5px;text-align: center;}
+		.auto-judge:hover {
+			.sort-left {display: flex;}
+			.sort-right {display: flex;}
+		}
+		.auto-judge .sort-left {position: absolute;top: 0;bottom: 0;z-index: 1;left: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
+		.auto-judge .sort-right {position: absolute;top: 0;bottom: 0;z-index: 1;right: 0;display: none;justify-content: center;align-items: center;flex-direction: column;}
+		.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #eee;}
+		.auto-judge:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
+		.auto-judge:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
+		.node-wrap-box:after {pointer-events: none;content: "";position: absolute;top:0;bottom:0;left:0;right:0;z-index: 2;border-radius: 4px;transition: all .1s;}
+		.node-wrap-box:hover:after {border: 1px solid #3296fa;box-shadow: 0 0 6px 0 rgba(50,150,250,.3);}
+	}
+
+	.tags-list {margin-top: 15px;width: 100%;}
+	.add-node-popover-body {}
+	.add-node-popover-body li {display: inline-block;width: 80px;text-align: center;padding:10px 0;}
+	.add-node-popover-body li i {border: 1px solid var(--el-border-color-light);width:40px;height:40px;border-radius: 50%;text-align: center;line-height: 38px;font-size: 18px;cursor: pointer;}
+	.add-node-popover-body li i:hover {border: 1px solid #3296fa;background: #3296fa;color: #fff!important;}
+	.add-node-popover-body li p {font-size: 12px;margin-top: 5px;}
+	.node-wrap-drawer__title {padding-right:40px;}
+	.node-wrap-drawer__title label {cursor: pointer;}
+	.node-wrap-drawer__title label:hover {border-bottom: 1px dashed #409eff;}
+	.node-wrap-drawer__title .node-wrap-drawer__title-edit {color: #409eff;margin-left: 10px;vertical-align: middle;}
+
+	[data-theme='dark'] .sc-workflow-design {
+		.node-wrap-box,.auto-judge {background: #2b2b2b;}
+		.col-box {background: #222225;}
+		.top-left-cover-line,
+		.top-right-cover-line,
+		.bottom-left-cover-line,
+		.bottom-right-cover-line {background-color: #222225;}
+		.node-wrap-box::before,.auto-judge::before {background-color: #222225;}
+		.branch-box .add-branch {background: #222225;}
+		.end-node .end-node-text {color: #d0d0d0;}
+		.auto-judge .sort-left:hover, .auto-judge .sort-right:hover {background: #222225;}
+	}
+
+</style>
diff --git a/ui/src/components/scWorkflow/nodeWrap.vue b/ui/src/components/scWorkflow/nodeWrap.vue
new file mode 100644
index 0000000..b2ff83e
--- /dev/null
+++ b/ui/src/components/scWorkflow/nodeWrap.vue
@@ -0,0 +1,57 @@
+<template>
+	<promoter v-if="nodeConfig.type==0" v-model="nodeConfig"></promoter>
+
+	<approver v-if="nodeConfig.type==1" v-model="nodeConfig"></approver>
+
+	<send v-if="nodeConfig.type==2" v-model="nodeConfig"></send>
+
+	<branch v-if="nodeConfig.type==4" v-model="nodeConfig">
+		<template v-slot="slot">
+			<node-wrap v-if="slot.node" v-model="slot.node.childNode"></node-wrap>
+		</template>
+	</branch>
+
+	<node-wrap v-if="nodeConfig.childNode" v-model="nodeConfig.childNode"></node-wrap>
+
+</template>
+
+<script>
+	import approver from './nodes/approver'
+	import promoter from './nodes/promoter'
+	import branch from './nodes/branch'
+	import send from './nodes/send'
+
+	export default {
+		props: {
+			modelValue: { type: Object, default: () => {} }
+		},
+		components: {
+			approver,
+			promoter,
+			branch,
+			send
+		},
+		data() {
+			return {
+				nodeConfig: {},
+			}
+		},
+		watch:{
+			modelValue(val){
+				this.nodeConfig = val
+			},
+			nodeConfig(val){
+				this.$emit("update:modelValue", val)
+			}
+		},
+		mounted() {
+			this.nodeConfig = this.modelValue
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scWorkflow/nodes/addNode.vue b/ui/src/components/scWorkflow/nodes/addNode.vue
new file mode 100644
index 0000000..ff693cf
--- /dev/null
+++ b/ui/src/components/scWorkflow/nodes/addNode.vue
@@ -0,0 +1,102 @@
+<template>
+	 <div class="add-node-btn-box">
+	 	<div class="add-node-btn">
+			<el-popover placement="right-start" :width="270" trigger="click" :hide-after="0" :show-after="0">
+				<template #reference>
+					<el-button type="primary" icon="el-icon-plus" circle></el-button>
+				</template>
+				<div class="add-node-popover-body">
+					<ul>
+						<li>
+							<el-icon style="color: #ff943e;" @click="addType(1)"><el-icon-user-filled /></el-icon>
+							<p>审批节点</p>
+						</li>
+						<li>
+							<el-icon style="color: #3296fa;" @click="addType(2)"><el-icon-promotion /></el-icon>
+							<p>抄送节点</p>
+						</li>
+						<li>
+							<el-icon style="color: #15BC83;" @click="addType(4)"><el-icon-share /></el-icon>
+							<p>条件分支</p>
+						</li>
+					</ul>
+				</div>
+			</el-popover>
+	 	</div>
+	 </div>
+</template>
+
+<script>
+	export default {
+		props: {
+			modelValue: { type: Object, default: () => {} }
+		},
+		data() {
+			return {
+				
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			addType(type){
+				var node = {}
+				if (type == 1) {
+					node = {
+						nodeName: "审核人",
+						type: 1,			//节点类型
+						setType: 1,			//审核人类型
+						nodeUserList: [],	//审核人成员
+						nodeRoleList: [],	//审核角色
+						examineLevel: 1,	//指定主管层级
+						directorLevel: 1,	//自定义连续主管审批层级
+						selectMode: 1,		//发起人自选类型
+						termAuto: false,	//审批期限超时自动审批
+						term: 0,			//审批期限
+						termMode: 1,		//审批期限超时后执行类型
+						examineMode: 1,		//多人审批时审批方式
+						directorMode: 0,	//连续主管审批方式
+						childNode: this.modelValue
+					}
+				}else if(type == 2){
+					node = {
+						nodeName: "抄送人",
+						type: 2,
+						userSelectFlag: true,
+						nodeUserList: [],
+						childNode: this.modelValue
+					}
+
+				}else if(type == 4){
+					node = {
+						nodeName: "条件路由",
+						type: 4,
+						conditionNodes: [
+							{
+								nodeName: "条件1",
+								type: 3,
+								priorityLevel: 1,
+								conditionMode: 1,
+								conditionList: []
+							},
+							{
+								nodeName: "条件2",
+								type: 3,
+								priorityLevel: 2,
+								conditionMode: 1,
+								conditionList: []
+							}
+						],
+						childNode: this.modelValue
+					}
+
+				}
+				this.$emit("update:modelValue", node)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scWorkflow/nodes/approver.vue b/ui/src/components/scWorkflow/nodes/approver.vue
new file mode 100644
index 0000000..effe9d1
--- /dev/null
+++ b/ui/src/components/scWorkflow/nodes/approver.vue
@@ -0,0 +1,193 @@
+<template>
+	<div class="node-wrap">
+		<div class="node-wrap-box" @click="show">
+			<div class="title" style="background: #ff943e;">
+				<el-icon class="icon"><el-icon-user-filled /></el-icon>
+				<span>{{ nodeConfig.nodeName }}</span>
+				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
+			</div>
+			<div class="content">
+				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
+				<span v-else class="placeholder">请选择</span>
+			</div>
+		</div>
+		<add-node v-model="nodeConfig.childNode"></add-node>
+		<el-drawer title="审批人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
+			<template #title>
+				<div class="node-wrap-drawer__title">
+					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
+					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+				</div>
+			</template>
+			<el-container>
+				<el-main style="padding:0 20px 20px 20px">
+					<el-form label-position="top">
+
+						<el-form-item label="审批人员类型">
+							<el-select v-model="form.setType">
+								<el-option :value="1" label="指定成员"></el-option>
+								<el-option :value="2" label="主管"></el-option>
+								<el-option :value="3" label="角色"></el-option>
+								<el-option :value="4" label="发起人自选"></el-option>
+								<el-option :value="5" label="发起人自己"></el-option>
+								<el-option :value="7" label="连续多级主管"></el-option>
+							</el-select>
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==1" label="选择成员">
+							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
+							<div class="tags-list">
+								<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable @close="delUser(index)">{{user.name}}</el-tag>
+							</div>
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==2" label="指定主管">
+							发起人的第  <el-input-number v-model="form.examineLevel" :min="1"/>  级主管
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==3" label="选择角色">
+							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
+							<div class="tags-list">
+								<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
+							</div>
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==4" label="发起人自选">
+							<el-radio-group v-model="form.selectMode">
+								<el-radio :label="1">自选一个人</el-radio>
+								<el-radio :label="2">自选多个人</el-radio>
+							</el-radio-group>
+						</el-form-item>
+
+						<el-form-item v-if="form.setType==7" label="连续主管审批终点">
+							<el-radio-group v-model="form.directorMode">
+								<el-radio :label="0">直到最上层主管</el-radio>
+								<el-radio :label="1">自定义审批终点</el-radio>
+							</el-radio-group>
+							<p v-if="form.directorMode==1">直到发起人的第  <el-input-number v-model="form.directorLevel" :min="1"/> 级主管</p>
+						</el-form-item>
+
+						<el-divider></el-divider>
+						<el-form-item label="">
+							<el-checkbox v-model="form.termAuto" label="超时自动审批"></el-checkbox>
+						</el-form-item>
+						<template v-if="form.termAuto">
+							<el-form-item label="审批期限（为 0 则不生效）">
+								<el-input-number v-model="form.term" :min="0"/> 小时
+							</el-form-item>
+							<el-form-item label="审批期限超时后执行">
+								<el-radio-group v-model="form.termMode">
+									<el-radio :label="0">自动通过</el-radio>
+									<el-radio :label="1">自动拒绝</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</template>
+						<el-divider></el-divider>
+						<el-form-item label="多人审批时审批方式">
+							<el-radio-group v-model="form.examineMode">
+								<p style="width: 100%;"><el-radio :label="1">按顺序依次审批</el-radio></p>
+								<p style="width: 100%;"><el-radio :label="2">会签 (可同时审批，每个人必须审批通过)</el-radio></p>
+								<p style="width: 100%;"><el-radio :label="3">或签 (有一人审批通过即可)</el-radio></p>
+							</el-radio-group>
+						</el-form-item>
+					</el-form>
+				</el-main>
+				<el-footer>
+					<el-button type="primary" @click="save">保存</el-button>
+					<el-button @click="drawer=false">取消</el-button>
+				</el-footer>
+			</el-container>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+	import addNode from './addNode'
+
+	export default {
+		inject: ['select'],
+		props: {
+			modelValue: { type: Object, default: () => {} }
+		},
+		components: {
+			addNode
+		},
+		data() {
+			return {
+				nodeConfig: {},
+				drawer: false,
+				isEditTitle: false,
+				form: {}
+			}
+		},
+		watch:{
+			modelValue(){
+				this.nodeConfig = this.modelValue
+			}
+		},
+		mounted() {
+			this.nodeConfig = this.modelValue
+		},
+		methods: {
+			show(){
+				this.form = {}
+				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
+				this.drawer = true
+			},
+			editTitle(){
+				this.isEditTitle = true
+				this.$nextTick(()=>{
+					this.$refs.nodeTitle.focus()
+				})
+			},
+			saveTitle(){
+				this.isEditTitle = false
+			},
+			save(){
+				this.$emit("update:modelValue", this.form)
+				this.drawer = false
+			},
+			delNode(){
+				this.$emit("update:modelValue", this.nodeConfig.childNode)
+			},
+			delUser(index){
+				this.form.nodeUserList.splice(index, 1)
+			},
+			delRole(index){
+				this.form.nodeRoleList.splice(index, 1)
+			},
+			selectHandle(type, data){
+				this.select(type, data)
+			},
+			toText(nodeConfig){
+				if(nodeConfig.setType == 1){
+					if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length>0) {
+						const users = nodeConfig.nodeUserList.map(item=>item.name).join("、")
+						return users
+					}else{
+						return false
+					}
+				}else if (nodeConfig.setType == 2) {
+					return nodeConfig.examineLevel == 1 ? '直接主管' : `发起人的第${nodeConfig.examineLevel}级主管`
+				}else if (nodeConfig.setType == 3) {
+					if (nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length>0) {
+						const roles = nodeConfig.nodeRoleList.map(item=>item.name).join("、")
+						return '角色-' + roles
+					}else{
+						return false
+					}
+				}else if (nodeConfig.setType == 4) {
+					return "发起人自选"
+				}else if (nodeConfig.setType == 5) {
+					return "发起人自己"
+				}else if (nodeConfig.setType == 7) {
+					return "连续多级主管"
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>
diff --git a/ui/src/components/scWorkflow/nodes/branch.vue b/ui/src/components/scWorkflow/nodes/branch.vue
new file mode 100644
index 0000000..86bf163
--- /dev/null
+++ b/ui/src/components/scWorkflow/nodes/branch.vue
@@ -0,0 +1,222 @@
+<template>
+	<div class="branch-wrap">
+		<div class="branch-box-wrap">
+			<div class="branch-box">
+				<el-button class="add-branch" type="success" plain round @click="addTerm">添加条件</el-button>
+				<div class="col-box" v-for="(item,index) in nodeConfig.conditionNodes" :key="index">
+					<div class="condition-node">
+						<div class="condition-node-box">
+							<div class="auto-judge" @click="show(index)">
+								<div class="sort-left" v-if="index!=0" @click.stop="arrTransfer(index,-1)">
+									<el-icon><el-icon-arrow-left /></el-icon>
+								</div>
+								<div class="title">
+									<span class="node-title">{{ item.nodeName }}</span>
+									<span class="priority-title">优先级{{item.priorityLevel}}</span>
+									<el-icon class="close" @click.stop="delTerm(index)"><el-icon-close /></el-icon>
+								</div>
+								<div class="content">
+									<span v-if="toText(nodeConfig, index)">{{ toText(nodeConfig, index) }}</span>
+									<span v-else class="placeholder">请设置条件</span>
+								</div>
+								<div class="sort-right" v-if="index!=nodeConfig.conditionNodes.length-1" @click.stop="arrTransfer(index)">
+									<el-icon><el-icon-arrow-right /></el-icon>
+								</div>
+							</div>
+							<add-node v-model="item.childNode"></add-node>
+						</div>
+					</div>
+					<slot v-if="item.childNode" :node="item"></slot>
+					<div class="top-left-cover-line" v-if="index==0"></div>
+					<div class="bottom-left-cover-line" v-if="index==0"></div>
+					<div class="top-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
+					<div class="bottom-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
+				</div>
+			</div>
+			<add-node v-model="nodeConfig.childNode"></add-node>
+		</div>
+		<el-drawer title="条件设置" v-model="drawer" destroy-on-close append-to-body :size="600">
+			<template #title>
+				<div class="node-wrap-drawer__title">
+					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
+					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+				</div>
+			</template>
+			<el-container>
+				<el-main style="padding:0 20px 20px 20px">
+					<el-form label-position="top">
+						<el-form-item label="条件关系">
+							<el-radio-group v-model="form.conditionMode">
+								<el-radio :label="1">且</el-radio>
+								<el-radio :label="2">或</el-radio>
+							</el-radio-group>
+						</el-form-item>
+						<el-divider></el-divider>
+						<el-form-item>
+							<el-table :data="form.conditionList">
+								<el-table-column prop="label" label="描述">
+									<template #default="scope">
+										<el-input v-model="scope.row.label" placeholder="描述"></el-input>
+									</template>
+								</el-table-column>
+								<el-table-column prop="field" label="条件字段" width="130">
+									<template #default="scope">
+										<el-input v-model="scope.row.field" placeholder="条件字段"></el-input>
+									</template>
+								</el-table-column>
+								<el-table-column prop="operator" label="运算符" width="130">
+									<template #default="scope">
+										<el-select v-model="scope.row.operator" placeholder="Select">
+											<el-option label="等于" value="="></el-option>
+											<el-option label="不等于" value="!="></el-option>
+											<el-option label="大于" value=">"></el-option>
+											<el-option label="大于等于" value=">="></el-option>
+											<el-option label="小于" value="<"></el-option>
+											<el-option label="小于等于" value="<="></el-option>
+											<el-option label="包含" value="include"></el-option>
+											<el-option label="不包含" value="notinclude"></el-option>
+										</el-select>
+									</template>
+								</el-table-column>
+								<el-table-column prop="value" label="值" width="100">
+									<template #default="scope">
+										<el-input v-model="scope.row.value" placeholder="值"></el-input>
+									</template>
+								</el-table-column>
+								<el-table-column prop="value" label="移除" width="55">
+									<template #default="scope">
+										<el-button size="small" type="text" @click="deleteConditionList(scope.$index)">移除</el-button>
+									</template>
+								</el-table-column>
+							</el-table>
+						</el-form-item>
+						<p><el-button type="primary" icon="el-icon-plus" round @click="addConditionList">增加条件</el-button></p>
+					</el-form>
+				</el-main>
+				<el-footer>
+					<el-button type="primary" @click="save">保存</el-button>
+					<el-button @click="drawer=false">取消</el-button>
+				</el-footer>
+			</el-container>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+	import addNode from './addNode'
+
+	export default {
+		props: {
+			modelValue: { type: Object, default: () => {} }
+		},
+		components: {
+			addNode
+		},
+		data() {
+			return {
+				nodeConfig: {},
+				drawer: false,
+				isEditTitle: false,
+				index: 0,
+				form: {}
+			}
+		},
+		watch:{
+			modelValue(){
+				this.nodeConfig = this.modelValue
+			}
+		},
+		mounted() {
+			this.nodeConfig = this.modelValue
+		},
+		methods: {
+			show(index){
+				this.index = index
+				this.form = {}
+				this.form = JSON.parse(JSON.stringify(this.nodeConfig.conditionNodes[index]))
+				this.drawer = true
+			},
+			editTitle(){
+				this.isEditTitle = true
+				this.$nextTick(()=>{
+					this.$refs.nodeTitle.focus()
+				})
+			},
+			saveTitle(){
+				this.isEditTitle = false
+			},
+			save(){
+				this.nodeConfig.conditionNodes[this.index] = this.form
+				this.$emit("update:modelValue", this.nodeConfig)
+				this.drawer = false
+			},
+			addTerm(){
+				let len = this.nodeConfig.conditionNodes.length + 1
+				this.nodeConfig.conditionNodes.push({
+					nodeName: "条件" + len,
+					type: 3,
+					priorityLevel: len,
+					conditionMode: 1,
+					conditionList: []
+				})
+			},
+			delTerm(index){
+				this.nodeConfig.conditionNodes.splice(index, 1)
+				if (this.nodeConfig.conditionNodes.length == 1) {
+					if (this.nodeConfig.childNode) {
+						if (this.nodeConfig.conditionNodes[0].childNode) {
+							this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
+						}else{
+							this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
+						}
+					}
+					this.$emit("update:modelValue", this.nodeConfig.conditionNodes[0].childNode);
+				}
+			},
+			reData(data, addData) {
+				if (!data.childNode) {
+					data.childNode = addData
+				} else {
+					this.reData(data.childNode, addData)
+				}
+			},
+			arrTransfer(index, type = 1){
+				this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0]
+				this.nodeConfig.conditionNodes.map((item, index) => {
+					item.priorityLevel = index + 1
+				})
+				this.$emit("update:modelValue", this.nodeConfig)
+			},
+			addConditionList(){
+				this.form.conditionList.push({
+					label: '',
+					field: '',
+					operator: '=',
+					value: ''
+				})
+			},
+			deleteConditionList(index){
+				this.form.conditionList.splice(index, 1)
+			},
+			toText(nodeConfig, index){
+				var { conditionList } = nodeConfig.conditionNodes[index]
+				if (conditionList && conditionList.length == 1) {
+					const text = conditionList.map(item => `${item.label}${item.operator}${item.value}`).join(" 和 ")
+					return text
+				}else if(conditionList && conditionList.length > 1){
+					const conditionModeText = nodeConfig.conditionNodes[index].conditionMode==1?'且行':'或行'
+					return conditionList.length + "个条件，" + conditionModeText
+				}else{
+					if(index == nodeConfig.conditionNodes.length - 1){
+						return "其他条件进入此流程"
+					}else{
+						return false
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scWorkflow/nodes/promoter.vue b/ui/src/components/scWorkflow/nodes/promoter.vue
new file mode 100644
index 0000000..0e2e7c3
--- /dev/null
+++ b/ui/src/components/scWorkflow/nodes/promoter.vue
@@ -0,0 +1,106 @@
+<template>
+	<div class="node-wrap">
+		<div class="node-wrap-box start-node" @click="show">
+			<div class="title" style="background: #576a95;">
+				<el-icon class="icon"><el-icon-user-filled /></el-icon>
+				<span>{{ nodeConfig.nodeName }}</span>
+			</div>
+			<div class="content">
+				<span>{{ toText(nodeConfig) }}</span>
+			</div>
+		</div>
+		<add-node v-model="nodeConfig.childNode"></add-node>
+		<el-drawer title="发起人" v-model="drawer" destroy-on-close append-to-body :size="500">
+			<template #title>
+				<div class="node-wrap-drawer__title">
+					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
+					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+				</div>
+			</template>
+			<el-container>
+				<el-main style="padding:0 20px 20px 20px">
+					<el-form label-position="top">
+						<el-form-item label="谁可以发起此审批">
+							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(2, form.nodeRoleList)">选择角色</el-button>
+							<div class="tags-list">
+								<el-tag v-for="(role, index) in form.nodeRoleList" :key="role.id" type="info" closable @close="delRole(index)">{{role.name}}</el-tag>
+							</div>
+						</el-form-item>
+						<el-alert v-if="form.nodeRoleList.length==0" title="不指定则默认所有人都可发起此审批" type="info" :closable="false"/>
+					</el-form>
+				</el-main>
+				<el-footer>
+					<el-button type="primary" @click="save">保存</el-button>
+					<el-button @click="drawer=false">取消</el-button>
+				</el-footer>
+			</el-container>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+	import addNode from './addNode'
+
+	export default {
+		inject: ['select'],
+		props: {
+			modelValue: { type: Object, default: () => {} }
+		},
+		components: {
+			addNode
+		},
+		data() {
+			return {
+				nodeConfig: {},
+				drawer: false,
+				isEditTitle: false,
+				form: {}
+			}
+		},
+		watch:{
+			modelValue(){
+				this.nodeConfig = this.modelValue
+			}
+		},
+		mounted() {
+			this.nodeConfig = this.modelValue
+		},
+		methods: {
+			show(){
+				this.form = {}
+				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
+				this.isEditTitle = false
+				this.drawer = true
+			},
+			editTitle(){
+				this.isEditTitle = true
+				this.$nextTick(()=>{
+					this.$refs.nodeTitle.focus()
+				})
+			},
+			saveTitle(){
+				this.isEditTitle = false
+			},
+			selectHandle(type, data){
+				this.select(type, data)
+			},
+			delRole(index){
+				this.form.nodeRoleList.splice(index, 1)
+			},
+			save(){
+				this.$emit("update:modelValue", this.form)
+				this.drawer = false
+			},
+			toText(nodeConfig){
+				if(nodeConfig.nodeRoleList && nodeConfig.nodeRoleList.length > 0){
+					return nodeConfig.nodeRoleList.map(item=>item.name).join("、")
+				}else{
+					return "所有人"
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scWorkflow/nodes/send.vue b/ui/src/components/scWorkflow/nodes/send.vue
new file mode 100644
index 0000000..1a53796
--- /dev/null
+++ b/ui/src/components/scWorkflow/nodes/send.vue
@@ -0,0 +1,118 @@
+<template>
+	<div class="node-wrap">
+		<div class="node-wrap-box" @click="show">
+			<div class="title" style="background: #3296fa;">
+				<el-icon class="icon"><el-icon-promotion /></el-icon>
+				<span>{{ nodeConfig.nodeName }}</span>
+				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
+			</div>
+			<div class="content">
+				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
+				<span v-else class="placeholder">请选择人员</span>
+			</div>
+		</div>
+		<add-node v-model="nodeConfig.childNode"></add-node>
+		<el-drawer title="抄送人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
+			<template #title>
+				<div class="node-wrap-drawer__title">
+					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
+					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
+				</div>
+			</template>
+			<el-container>
+				<el-main style="padding:0 20px 20px 20px">
+					<el-form label-position="top">
+						<el-form-item label="选择要抄送的人员">
+							<el-button type="primary" icon="el-icon-plus" round @click="selectHandle(1, form.nodeUserList)">选择人员</el-button>
+							<div class="tags-list">
+								<el-tag v-for="(user, index) in form.nodeUserList" :key="user.id" closable @close="delUser(index)">{{user.name}}</el-tag>
+							</div>
+						</el-form-item>
+						<el-form-item label="">
+							<el-checkbox v-model="form.userSelectFlag" label="允许发起人自选抄送人"></el-checkbox>
+						</el-form-item>
+					</el-form>
+				</el-main>
+				<el-footer>
+					<el-button type="primary" @click="save">保存</el-button>
+					<el-button @click="drawer=false">取消</el-button>
+				</el-footer>
+			</el-container>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+	import addNode from './addNode'
+
+	export default {
+		inject: ['select'],
+		props: {
+			modelValue: { type: Object, default: () => {} }
+		},
+		components: {
+			addNode
+		},
+		data() {
+			return {
+				nodeConfig: {},
+				drawer: false,
+				isEditTitle: false,
+				form: {}
+			}
+		},
+		watch:{
+			modelValue(){
+				this.nodeConfig = this.modelValue
+			}
+		},
+		mounted() {
+			this.nodeConfig = this.modelValue
+		},
+		methods: {
+			show(){
+				this.form = {}
+				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
+				this.drawer = true
+			},
+			editTitle(){
+				this.isEditTitle = true
+				this.$nextTick(()=>{
+					this.$refs.nodeTitle.focus()
+				})
+			},
+			saveTitle(){
+				this.isEditTitle = false
+			},
+			save(){
+				this.$emit("update:modelValue", this.form)
+				this.drawer = false
+			},
+			delNode(){
+				this.$emit("update:modelValue", this.nodeConfig.childNode)
+			},
+			delUser(index){
+				this.form.nodeUserList.splice(index, 1)
+			},
+			selectHandle(type, data){
+				this.select(type, data)
+			},
+			toText(nodeConfig){
+				if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length>0) {
+					const users = nodeConfig.nodeUserList.map(item=>item.name).join("、")
+					return users
+				}else{
+					if(nodeConfig.userSelectFlag){
+						return "发起人自选"
+					}else{
+						return false
+					}
+
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/components/scWorkflow/select.vue b/ui/src/components/scWorkflow/select.vue
new file mode 100644
index 0000000..be38097
--- /dev/null
+++ b/ui/src/components/scWorkflow/select.vue
@@ -0,0 +1,269 @@
+<template>
+	<el-dialog v-model="dialogVisible" :title="titleMap[type-1]" :width="type==1?680:460" destroy-on-close append-to-body @closed="$emit('closed')">
+
+		<template v-if="type==1">
+			<div class="sc-user-select">
+				<div class="sc-user-select__left">
+					<div class="sc-user-select__search">
+						<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索成员">
+							<template #append>
+								<el-button icon="el-icon-search" @click="search"></el-button>
+							</template>
+						</el-input>
+					</div>
+					<div class="sc-user-select__select">
+						<div class="sc-user-select__tree" v-loading="showGrouploading">
+							<el-scrollbar>
+								<el-tree class="menu" ref="groupTree" :data="group" :node-key="groupProps.key" :props="groupProps" highlight-current :expand-on-click-node="false" :current-node-key="groupId" @node-click="groupClick"/>
+							</el-scrollbar>
+						</div>
+						<div class="sc-user-select__user" v-loading="showUserloading">
+							<div class="sc-user-select__user__list">
+								<el-scrollbar ref="userScrollbar">
+									<el-tree class="menu" ref="userTree" :data="user" :node-key="userProps.key" :props="userProps" :default-checked-keys="selectedIds" show-checkbox check-on-click-node @check-change="userClick"></el-tree>
+								</el-scrollbar>
+							</div>
+							<footer>
+								<el-pagination background layout="prev,next" small :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="paginationChange"></el-pagination>
+							</footer>
+						</div>
+					</div>
+				</div>
+				<div class="sc-user-select__toicon"><el-icon><el-icon-arrow-right /></el-icon></div>
+				<div class="sc-user-select__selected">
+					<header>已选 ({{selected.length}})</header>
+					<ul>
+						<el-scrollbar>
+							<li v-for="(item, index) in selected" :key="item.id">
+								<span class="name">
+									<el-avatar size="small">{{item.name.substring(0,1)}}</el-avatar>
+									<label>{{item.name}}</label>
+								</span>
+								<span class="delete">
+									<el-button type="text" icon="el-icon-delete" circle size="small" @click="deleteSelected(index)"></el-button>
+								</span>
+							</li>
+						</el-scrollbar>
+					</ul>
+				</div>
+			</div>
+		</template>
+
+		<template v-if="type==2">
+			<div class="sc-user-select sc-user-select-role">
+				<div class="sc-user-select__left">
+					<div class="sc-user-select__select">
+						<div class="sc-user-select__tree" v-loading="showGrouploading">
+							<el-scrollbar>
+								<el-tree class="menu" ref="groupTree" :data="role" :node-key="roleProps.key" :props="roleProps" show-checkbox check-strictly check-on-click-node :expand-on-click-node="false" :default-checked-keys="selectedIds" @check-change="roleClick"/>
+							</el-scrollbar>
+						</div>
+					</div>
+				</div>
+				<div class="sc-user-select__toicon"><el-icon><el-icon-arrow-right /></el-icon></div>
+				<div class="sc-user-select__selected">
+					<header>已选 ({{selected.length}})</header>
+					<ul>
+						<el-scrollbar>
+							<li v-for="(item, index) in selected" :key="item.id">
+								<span class="name">
+									<label>{{item.name}}</label>
+								</span>
+								<span class="delete">
+									<el-button type="text" icon="el-icon-delete" circle size="mini" @click="deleteSelected(index)"></el-button>
+								</span>
+							</li>
+						</el-scrollbar>
+					</ul>
+				</div>
+			</div>
+		</template>
+
+
+		<template #footer>
+			<el-button @click="dialogVisible = false">取 消</el-button>
+			<el-button type="primary" @click="save">确 认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	import config from "@/config/workflow";
+
+	export default {
+		props: {
+			modelValue: { type: Boolean, default: false }
+		},
+		data() {
+			return {
+				groupProps: config.group.props,
+				userProps: config.user.props,
+				roleProps: config.role.props,
+
+				titleMap: ['人员选择', '角色选择'],
+				dialogVisible: false,
+				showGrouploading: false,
+				showUserloading: false,
+				keyword: '',
+				groupId: '',
+				pageSize: config.user.pageSize,
+				total: 0,
+				currentPage: 1,
+				group: [],
+				user: [],
+				role: [],
+				type: 1,
+				selected: [],
+				value: []
+			}
+		},
+		computed: {
+			selectedIds(){
+				return this.selected.map(t => t.id)
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//打开赋值
+			open(type, data){
+				this.type = type
+				this.value = data||[]
+				this.selected = JSON.parse(JSON.stringify(data||[]))
+				this.dialogVisible = true
+
+				if(this.type==1){
+					this.getGroup()
+					this.getUser()
+				}else if(this.type==2){
+					this.getRole()
+				}
+
+			},
+			//获取组织
+			async getGroup(){
+				this.showGrouploading = true;
+				var res = await config.group.apiObj.get();
+				this.showGrouploading = false;
+				var allNode = {[config.group.props.key]: '', [config.group.props.label]: '所有'}
+				res.data.unshift(allNode);
+				this.group = config.group.parseData(res).rows
+			},
+			//获取用户
+			async getUser(){
+				this.showUserloading = true;
+				var params = {
+					[config.user.request.keyword]: this.keyword || null,
+					[config.user.request.groupId]: this.groupId || null,
+					[config.user.request.page]: this.currentPage,
+					[config.user.request.pageSize]: this.pageSize
+				}
+				var res = await config.user.apiObj.get(params);
+				this.showUserloading = false;
+				this.user =  config.user.parseData(res).rows;
+				this.total = config.user.parseData(res).total || 0;
+				this.$refs.userScrollbar.setScrollTop(0)
+			},
+			//获取角色
+			async getRole(){
+				this.showGrouploading = true;
+				var res = await config.role.apiObj.get();
+				this.showGrouploading = false;
+				this.role = config.role.parseData(res).rows
+			},
+			//组织点击
+			groupClick(data){
+				this.keyword = ''
+				this.currentPage = 1
+				this.groupId = data[config.group.props.key]
+				this.getUser()
+			},
+			//用户点击
+			userClick(data, checked){
+				if(checked){
+					this.selected.push({
+						id: data[config.user.props.key],
+						name: data[config.user.props.label]
+					})
+				}else{
+					this.selected = this.selected.filter(item => item.id != data[config.user.props.key])
+				}
+			},
+			//用户分页点击
+			paginationChange(){
+				this.getUser()
+			},
+			//用户搜索
+			search(){
+				this.groupId = ''
+				this.$refs.groupTree.setCurrentKey(this.groupId)
+				this.currentPage = 1
+				this.getUser()
+			},
+			//删除已选
+			deleteSelected(index){
+				this.selected.splice(index,1);
+				if(this.type==1){
+					this.$refs.userTree.setCheckedKeys(this.selectedIds)
+				}else if(this.type==2){
+					this.$refs.groupTree.setCheckedKeys(this.selectedIds)
+				}
+			},
+			//角色点击
+			roleClick(data, checked){
+				if(checked){
+					this.selected.push({
+						id: data[config.role.props.key],
+						name: data[config.role.props.label]
+					})
+				}else{
+					this.selected = this.selected.filter(item => item.id != data[config.role.props.key])
+				}
+			},
+			//提交保存
+			save(){
+				this.value.splice(0,this.value.length);
+				this.selected.map(item => {
+					this.value.push(item)
+				})
+				this.dialogVisible = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.sc-user-select {display: flex;}
+	.sc-user-select__left {width: 400px;}
+	.sc-user-select__right {flex: 1;}
+
+	.sc-user-select__search {padding-bottom:10px;}
+
+	.sc-user-select__select {display: flex;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
+	.sc-user-select__tree {width: 200px;height:300px;border-right: 1px solid var(--el-border-color-light);}
+	.sc-user-select__user {width: 200px;height:300px;display: flex;flex-direction: column;}
+	.sc-user-select__user__list {flex: 1;overflow: auto;}
+	.sc-user-select__user footer {height:36px;padding-top:5px;border-top: 1px solid var(--el-border-color-light);}
+
+	.sc-user-select__toicon {display: flex;justify-content: center;align-items: center;margin:0 10px;}
+	.sc-user-select__toicon i {display: flex;justify-content: center;align-items: center;background: #ccc;width: 20px;height: 20px;text-align: center;line-height: 20px;border-radius:50%;color: #fff;}
+
+	.sc-user-select__selected {height:345px;width: 200px;border: 1px solid var(--el-border-color-light);background: var(--el-color-white);}
+	.sc-user-select__selected header {height:43px;line-height: 43px;border-bottom: 1px solid var(--el-border-color-light);padding:0 15px;font-size: 12px;}
+	.sc-user-select__selected ul {height:300px;overflow: auto;}
+	.sc-user-select__selected li {display: flex;align-items: center;justify-content: space-between;padding:5px 5px 5px 15px;height:38px;}
+	.sc-user-select__selected li .name {display: flex;align-items: center;}
+	.sc-user-select__selected li .name .el-avatar {background: #409eff;margin-right: 10px;}
+	.sc-user-select__selected li .name label {}
+	.sc-user-select__selected li .delete {display: none;}
+	.sc-user-select__selected li:hover {background: var(--el-color-primary-light-9);}
+	.sc-user-select__selected li:hover .delete {display: inline-block;}
+
+	.sc-user-select-role .sc-user-select__left {width: 200px;}
+	.sc-user-select-role .sc-user-select__tree {border: none;height: 343px;}
+	.sc-user-select-role .sc-user-select__selected {}
+
+	[data-theme='dark'] .sc-user-select__selected li:hover {background: rgba(0, 0, 0, 0.2);}
+	[data-theme='dark'] .sc-user-select__toicon i {background: #383838;}
+</style>
diff --git a/ui/src/config/fileSelect.js b/ui/src/config/fileSelect.js
new file mode 100644
index 0000000..f3e3142
--- /dev/null
+++ b/ui/src/config/fileSelect.js
@@ -0,0 +1,69 @@
+import API from "@/api";
+
+//文件选择器配置
+
+export default {
+	apiObj: API.common.upload,
+	menuApiObj: API.common.file.menu,
+	listApiObj: API.common.file.list,
+	successCode: 200,
+	maxSize: 30,
+	max: 99,
+	uploadParseData: function (res) {
+		return {
+			id: res.data.id,
+			fileName: res.data.fileName,
+			url: res.data.src
+		}
+	},
+	listParseData: function (res) {
+		return {
+			rows: res.data.rows,
+			total: res.data.total,
+			msg: res.message,
+			code: res.code
+		}
+	},
+	request: {
+		page: 'page',
+		pageSize: 'pageSize',
+		keyword: 'keyword',
+		menuKey: 'groupId'
+	},
+	menuProps: {
+		key: 'id',
+		label: 'label',
+		children: 'children'
+	},
+	fileProps: {
+		key: 'id',
+		fileName: 'fileName',
+		url: 'url'
+	},
+	files: {
+		doc: {
+			icon: 'sc-icon-file-word-2-fill',
+			color: '#409eff'
+		},
+		docx: {
+			icon: 'sc-icon-file-word-2-fill',
+			color: '#409eff'
+		},
+		xls: {
+			icon: 'sc-icon-file-excel-2-fill',
+			color: '#67C23A'
+		},
+		xlsx: {
+			icon: 'sc-icon-file-excel-2-fill',
+			color: '#67C23A'
+		},
+		ppt: {
+			icon: 'sc-icon-file-ppt-2-fill',
+			color: '#F56C6C'
+		},
+		pptx: {
+			icon: 'sc-icon-file-ppt-2-fill',
+			color: '#F56C6C'
+		}
+	}
+}
diff --git a/ui/src/config/filterBar.js b/ui/src/config/filterBar.js
new file mode 100644
index 0000000..15ed840
--- /dev/null
+++ b/ui/src/config/filterBar.js
@@ -0,0 +1,74 @@
+export default {
+	//运算符
+	operator: [
+		{
+			label: '等于',
+			value: '=',
+		},
+		{
+			label: '不等于',
+			value: '!=',
+		},
+		{
+			label: '大于',
+			value: '>',
+		},
+		{
+			label: '大于等于',
+			value: '>=',
+		},
+		{
+			label: '小于',
+			value: '<',
+		},
+		{
+			label: '小于等于',
+			value: '<=',
+		},
+		{
+			label: '包含',
+			value: 'include',
+		},
+		{
+			label: '不包含',
+			value: 'notinclude',
+		}
+	],
+	//过滤结果运算符的分隔符
+	separator: '|',
+	//获取我的常用
+	getMy: function (name) {
+		return new Promise((resolve) => {
+			console.log(`这里可以根据${name}参数请求接口`)
+			var list = []
+			setTimeout(()=>{
+				resolve(list)
+			},500)
+		})
+	},
+	/**
+	 * 常用保存处理 返回resolve后继续操作
+	 * @name scFilterBar组件的props->filterName
+	 * @obj 过滤项整理好的对象
+	 */
+	saveMy: function (name, obj) {
+		return new Promise((resolve) => {
+			console.log(name, obj)
+			setTimeout(()=>{
+				resolve(true)
+			},500)
+		})
+	},
+	/**
+	 * 常用删除处理 返回resolve后继续操作
+	 * @name scFilterBar组件的props->filterName
+	 */
+	delMy: function (name) {
+		return new Promise((resolve) => {
+			console.log(name)
+			setTimeout(()=>{
+				resolve(true)
+			},500)
+		})
+	}
+}
diff --git a/ui/src/config/iconSelect.js b/ui/src/config/iconSelect.js
new file mode 100644
index 0000000..b948cb5
--- /dev/null
+++ b/ui/src/config/iconSelect.js
@@ -0,0 +1,302 @@
+//图标选择器配置
+export default {
+	icons: [{
+			name: '默认',
+			icons: [
+				"el-icon-aim",
+				"el-icon-add-location",
+				"el-icon-apple",
+				"el-icon-alarm-clock",
+				"el-icon-arrow-down",
+				"el-icon-arrow-down-bold",
+				"el-icon-arrow-left",
+				"el-icon-arrow-left-bold",
+				"el-icon-arrow-right-bold",
+				"el-icon-arrow-up",
+				"el-icon-back",
+				"el-icon-bell",
+				"el-icon-baseball",
+				"el-icon-bicycle",
+				"el-icon-bell-filled",
+				"el-icon-basketball",
+				"el-icon-bottom",
+				"el-icon-box",
+				"el-icon-briefcase",
+				"el-icon-brush-filled",
+				"el-icon-bowl",
+				"el-icon-avatar",
+				"el-icon-brush",
+				"el-icon-burger",
+				"el-icon-camera",
+				"el-icon-bottom-left",
+				"el-icon-calendar",
+				"el-icon-caret-bottom",
+				"el-icon-caret-left",
+				"el-icon-caret-right",
+				"el-icon-caret-top",
+				"el-icon-chat-dot-square",
+				"el-icon-cellphone",
+				"el-icon-chat-dot-round",
+				"el-icon-chat-line-square",
+				"el-icon-chat-line-round",
+				"el-icon-chat-round",
+				"el-icon-check",
+				"el-icon-chat-square",
+				"el-icon-cherry",
+				"el-icon-chicken",
+				"el-icon-circle-check-filled",
+				"el-icon-circle-check",
+				"el-icon-checked",
+				"el-icon-circle-close-filled",
+				"el-icon-circle-close",
+				"el-icon-arrow-right",
+				"el-icon-circle-plus",
+				"el-icon-clock",
+				"el-icon-close-bold",
+				"el-icon-close",
+				"el-icon-cloudy",
+				"el-icon-circle-plus-filled",
+				"el-icon-coffee-cup",
+				"el-icon-cold-drink",
+				"el-icon-coin",
+				"el-icon-arrow-up-bold",
+				"el-icon-collection-tag",
+				"el-icon-bottom-right",
+				"el-icon-coffee",
+				"el-icon-camera-filled",
+				"el-icon-collection",
+				"el-icon-cpu",
+				"el-icon-crop",
+				"el-icon-coordinate",
+				"el-icon-d-arrow-left",
+				"el-icon-compass",
+				"el-icon-connection",
+				"el-icon-credit-card",
+				"el-icon-data-board",
+				"el-icon-d-arrow-right",
+				"el-icon-dessert",
+				"el-icon-delete-location",
+				"el-icon-d-caret",
+				"el-icon-delete",
+				"el-icon-dish",
+				"el-icon-dish-dot",
+				"el-icon-document-copy",
+				"el-icon-discount",
+				"el-icon-document-checked",
+				"el-icon-document-add",
+				"el-icon-document-remove",
+				"el-icon-data-analysis",
+				"el-icon-delete-filled",
+				"el-icon-download",
+				"el-icon-drizzling",
+				"el-icon-eleme",
+				"el-icon-eleme-filled",
+				"el-icon-edit",
+				"el-icon-failed",
+				"el-icon-expand",
+				"el-icon-female",
+				"el-icon-document",
+				"el-icon-film",
+				"el-icon-finished",
+				"el-icon-data-line",
+				"el-icon-filter",
+				"el-icon-flag",
+				"el-icon-folder-checked",
+				"el-icon-first-aid-kit",
+				"el-icon-folder-add",
+				"el-icon-fold",
+				"el-icon-folder-delete",
+				"el-icon-document-delete",
+				"el-icon-folder",
+				"el-icon-food",
+				"el-icon-folder-opened",
+				"el-icon-football",
+				"el-icon-folder-remove",
+				"el-icon-fries",
+				"el-icon-full-screen",
+				"el-icon-fork-spoon",
+				"el-icon-goblet",
+				"el-icon-goblet-full",
+				"el-icon-goods",
+				"el-icon-goblet-square-full",
+				"el-icon-goods-filled",
+				"el-icon-grid",
+				"el-icon-grape",
+				"el-icon-goblet-square",
+				"el-icon-headset",
+				"el-icon-comment",
+				"el-icon-help-filled",
+				"el-icon-histogram",
+				"el-icon-home-filled",
+				"el-icon-help",
+				"el-icon-house",
+				"el-icon-ice-cream-round",
+				"el-icon-hot-water",
+				"el-icon-ice-cream",
+				"el-icon-files",
+				"el-icon-ice-cream-square",
+				"el-icon-key",
+				"el-icon-ice-tea",
+				"el-icon-knife-fork",
+				"el-icon-iphone",
+				"el-icon-info-filled",
+				"el-icon-link",
+				"el-icon-ice-drink",
+				"el-icon-lightning",
+				"el-icon-loading",
+				"el-icon-lollipop",
+				"el-icon-location-information",
+				"el-icon-lock",
+				"el-icon-location-filled",
+				"el-icon-magnet",
+				"el-icon-male",
+				"el-icon-location",
+				"el-icon-menu",
+				"el-icon-magic-stick",
+				"el-icon-message-box",
+				"el-icon-map-location",
+				"el-icon-mic",
+				"el-icon-message",
+				"el-icon-medal",
+				"el-icon-milk-tea",
+				"el-icon-microphone",
+				"el-icon-minus",
+				"el-icon-money",
+				"el-icon-moon-night",
+				"el-icon-monitor",
+				"el-icon-moon",
+				"el-icon-more",
+				"el-icon-mostly-cloudy",
+				"el-icon-more-filled",
+				"el-icon-mouse",
+				"el-icon-mug",
+				"el-icon-mute",
+				"el-icon-no-smoking",
+				"el-icon-mute-notification",
+				"el-icon-notification",
+				"el-icon-notebook",
+				"el-icon-odometer",
+				"el-icon-office-building",
+				"el-icon-operation",
+				"el-icon-opportunity",
+				"el-icon-orange",
+				"el-icon-open",
+				"el-icon-paperclip",
+				"el-icon-pear",
+				"el-icon-partly-cloudy",
+				"el-icon-phone",
+				"el-icon-picture-filled",
+				"el-icon-phone-filled",
+				"el-icon-picture-rounded",
+				"el-icon-guide",
+				"el-icon-place",
+				"el-icon-platform",
+				"el-icon-pie-chart",
+				"el-icon-pointer",
+				"el-icon-plus",
+				"el-icon-position",
+				"el-icon-postcard",
+				"el-icon-present",
+				"el-icon-price-tag",
+				"el-icon-promotion",
+				"el-icon-pouring",
+				"el-icon-reading-lamp",
+				"el-icon-question-filled",
+				"el-icon-printer",
+				"el-icon-picture",
+				"el-icon-refresh-right",
+				"el-icon-reading",
+				"el-icon-refresh-left",
+				"el-icon-refresh",
+				"el-icon-refrigerator",
+				"el-icon-remove-filled",
+				"el-icon-right",
+				"el-icon-scale-to-original",
+				"el-icon-school",
+				"el-icon-remove",
+				"el-icon-scissor",
+				"el-icon-select",
+				"el-icon-management",
+				"el-icon-search",
+				"el-icon-sell",
+				"el-icon-semi-select",
+				"el-icon-share",
+				"el-icon-setting",
+				"el-icon-service",
+				"el-icon-ship",
+				"el-icon-set-up",
+				"el-icon-shopping-bag",
+				"el-icon-shop",
+				"el-icon-shopping-cart",
+				"el-icon-shopping-cart-full",
+				"el-icon-soccer",
+				"el-icon-sold-out",
+				"el-icon-smoking",
+				"el-icon-sort-down",
+				"el-icon-sort",
+				"el-icon-sort-up",
+				"el-icon-star",
+				"el-icon-stamp",
+				"el-icon-star-filled",
+				"el-icon-stopwatch",
+				"el-icon-success-filled",
+				"el-icon-suitcase",
+				"el-icon-sugar",
+				"el-icon-sunny",
+				"el-icon-sunrise",
+				"el-icon-switch",
+				"el-icon-ticket",
+				"el-icon-sunset",
+				"el-icon-tickets",
+				"el-icon-switch-button",
+				"el-icon-takeaway-box",
+				"el-icon-toilet-paper",
+				"el-icon-timer",
+				"el-icon-tools",
+				"el-icon-top-left",
+				"el-icon-top",
+				"el-icon-top-right",
+				"el-icon-trend-charts",
+				"el-icon-turn-off",
+				"el-icon-unlock",
+				"el-icon-trophy",
+				"el-icon-umbrella",
+				"el-icon-upload-filled",
+				"el-icon-user-filled",
+				"el-icon-upload",
+				"el-icon-user",
+				"el-icon-van",
+				"el-icon-copy-document",
+				"el-icon-video-pause",
+				"el-icon-video-camera-filled",
+				"el-icon-view",
+				"el-icon-wallet",
+				"el-icon-warning-filled",
+				"el-icon-watch",
+				"el-icon-video-play",
+				"el-icon-watermelon",
+				"el-icon-video-camera",
+				"el-icon-wallet-filled",
+				"el-icon-warning",
+				"el-icon-list",
+				"el-icon-zoom-in",
+				"el-icon-zoom-out",
+				"el-icon-rank",
+				"el-icon-wind-power"
+			]
+		},
+		{
+			name: '扩展',
+			icons: [
+				'sc-icon-vue',
+				'sc-icon-code',
+				'sc-icon-wechat',
+				'sc-icon-bug-fill',
+				'sc-icon-bug-line',
+				'sc-icon-file-word',
+				'sc-icon-file-excel',
+				'sc-icon-file-ppt'
+			]
+		}
+	]
+}
diff --git a/ui/src/config/index.js b/ui/src/config/index.js
new file mode 100644
index 0000000..b41222c
--- /dev/null
+++ b/ui/src/config/index.js
@@ -0,0 +1,70 @@
+const DEFAULT_CONFIG = {
+	//标题
+	APP_NAME: "SCUI",
+
+	//首页地址
+	DASHBOARD_URL: "/dashboard",
+
+	//版本号
+	APP_VER: "1.5.0",
+
+	//内核版本号
+	CORE_VER: "1.5.0",
+
+	//接口地址
+	API_URL: "/api",
+
+	//请求超时
+	TIMEOUT: 10000,
+
+	//TokenName
+	TOKEN_NAME: "Authorization",
+
+	//Token前缀，注意最后有个空格，如不需要需设置空字符串
+	TOKEN_PREFIX: "Bearer ",
+
+	//追加其他头
+	HEADERS: {},
+
+	//请求是否开启缓存
+	REQUEST_CACHE: false,
+
+	//布局 默认：default | 通栏：header | 经典：menu | 功能坞：dock
+	//dock将关闭标签和面包屑栏
+	LAYOUT: 'default',
+
+	//菜单是否折叠
+	MENU_IS_COLLAPSE: false,
+
+	//菜单是否启用手风琴效果
+	MENU_UNIQUE_OPENED: false,
+
+	//是否开启多标签
+	LAYOUT_TAGS: true,
+
+	//语言
+	LANG: 'zh-cn',
+
+	//主题颜色
+	COLOR: '',
+
+	//控制台首页默认布局
+	DEFAULT_GRID: {
+		//默认分栏数量和宽度 例如 [24] [18,6] [8,8,8] [6,12,6]
+		layout: [12, 6, 6],
+		//小组件分布，com取值:views/home/components 文件名
+		copmsList: [
+			['welcome'],
+			['about', 'ver'],
+			['time', 'progress']
+		]
+	}
+}
+
+// 如果生产模式，就合并动态的APP_CONFIG
+// public/config.js
+if(process.env.NODE_ENV === 'production'){
+	Object.assign(DEFAULT_CONFIG, APP_CONFIG)
+}
+
+module.exports = DEFAULT_CONFIG
diff --git a/ui/src/config/route.js b/ui/src/config/route.js
new file mode 100644
index 0000000..8084d85
--- /dev/null
+++ b/ui/src/config/route.js
@@ -0,0 +1,31 @@
+// 静态路由配置
+// 书写格式与动态路由格式一致，全部经由框架统一转换
+// 比较动态路由在meta中多加入了role角色权限，为数组类型。一个菜单是否有权限显示，取决于它以及后代菜单是否有权限。
+// routes 显示在左侧菜单中的路由(显示顺序在动态路由之前)
+// 示例如下
+
+// const routes = [
+// 	{
+// 		name: "demo",
+// 		path: "/demo",
+// 		meta: {
+// 			icon: "el-icon-eleme-filled",
+// 			title: "演示",
+// 			role: ["SA"]
+// 		},
+// 		children: [{
+// 			name: "demopage",
+// 			path: "/demopage",
+// 			component: "test/autocode/index",
+// 			meta: {
+// 				icon: "el-icon-menu",
+// 				title: "演示页面",
+// 				role: ["SA"]
+// 			}
+// 		}]
+// 	}
+// ]
+
+const routes = []
+
+export default routes;
diff --git a/ui/src/config/select.js b/ui/src/config/select.js
new file mode 100644
index 0000000..ce71587
--- /dev/null
+++ b/ui/src/config/select.js
@@ -0,0 +1,21 @@
+import API from "@/api";
+
+//字典选择器配置
+
+export default {
+	dicApiObj: API.system.dic.get,		//获取字典接口对象
+	parseData: function (res) {
+		return {
+			data: res.data,				//分析行数据字段结构
+			msg: res.message,			//分析描述字段结构
+			code: res.code				//分析状态字段结构
+		}
+	},
+	request: {
+		name: 'name'					//规定搜索字段
+	},
+	props: {
+		label: 'label',					//映射label显示字段
+		value: 'value',					//映射value值字段
+	}
+}
diff --git a/ui/src/config/table.js b/ui/src/config/table.js
new file mode 100644
index 0000000..609af9b
--- /dev/null
+++ b/ui/src/config/table.js
@@ -0,0 +1,68 @@
+//数据表格配置
+
+import tool from '@/utils/tool'
+
+export default {
+	successCode: 200,					//请求完成代码
+	pageSize: 20,						//表格每一页条数
+	parseData: function (res) {			//数据分析
+		return {
+			data: res.data,				//分析无分页的数据字段结构
+			rows: res.data.rows,		//分析行数据字段结构
+			total: res.data.total,		//分析总数字段结构
+			summary: res.data.summary,	//分析合计行字段结构
+			msg: res.message,			//分析描述字段结构
+			code: res.code				//分析状态字段结构
+		}
+	},
+	request: {							//请求规定字段
+		page: 'page',					//规定当前分页字段
+		pageSize: 'pageSize',			//规定一页条数字段
+		prop: 'prop',					//规定排序字段名字段
+		order: 'order'					//规定排序规格字段
+	},
+	/**
+	 * 自定义列保存处理
+	 * @tableName scTable组件的props->tableName
+	 * @column 用户配置好的列
+	 */
+	columnSettingSave: function (tableName, column) {
+		return new Promise((resolve) => {
+			setTimeout(()=>{
+				//这里为了演示使用了session和setTimeout演示，开发时应用数据请求
+				tool.session.set(tableName, column)
+				resolve(true)
+			},1000)
+		})
+	},
+	/**
+	 * 获取自定义列
+	 * @tableName scTable组件的props->tableName
+	 * @column 组件接受到的props->column
+	 */
+	columnSettingGet: function (tableName, column) {
+		return new Promise((resolve) => {
+			//这里为了演示使用了session和setTimeout演示，开发时应用数据请求
+			const userColumn = tool.session.get(tableName)
+			if(userColumn){
+				resolve(userColumn)
+			}else{
+				resolve(column)
+			}
+		})
+	},
+	/**
+	 * 重置自定义列
+	 * @tableName scTable组件的props->tableName
+	 * @column 组件接受到的props->column
+	 */
+	columnSettingReset: function (tableName, column) {
+		return new Promise((resolve) => {
+			//这里为了演示使用了session和setTimeout演示，开发时应用数据请求
+			setTimeout(()=>{
+				tool.session.remove(tableName)
+				resolve(column)
+			},1000)
+		})
+	}
+}
diff --git a/ui/src/config/tableSelect.js b/ui/src/config/tableSelect.js
new file mode 100644
index 0000000..6661a67
--- /dev/null
+++ b/ui/src/config/tableSelect.js
@@ -0,0 +1,23 @@
+//表格选择器配置
+
+export default {
+	pageSize: 20,						//表格每一页条数
+	parseData: function (res) {
+		return {
+			data: res.data,
+			rows: res.data.rows,		//分析行数据字段结构
+			total: res.data.total,		//分析总数字段结构
+			msg: res.message,			//分析描述字段结构
+			code: res.code				//分析状态字段结构
+		}
+	},
+	request: {
+		page: 'page',					//规定当前分页字段
+		pageSize: 'pageSize',			//规定一页条数字段
+		keyword: 'keyword'				//规定搜索字段
+	},
+	props: {
+		label: 'label',					//映射label显示字段
+		value: 'value',					//映射value值字段
+	}
+}
diff --git a/ui/src/config/upload.js b/ui/src/config/upload.js
new file mode 100644
index 0000000..0ac0c7c
--- /dev/null
+++ b/ui/src/config/upload.js
@@ -0,0 +1,16 @@
+import API from "@/api";
+
+//上传配置
+
+export default {
+	apiObj: API.common.upload,			//上传请求API对象
+	successCode: 200,					//请求完成代码
+	maxSize: 10,						//最大文件大小 默认10MB
+	parseData: function (res) {
+		return {
+			code: res.code,				//分析状态字段结构
+			src: res.data.src,			//分析图片远程地址结构
+			msg: res.message			//分析描述字段结构
+		}
+	}
+}
diff --git a/ui/src/config/workflow.js b/ui/src/config/workflow.js
new file mode 100644
index 0000000..ceb1305
--- /dev/null
+++ b/ui/src/config/workflow.js
@@ -0,0 +1,69 @@
+import API from "@/api";
+
+//审批工作流人员/组织选择器配置
+
+export default {
+	//配置接口正常返回代码
+	successCode: 200,
+	//配置组织
+	group: {
+		//请求接口对象
+		apiObj: API.system.role.list,
+		//接受数据字段映射
+		parseData: function (res) {
+			return {
+				rows: res.data,
+				msg: res.message,
+				code: res.code
+			}
+		},
+		//显示数据字段映射
+		props: {
+			key: 'id',
+			label: 'label',
+			children: 'children'
+		}
+	},
+	//配置用户
+	user: {
+		apiObj: API.demo.page,
+		pageSize: 20,
+		parseData: function (res) {
+			return {
+				rows: res.data.rows,
+				total: res.data.total,
+				msg: res.message,
+				code: res.code
+			}
+		},
+		props: {
+			key: 'id',
+			label: 'user',
+		},
+		request: {
+			page: 'page',
+			pageSize: 'pageSize',
+			groupId: 'groupId',
+			keyword: 'keyword'
+		}
+	},
+	//配置角色
+	role: {
+		//请求接口对象
+		apiObj: API.system.role.list,
+		//接受数据字段映射
+		parseData: function (res) {
+			return {
+				rows: res.data,
+				msg: res.message,
+				code: res.code
+			}
+		},
+		//显示数据字段映射
+		props: {
+			key: 'id',
+			label: 'label',
+			children: 'children'
+		}
+	}
+}
diff --git a/ui/src/directives/auth.js b/ui/src/directives/auth.js
new file mode 100644
index 0000000..75d74be
--- /dev/null
+++ b/ui/src/directives/auth.js
@@ -0,0 +1,22 @@
+import { permission } from '@/utils/permission'
+
+export default {
+	mounted(el, binding) {
+		const { value } = binding
+		if(Array.isArray(value)){
+			let ishas = false;
+			value.forEach(item => {
+				if(permission(item)){
+					ishas = true;
+				}
+			})
+			if (!ishas){
+				el.parentNode.removeChild(el)
+			}
+		}else{
+			if(!permission(value)){
+				el.parentNode.removeChild(el);
+			}
+		}
+	}
+};
diff --git a/ui/src/directives/copy.js b/ui/src/directives/copy.js
new file mode 100644
index 0000000..0efecbe
--- /dev/null
+++ b/ui/src/directives/copy.js
@@ -0,0 +1,29 @@
+import { ElMessage } from 'element-plus'
+
+export default {
+	mounted(el, binding) {
+		el.$value = binding.value
+		el.handler = () => {
+			const textarea = document.createElement('textarea')
+			textarea.readOnly = 'readonly'
+			textarea.style.position = 'absolute'
+			textarea.style.left = '-9999px'
+			textarea.value = el.$value
+			document.body.appendChild(textarea)
+			textarea.select()
+			textarea.setSelectionRange(0, textarea.value.length)
+			const result = document.execCommand('Copy')
+			if (result) {
+				ElMessage.success("复制成功")
+			}
+			document.body.removeChild(textarea)
+		}
+		el.addEventListener('click', el.handler)
+	},
+	updated(el, binding){
+		el.$value = binding.value
+	},
+	unmounted(el){
+		el.removeEventListener('click', el.handler)
+	}
+}
diff --git a/ui/src/directives/role.js b/ui/src/directives/role.js
new file mode 100644
index 0000000..42655b0
--- /dev/null
+++ b/ui/src/directives/role.js
@@ -0,0 +1,22 @@
+import { rolePermission } from '@/utils/permission'
+
+export default {
+	mounted(el, binding) {
+		const { value } = binding
+		if(Array.isArray(value)){
+			let ishas = false;
+			value.forEach(item => {
+				if(rolePermission(item)){
+					ishas = true;
+				}
+			})
+			if (!ishas){
+				el.parentNode.removeChild(el)
+			}
+		}else{
+			if(!rolePermission(value)){
+				el.parentNode.removeChild(el);
+			}
+		}
+	}
+};
diff --git a/ui/src/directives/time.js b/ui/src/directives/time.js
new file mode 100644
index 0000000..ed9b6b9
--- /dev/null
+++ b/ui/src/directives/time.js
@@ -0,0 +1,78 @@
+import tool from '@/utils/tool'
+
+var Time = {
+	//获取当前时间戳
+	getUnix: function() {
+		var date = new Date();
+		return date.getTime();
+	},
+	//获取今天0点0分0秒的时间戳
+	getTodayUnix: function() {
+		var date = new Date();
+		date.setHours(0);
+		date.setMinutes(0);
+		date.setSeconds(0);
+		date.setMilliseconds(0);
+		return date.getTime();
+	},
+	//获取今年1月1日0点0秒的时间戳
+	getYearUnix: function() {
+		var date = new Date();
+		date.setMonth(0);
+		date.setDate(1);
+		date.setHours(0);
+		date.setMinutes(0);
+		date.setSeconds(0);
+		date.setMilliseconds(0);
+		return date.getTime();
+	},
+	//获取标准年月日
+	getLastDate: function(time) {
+		var date = new Date(time);
+		var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
+		var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+		return date.getFullYear() + '-' + month + '-' + day;
+	},
+	//转换时间
+	getFormateTime: function(timestamp) {
+		timestamp = new Date(timestamp)
+		var now = this.getUnix();
+		var today = this.getTodayUnix();
+		//var year = this.getYearUnix();
+		var timer = (now - timestamp) / 1000;
+		var tip = '';
+
+		if (timer <= 0) {
+			tip = '刚刚';
+		} else if (Math.floor(timer / 60) <= 0) {
+			tip = '刚刚';
+		} else if (timer < 3600) {
+			tip = Math.floor(timer / 60) + '分钟前';
+		} else if (timer >= 3600 && (timestamp - today >= 0)) {
+			tip = Math.floor(timer / 3600) + '小时前';
+		} else if (timer / 86400 <= 31) {
+			tip = Math.ceil(timer / 86400) + '天前';
+		} else {
+			tip = this.getLastDate(timestamp);
+		}
+		return tip;
+	}
+}
+
+export default {
+	mounted(el, binding) {
+		let { value, modifiers} = binding
+		if(value.toString().length == 10){
+			value = value * 1000
+		}
+		if (modifiers.tip) {
+			el.innerHTML = Time.getFormateTime(value)
+			el.__timeout__ = setInterval(() => {
+				el.innerHTML = Time.getFormateTime(value)
+			}, 60000)
+		} else {
+			const format = el.getAttribute('format') || undefined
+			el.innerHTML = tool.dateFormat(value, format)
+		}
+	}
+};
diff --git a/ui/src/layout/components/NavMenu.vue b/ui/src/layout/components/NavMenu.vue
new file mode 100644
index 0000000..0bc22ba
--- /dev/null
+++ b/ui/src/layout/components/NavMenu.vue
@@ -0,0 +1,36 @@
+<template>
+	<div v-if="navMenus.length<=0" style="padding:20px;">
+		<el-alert title="无子集菜单" center type="info" :closable="false"></el-alert>
+	</div>
+	<template v-for="navMenu in navMenus" v-bind:key="navMenu">
+		<el-menu-item v-if="!hasChildren(navMenu)" :index="navMenu.path">
+			<a v-if="navMenu.meta&&navMenu.meta.type=='link'" :href="navMenu.path" target="_blank" @click.stop='()=>{}'></a>
+			<el-icon v-if="navMenu.meta&&navMenu.meta.icon"><component :is="navMenu.meta.icon || 'el-icon-menu'"/></el-icon>
+			<template #title>
+				<span>{{navMenu.meta.title}}</span>
+			</template>
+		</el-menu-item>
+		<el-sub-menu v-else :index="navMenu.path">
+			<template #title>
+				<el-icon v-if="navMenu.meta&&navMenu.meta.icon"><component :is="navMenu.meta.icon || 'el-icon-menu'"/></el-icon>
+				<span>{{navMenu.meta.title}}</span>
+			</template>
+			<NavMenu :navMenus="navMenu.children"></NavMenu>
+		</el-sub-menu>
+	</template>
+</template>
+
+<script>
+	export default {
+		name: 'NavMenu',
+		props: ['navMenus'],
+		data() {
+			return {}
+		},
+		methods: {
+			hasChildren(item) {
+				return item.children && !item.children.every(item => item.meta.hidden)
+			}
+		}
+	}
+</script>
diff --git a/ui/src/layout/components/iframeView.vue b/ui/src/layout/components/iframeView.vue
new file mode 100644
index 0000000..3e64d54
--- /dev/null
+++ b/ui/src/layout/components/iframeView.vue
@@ -0,0 +1,66 @@
+<!--
+ * @Descripttion: 处理iframe持久化，涉及store(VUEX)
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年6月30日13:20:41
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<div v-show="$route.meta.type=='iframe'" class="iframe-pages">
+		<iframe v-for="item in iframeList" :key="item.meta.url" v-show="$route.meta.url==item.meta.url" :src="item.meta.url" frameborder='0'></iframe>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		watch: {
+			$route(e) {
+				this.push(e)
+			},
+		},
+		created() {
+			this.push(this.$route);
+		},
+		computed:{
+			iframeList(){
+				return this.$store.state.iframe.iframeList
+			},
+			ismobile(){
+				return this.$store.state.global.ismobile
+			},
+			layoutTags(){
+				return this.$store.state.global.layoutTags
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			push(route){
+				if(route.meta.type == 'iframe'){
+					if(this.ismobile || !this.layoutTags){
+						this.$store.commit("setIframeList", route)
+					}else{
+						this.$store.commit("pushIframeList", route)
+					}
+				}else{
+					if(this.ismobile || !this.layoutTags){
+						this.$store.commit("clearIframeList")
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.iframe-pages {width:100%;height:100%;background: #fff;}
+	iframe {border:0;width:100%;height:100%;display: block;}
+</style>
diff --git a/ui/src/layout/components/setting.vue b/ui/src/layout/components/setting.vue
new file mode 100644
index 0000000..18f6cb5
--- /dev/null
+++ b/ui/src/layout/components/setting.vue
@@ -0,0 +1,84 @@
+<template>
+	<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
+		<el-alert title="以下配置可实时预览，开发者可在 config/index.js 中配置默认值，非常不建议在生产环境下开放布局设置" type="error" :closable="false"></el-alert>
+		<el-divider></el-divider>
+		<el-form-item :label="$t('user.nightmode')">
+			<el-switch v-model="theme" active-value="dark" inactive-value="default"></el-switch>
+		</el-form-item>
+		<el-form-item :label="$t('user.language')">
+			<el-select v-model="lang">
+				<el-option label="简体中文" value="zh-cn"></el-option>
+				<el-option label="English" value="en"></el-option>
+				<el-option label="日本語" value="ja"></el-option>
+			</el-select>
+		</el-form-item>
+		<el-divider></el-divider>
+		<el-form-item label="主题颜色">
+			<el-color-picker v-model="colorPrimary" :predefine="colorList">></el-color-picker>
+		</el-form-item>
+		<el-divider></el-divider>
+		<el-form-item label="框架布局">
+			<el-select v-model="layout" placeholder="请选择">
+				<el-option label="默认" value="default"></el-option>
+				<el-option label="通栏" value="header"></el-option>
+				<el-option label="经典" value="menu"></el-option>
+				<el-option label="功能坞" value="dock"></el-option>
+			</el-select>
+		</el-form-item>
+		<el-form-item label="折叠菜单">
+			<el-switch v-model="menuIsCollapse"></el-switch>
+		</el-form-item>
+		<el-form-item label="标签栏">
+			<el-switch v-model="layoutTags"></el-switch>
+		</el-form-item>
+		<el-divider></el-divider>
+	</el-form>
+</template>
+
+<script>
+	import colorTool from '@/utils/color'
+
+	export default {
+		data(){
+			return {
+				layout: this.$store.state.global.layout,
+				menuIsCollapse: this.$store.state.global.menuIsCollapse,
+				layoutTags: this.$store.state.global.layoutTags,
+				lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
+				theme: this.$TOOL.data.get('APP_THEME') || 'default',
+				colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
+				colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
+			}
+		},
+		watch: {
+			layout(val) {
+				this.$store.commit("SET_layout", val)
+			},
+			menuIsCollapse(){
+				this.$store.commit("TOGGLE_menuIsCollapse")
+			},
+			layoutTags(){
+				this.$store.commit("TOGGLE_layoutTags")
+			},
+			theme(val){
+				document.body.setAttribute('data-theme', val)
+				this.$TOOL.data.set("APP_THEME", val);
+			},
+			lang(val){
+				this.$i18n.locale = val
+				this.$TOOL.data.set("APP_LANG", val);
+			},
+			colorPrimary(val){
+				document.documentElement.style.setProperty('--el-color-primary', val);
+				for (let i = 1; i <= 9; i++) {
+					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
+				}
+				document.documentElement.style.setProperty(`--el-color-primary-darken-1`, colorTool.darken(val,0.1));
+				this.$TOOL.data.set("APP_COLOR", val);
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/layout/components/sideM.vue b/ui/src/layout/components/sideM.vue
new file mode 100644
index 0000000..9b1f975
--- /dev/null
+++ b/ui/src/layout/components/sideM.vue
@@ -0,0 +1,136 @@
+<template>
+	<div ref="" class="mobile-nav-button" @click="showMobileNav($event)" v-drag draggable="false"><el-icon><el-icon-menu /></el-icon></div>
+
+	<el-drawer ref="mobileNavBox" title="移动端菜单" :size="240" v-model="nav" direction="ltr" :with-header="false" destroy-on-close>
+		<el-container class="mobile-nav">
+			<el-header>
+				<div class="logo-bar"><img class="logo" src="img/logo.png"><span>{{ $CONFIG.APP_NAME }}</span></div>
+			</el-header>
+			<el-main>
+				<el-scrollbar>
+					<el-menu :default-active="$route.meta.active || $route.fullPath" @select="select" router background-color="#212d3d" text-color="#fff" active-text-color="#409EFF">
+						<NavMenu :navMenus="menu"></NavMenu>
+					</el-menu>
+				</el-scrollbar>
+			</el-main>
+		</el-container>
+	</el-drawer>
+
+</template>
+
+<script>
+	import NavMenu from './NavMenu.vue';
+
+	export default {
+		components: {
+			NavMenu
+		},
+		data() {
+			return {
+				nav: false,
+				menu: []
+			}
+		},
+		computed:{
+
+		},
+		created() {
+			var menu = this.$router.sc_getMenu()
+			this.menu = this.filterUrl(menu)
+		},
+
+		watch: {
+
+		},
+		methods: {
+			showMobileNav(e){
+				var isdrag = e.currentTarget.getAttribute('drag-flag')
+				if (isdrag == 'true') {
+					return false;
+				}else{
+					this.nav = true;
+				}
+
+			},
+			select(){
+				this.$refs.mobileNavBox.handleClose()
+			},
+			//转换外部链接的路由
+			filterUrl(map){
+				var newMap = []
+				map && map.forEach(item => {
+					item.meta = item.meta?item.meta:{};
+					//处理隐藏
+					if(item.meta.hidden){
+						return false
+					}
+					//处理http
+					if(item.meta.type=='iframe'){
+						item.path = `/i/${item.name}`;
+					}
+					//递归循环
+					if(item.children&&item.children.length > 0){
+						item.children = this.filterUrl(item.children);
+					}
+					newMap.push(item)
+				})
+				return newMap;
+			}
+		},
+		directives: {
+			drag(el){
+				let oDiv = el; //当前元素
+				let firstTime='',lastTime='';
+				//禁止选择网页上的文字
+				// document.onselectstart = function() {
+				// 	return false;
+				// };
+				oDiv.onmousedown = function(e){
+					//鼠标按下，计算当前元素距离可视区的距离
+					let disX = e.clientX - oDiv.offsetLeft;
+					let disY = e.clientY - oDiv.offsetTop;
+					document.onmousemove = function(e){
+						oDiv.setAttribute('drag-flag', true);
+						firstTime = new Date().getTime();
+						//通过事件委托，计算移动的距离
+						let l = e.clientX - disX;
+						let t = e.clientY - disY;
+
+						//移动当前元素
+
+						if(t > 0 && t < document.body.clientHeight - 50){
+							oDiv.style.top = t + "px";
+						}
+						if(l > 0 && l < document.body.clientWidth - 50){
+							oDiv.style.left = l + "px";
+						}
+
+
+					}
+					document.onmouseup = function(){
+						lastTime = new Date().getTime();
+						if( (lastTime - firstTime)>200 ){
+							oDiv.setAttribute('drag-flag', false);
+						}
+						document.onmousemove = null;
+						document.onmouseup = null;
+					};
+					//return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
+					return false;
+				};
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.mobile-nav-button {position: fixed;bottom:10px;left:10px;z-index: 10;width: 50px;height: 50px;background: #409EFF;box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 1);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
+	.mobile-nav-button i {color: #fff;font-size: 20px;}
+
+	.mobile-nav {background: #212d3d;}
+	.mobile-nav .el-header {background: transparent;border: 0;}
+	.mobile-nav .el-main {padding:0;}
+	.mobile-nav .logo-bar {display: flex;align-items: center;font-weight: bold;font-size: 20px;color: #fff;}
+	.mobile-nav .logo-bar img {width: 30px;margin-right: 10px;}
+	.mobile-nav .el-submenu__title:hover {background: #fff!important;}
+</style>
diff --git a/ui/src/layout/components/tags.vue b/ui/src/layout/components/tags.vue
new file mode 100644
index 0000000..b06e087
--- /dev/null
+++ b/ui/src/layout/components/tags.vue
@@ -0,0 +1,306 @@
+<template>
+	<div class="adminui-tags">
+		<el-tooltip v-model:visible="tipVisible" placement="bottom-end" effect="light">
+			<ul ref="tags">
+				<li v-for="tag in tagList" v-bind:key="tag" :class="[isActive(tag)?'active':'',tag.meta.affix?'affix':'' ]" @contextmenu.prevent="openContextMenu($event, tag)">
+					<router-link :to="tag">
+					<span>{{ tag.meta.title }}</span>
+					<el-icon v-if="!tag.meta.affix" @click.prevent.stop='closeSelectedTag(tag)'><el-icon-close/></el-icon>
+					</router-link>
+				</li>
+			</ul>
+			<template #content>
+				<div class="tags-tip">
+					<p>当前标签过多，可通过鼠标滚轴滚动</p>
+					<el-button size="small" type="primary" plain @click="hideTip">知道了</el-button>
+				</div>
+			</template>
+		</el-tooltip>
+	</div>
+
+	<transition name="el-zoom-in-top">
+		<ul v-if="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" id="contextmenu">
+			<li @click="refreshTab()"><el-icon><el-icon-refresh/></el-icon>刷新</li>
+			<hr>
+			<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''"><el-icon><el-icon-close/></el-icon>关闭标签</li>
+			<li @click="closeOtherTabs()"><el-icon><el-icon-folder-delete/></el-icon>关闭其他标签</li>
+			<hr>
+			<li @click="maximize()"><el-icon><el-icon-full-screen/></el-icon>最大化</li>
+			<li @click="openWindow()"><el-icon><el-icon-copy-document/></el-icon>在新的窗口中打开</li>
+		</ul>
+	</transition>
+</template>
+
+<script>
+	import Sortable from 'sortablejs'
+
+	export default {
+		name: "tags",
+		data() {
+			return {
+				contextMenuVisible: false,
+				contextMenuItem: null,
+				left: 0,
+				top: 0,
+				tagList: this.$store.state.viewTags.viewTags,
+				tipVisible: false,
+				tipDisplayed: false
+			}
+		},
+		props: {},
+		watch: {
+			$route(e) {
+				this.addViewTags(e);
+				//判断标签容器是否出现滚动条
+				this.$nextTick(() => {
+					const tags = this.$refs.tags
+					if(tags && tags.scrollWidth > tags.clientWidth){
+						//确保当前标签在可视范围内
+						let targetTag = tags.querySelector(".active")
+						targetTag.scrollIntoView()
+						//显示提示
+						if(!this.tipDisplayed){
+							this.tipVisible = true
+						}
+					}
+				})
+			},
+			contextMenuVisible(value) {
+				var _this = this;
+				var cm = function(e){
+					let sp = document.getElementById("contextmenu");
+					if(sp&&!sp.contains(e.target)){
+						_this.closeMenu()
+					}
+				}
+				if (value) {
+					document.body.addEventListener('click', e=>cm(e))
+				}else{
+					document.body.removeEventListener('click',  e=>cm(e))
+				}
+			}
+		},
+		created() {
+			var menu = this.$router.sc_getMenu()
+			var dashboardRoute = this.treeFind(menu, node => node.path==this.$CONFIG.DASHBOARD_URL)
+			if(dashboardRoute){
+				dashboardRoute.fullPath = dashboardRoute.path
+				this.addViewTags(dashboardRoute)
+				this.addViewTags(this.$route)
+			}
+		},
+		mounted() {
+			this.tagDrop();
+			this.scrollInit()
+		},
+		methods: {
+			//查找树
+			treeFind(tree, func){
+				for (const data of tree) {
+					if (func(data)) return data
+					if (data.children) {
+						const res = this.treeFind(data.children, func)
+						if (res) return res
+					}
+				}
+				return null
+			},
+			//标签拖拽排序
+			tagDrop(){
+				const target = this.$refs.tags
+				Sortable.create(target, {
+					draggable: 'li',
+					animation: 300
+				})
+			},
+			//增加tag
+			addViewTags(route) {
+				if(route.name && !route.meta.fullpage){
+					this.$store.commit("pushViewTags",route)
+					this.$store.commit("pushKeepLive",route.name)
+				}
+			},
+			//高亮tag
+			isActive(route) {
+				return route.fullPath === this.$route.fullPath
+			},
+			//关闭tag
+			closeSelectedTag(tag, autoPushLatestView=true) {
+				this.$store.commit("removeViewTags", tag)
+				this.$store.commit("removeIframeList", tag)
+				this.$store.commit("removeKeepLive", tag.name)
+				if (autoPushLatestView && this.isActive(tag)) {
+					const latestView = this.tagList.slice(-1)[0]
+					if (latestView) {
+						this.$router.push(latestView)
+					} else {
+						this.$router.push('/')
+					}
+				}
+			},
+			//tag右键
+			openContextMenu(e, tag){
+				this.contextMenuItem = tag;
+				this.contextMenuVisible = true;
+				this.left = e.clientX + 1;
+				this.top = e.clientY + 1;
+
+				//FIX 右键菜单边缘化位置处理
+				this.$nextTick(() => {
+					let sp = document.getElementById("contextmenu");
+					if(document.body.offsetWidth - e.clientX < sp.offsetWidth){
+						this.left = document.body.offsetWidth - sp.offsetWidth + 1;
+						this.top = e.clientY + 1;
+					}
+				})
+			},
+			//关闭右键菜单
+			closeMenu() {
+				this.contextMenuItem = null;
+				this.contextMenuVisible = false
+			},
+			//TAB 刷新
+			refreshTab(){
+				var nowTag = this.contextMenuItem;
+				this.contextMenuVisible = false
+				//判断是否当前路由，否的话跳转
+				if(this.$route.fullPath != nowTag.fullPath){
+					this.$router.push({
+						path: nowTag.fullPath,
+						query: nowTag.query
+					})
+				}
+				this.$store.commit("refreshIframe", nowTag)
+				var _this = this;
+				setTimeout(function() {
+					_this.$store.commit("removeKeepLive", nowTag.name)
+					_this.$store.commit("setRouteShow", false)
+					_this.$nextTick(() => {
+						_this.$store.commit("pushKeepLive",nowTag.name)
+						_this.$store.commit("setRouteShow", true)
+					})
+				}, 0);
+			},
+			//TAB 关闭
+			closeTabs(){
+				var nowTag = this.contextMenuItem;
+				if(!nowTag.meta.affix){
+					this.closeSelectedTag(nowTag)
+					this.contextMenuVisible = false
+				}
+			},
+			//TAB 关闭其他
+			closeOtherTabs(){
+				var nowTag = this.contextMenuItem;
+				//判断是否当前路由，否的话跳转
+				if(this.$route.fullPath != nowTag.fullPath){
+					this.$router.push({
+						path: nowTag.fullPath,
+						query: nowTag.query
+					})
+				}
+				var tags = [...this.tagList];
+				tags.forEach(tag => {
+					if(tag.meta&&tag.meta.affix || nowTag.fullPath==tag.fullPath){
+						return true
+					}else{
+						this.closeSelectedTag(tag, false)
+					}
+				})
+				this.contextMenuVisible = false
+			},
+			//TAB 最大化
+			maximize(){
+				var nowTag = this.contextMenuItem;
+				this.contextMenuVisible = false
+				//判断是否当前路由，否的话跳转
+				if(this.$route.fullPath != nowTag.fullPath){
+					this.$router.push({
+						path: nowTag.fullPath,
+						query: nowTag.query
+					})
+				}
+				document.getElementById('app').classList.add('main-maximize')
+			},
+			//新窗口打开
+			openWindow(){
+				var nowTag = this.contextMenuItem;
+				var url = nowTag.href || '/';
+				if(!nowTag.meta.affix){
+					this.closeSelectedTag(nowTag)
+				}
+				window.open(url);
+				this.contextMenuVisible = false
+			},
+			//横向滚动
+			scrollInit(){
+				const scrollDiv = this.$refs.tags;
+				scrollDiv.addEventListener('mousewheel', handler, false) || scrollDiv.addEventListener("DOMMouseScroll", handler, false)
+				function handler(event) {
+					const detail = event.wheelDelta || event.detail;
+					//火狐上滚键值-3 下滚键值3，其他内核上滚键值120 下滚键值-120
+					const moveForwardStep = 1;
+					const moveBackStep = -1;
+					let step = 0;
+					if (detail == 3 ||  detail < 0 && detail != -3) {
+						step = moveForwardStep * 50;
+					}else{
+						step = moveBackStep * 50;
+					}
+					scrollDiv.scrollLeft += step;
+				}
+			},
+			hideTip(){
+				this.tipVisible = false
+				this.tipDisplayed = true
+			}
+		}
+	}
+</script>
+
+<style>
+	.contextmenu {
+		position: fixed;
+		width: 200px;
+		margin:0;
+		border-radius: 0px;
+		background: #fff;
+		border: 1px solid #e4e7ed;
+		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+		z-index: 3000;
+		list-style-type: none;
+		padding: 10px 0;
+	}
+	.contextmenu hr {
+		margin:5px 0;
+		border: none;
+		height: 1px;
+		font-size: 0px;
+		background-color: #ebeef5;
+	}
+	.contextmenu li {
+		display: flex;
+		align-items: center;
+		margin:0;
+		cursor: pointer;
+		line-height: 30px;
+		padding: 0 17px;
+		color: #606266;
+	}
+	.contextmenu li i {
+		font-size: 14px;
+		margin-right: 10px;
+	}
+	.contextmenu li:hover {
+		background-color: #ecf5ff;
+		color: #66b1ff;
+	}
+	.contextmenu li.disabled {
+		cursor: not-allowed;
+		color: #bbb;
+		background: transparent;
+	}
+
+	.tags-tip {padding:5px;}
+	.tags-tip p {margin-bottom: 10px;}
+</style>
diff --git a/ui/src/layout/components/topbar.vue b/ui/src/layout/components/topbar.vue
new file mode 100644
index 0000000..7834bb4
--- /dev/null
+++ b/ui/src/layout/components/topbar.vue
@@ -0,0 +1,49 @@
+<template>
+	<div class="adminui-topbar">
+		<div class="left-panel">
+			<el-breadcrumb separator-icon="el-icon-arrow-right" class="hidden-sm-and-down">
+				<transition-group name="breadcrumb" mode="out-in">
+					<template v-for="item in breadList" :key="item.title" >
+						<el-breadcrumb-item v-if="item.path!='/' &&  !item.meta.hiddenBreadcrumb" :key="item.meta.title"><el-icon class="icon" v-if="item.meta.icon"><component :is="item.meta.icon" /></el-icon>{{item.meta.title}}</el-breadcrumb-item>
+					</template>
+				</transition-group>
+			</el-breadcrumb>
+		</div>
+		<div class="center-panel"></div>
+		<div class="right-panel">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				breadList: []
+			}
+		},
+		created() {
+			this.getBreadcrumb();
+		},
+		watch: {
+			$route() {
+				this.getBreadcrumb();
+			}
+		},
+		methods: {
+			getBreadcrumb(){
+				let matched = this.$route.meta.breadcrumb;
+				this.breadList = matched;
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-breadcrumb {margin-left: 15px;}
+	.el-breadcrumb .el-breadcrumb__inner .icon {font-size: 14px;margin-right: 5px;float: left;}
+	.breadcrumb-enter-active,.breadcrumb-leave-active {transition: all 0.3s;}
+	.breadcrumb-enter-from,.breadcrumb-leave-active {opacity: 0;transform: translateX(20px);}
+	.breadcrumb-leave-active {position: absolute;}
+</style>
diff --git a/ui/src/layout/components/userbar.vue b/ui/src/layout/components/userbar.vue
new file mode 100644
index 0000000..3b2fe17
--- /dev/null
+++ b/ui/src/layout/components/userbar.vue
@@ -0,0 +1,175 @@
+<template>
+	<div class="user-bar">
+		<div class="screen panel-item hidden-sm-and-down" @click="screen">
+			<el-icon><el-icon-full-screen /></el-icon>
+		</div>
+		<div class="msg panel-item" @click="showMsg">
+			<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
+				<el-icon><el-icon-chat-dot-round /></el-icon>
+			</el-badge>
+			<el-drawer title="新消息" v-model="msg" :size="400" append-to-body destroy-on-close>
+				<el-container>
+					<el-main class="nopadding">
+						<el-scrollbar>
+							<ul class="msg-list">
+								<li v-for="item in msgList" v-bind:key="item.id">
+									<a :href="item.link" target="_blank">
+										<div class="msg-list__icon">
+											<el-badge is-dot type="danger">
+												<el-avatar :size="40" :src="item.avatar"></el-avatar>
+											</el-badge>
+										</div>
+										<div class="msg-list__main">
+											<h2>{{item.title}}</h2>
+											<p>{{item.describe}}</p>
+										</div>
+										<div class="msg-list__time">
+											<p>{{item.time}}</p>
+										</div>
+									</a>
+								</li>
+								<el-empty v-if="msgList.length==0" description="暂无新消息" :image-size="100"></el-empty>
+							</ul>
+						</el-scrollbar>
+					</el-main>
+					<el-footer>
+						<el-button type="primary">消息中心</el-button>
+						<el-button @click="markRead">全部设为已读</el-button>
+					</el-footer>
+				</el-container>
+			</el-drawer>
+		</div>
+		<el-dropdown class="user panel-item" trigger="click" @command="handleUser">
+			<div class="user-avatar">
+				<el-avatar :size="30">{{ userNameF }}</el-avatar>
+				<label>{{ userName }}</label>
+				<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="uc">个人设置</el-dropdown-item>
+					<el-dropdown-item command="clearCache">清除缓存</el-dropdown-item>
+					<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+	</div>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				userName: "",
+				userNameF: "",
+				msg: false,
+				msgList: [
+					{
+						id: 1,
+						type: 'user',
+						avatar: "img/avatar.jpg",
+						title: "Skuya",
+						describe: "如果喜欢就点个星星支持一下哦",
+						link: "https://gitee.com/lolicode/scui",
+						time: "5分钟前"
+					},
+					{
+						id: 2,
+						type: 'user',
+						avatar: "img/avatar2.gif",
+						title: "Lolowan",
+						describe: "点进去Gitee获取最新开源版本",
+						link: "https://gitee.com/lolicode/scui",
+						time: "14分钟前"
+					},
+					{
+						id: 3,
+						type: 'system',
+						avatar: "img/logo.png",
+						title: "感谢登录SCUI Admin",
+						describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
+						link: "https://gitee.com/lolicode/scui",
+						time: "2020年7月24日"
+					}
+				]
+			}
+		},
+		created() {
+			var userInfo = this.$TOOL.data.get("USER_INFO");
+			this.userName = userInfo.userName;
+			this.userNameF = this.userName.substring(0,1);
+		},
+		methods: {
+			//个人信息
+			handleUser(command) {
+				if(command == "uc"){
+					this.$router.push({path: '/usercenter'});
+				}
+				if(command == "cmd"){
+					this.$router.push({path: '/cmd'});
+				}
+				if(command == "clearCache"){
+					this.$confirm('清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？','提示', {
+						type: 'info',
+					}).then(() => {
+						const loading = this.$loading()
+						this.$TOOL.data.clear()
+						this.$router.replace({path: '/login'})
+						setTimeout(()=>{
+							loading.close()
+							location.reload()
+						},1000)
+					}).catch(() => {
+						//取消
+					})
+				}
+				if(command == "outLogin"){
+					this.$confirm('确认是否退出当前用户？','提示', {
+						type: 'warning',
+						confirmButtonText: '退出',
+						confirmButtonClass: 'el-button--danger'
+					}).then(() => {
+						this.$router.replace({path: '/login'});
+					}).catch(() => {
+						//取消退出
+					})
+				}
+			},
+			//全屏
+			screen(){
+				var element = document.documentElement;
+				this.$TOOL.screen(element)
+			},
+			//显示短消息
+			showMsg(){
+				this.msg = true
+			},
+			//标记已读
+			markRead(){
+				this.msgList = []
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.user-bar {display: flex;align-items: center;height: 100%;}
+	.user-bar .panel-item {padding: 0 10px;cursor: pointer;height: 100%;display: flex;align-items: center;}
+	.user-bar .panel-item i {font-size: 16px;}
+	.user-bar .panel-item:hover {background: rgba(0, 0, 0, 0.1);}
+	.user-bar .user-avatar {height:49px;display: flex;align-items: center;}
+	.user-bar .user-avatar label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
+
+	.msg-list li {border-top:1px solid #eee;}
+	.msg-list li a {display: flex;padding:20px;}
+	.msg-list li a:hover {background: #ecf5ff;}
+	.msg-list__icon {width: 40px;margin-right: 15px;}
+	.msg-list__main {flex: 1;}
+	.msg-list__main h2 {font-size: 15px;font-weight: normal;color: #333;}
+	.msg-list__main p {font-size: 12px;color: #999;line-height: 1.8;margin-top: 5px;}
+	.msg-list__time {width: 100px;text-align: right;color: #999;}
+
+	[data-theme='dark'] .msg-list__main h2 {color: #d0d0d0;}
+	[data-theme='dark'] .msg-list li {border-top:1px solid #363636;}
+	[data-theme='dark'] .msg-list li a:hover {background: #383838;}
+</style>
diff --git a/ui/src/layout/index.vue b/ui/src/layout/index.vue
new file mode 100644
index 0000000..ccb7fb7
--- /dev/null
+++ b/ui/src/layout/index.vue
@@ -0,0 +1,303 @@
+<template>
+	<!-- 通栏布局 -->
+	<template v-if="layout=='header'">
+		<header class="adminui-header">
+			<div class="adminui-header-left">
+				<div class="logo-bar">
+					<img class="logo" src="img/logo.png">
+					<span>{{ $CONFIG.APP_NAME }}</span>
+				</div>
+				<ul v-if="!ismobile" class="nav">
+					<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''" @click="showMenu(item)">
+						<el-icon><component :is="item.meta.icon || el-icon-menu" /></el-icon>
+						<span>{{ item.meta.title }}</span>
+					</li>
+				</ul>
+			</div>
+			<div class="adminui-header-right">
+				<userbar></userbar>
+			</div>
+		</header>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
+				<div v-if="!menuIsCollapse" class="adminui-side-top">
+					<h2>{{ pmenu.meta.title }}</h2>
+				</div>
+				<div class="adminui-side-scroll">
+					<el-scrollbar>
+						<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+							<NavMenu :navMenus="nextMenu"></NavMenu>
+						</el-menu>
+					</el-scrollbar>
+				</div>
+				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
+					<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
+				</div>
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+				<Topbar v-if="!ismobile"></Topbar>
+				<Tags v-if="!ismobile && layoutTags"></Tags>
+				<div class="adminui-main" id="adminui-main">
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
+					        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
+					    </keep-alive>
+					</router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 经典布局 -->
+	<template v-else-if="layout=='menu'">
+		<header class="adminui-header">
+			<div class="adminui-header-left">
+				<div class="logo-bar">
+					<img class="logo" src="img/logo.png">
+					<span>{{ $CONFIG.APP_NAME }}</span>
+				</div>
+			</div>
+			<div class="adminui-header-right">
+				<userbar></userbar>
+			</div>
+		</header>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
+				<div class="adminui-side-scroll">
+					<el-scrollbar>
+						<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+							<NavMenu :navMenus="menu"></NavMenu>
+						</el-menu>
+					</el-scrollbar>
+				</div>
+				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
+					<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
+				</div>
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+				<Topbar v-if="!ismobile"></Topbar>
+				<Tags v-if="!ismobile && layoutTags"></Tags>
+				<div class="adminui-main" id="adminui-main">
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
+					        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
+					    </keep-alive>
+					</router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 功能坞布局 -->
+	<template v-else-if="layout=='dock'">
+		<header class="adminui-header">
+			<div class="adminui-header-left">
+				<div class="logo-bar">
+					<img class="logo" src="img/logo.png">
+					<span>{{ $CONFIG.APP_NAME }}</span>
+				</div>
+			</div>
+			<div class="adminui-header-right">
+				<div v-if="!ismobile" class="adminui-header-menu">
+					<el-menu mode="horizontal" :default-active="active" router background-color="#222b45" text-color="#fff" active-text-color="var(--el-color-primary)">
+						<NavMenu :navMenus="menu"></NavMenu>
+					</el-menu>
+				</div>
+				<Side-m v-if="ismobile"></Side-m>
+				<userbar></userbar>
+			</div>
+		</header>
+		<section class="aminui-wrapper">
+			<div class="aminui-body el-container">
+				<Tags v-if="!ismobile && layoutTags"></Tags>
+				<div class="adminui-main" id="adminui-main">
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
+					        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
+					    </keep-alive>
+					</router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 默认布局 -->
+	<template v-else>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile" class="aminui-side-split">
+				<div class="aminui-side-split-top">
+					<router-link :to="$CONFIG.DASHBOARD_URL">
+						<img class="logo" :title="$CONFIG.APP_NAME" src="img/logo-r.png">
+					</router-link>
+				</div>
+				<div class="adminui-side-split-scroll">
+					<el-scrollbar>
+						<ul>
+							<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
+								@click="showMenu(item)">
+								<el-icon><component :is="item.meta.icon || el-icon-menu" /></el-icon>
+								<p>{{ item.meta.title }}</p>
+							</li>
+						</ul>
+					</el-scrollbar>
+				</div>
+			</div>
+			<div v-if="!ismobile && nextMenu.length>0 || !pmenu.component" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
+				<div v-if="!menuIsCollapse" class="adminui-side-top">
+					<h2>{{ pmenu.meta.title }}</h2>
+				</div>
+				<div class="adminui-side-scroll">
+					<el-scrollbar>
+						<el-menu :default-active="active" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
+							<NavMenu :navMenus="nextMenu"></NavMenu>
+						</el-menu>
+					</el-scrollbar>
+				</div>
+				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
+					<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
+				</div>
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+				<Topbar>
+					<userbar></userbar>
+				</Topbar>
+				<Tags v-if="!ismobile && layoutTags"></Tags>
+				<div class="adminui-main" id="adminui-main">
+					<router-view v-slot="{ Component }">
+					    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
+					        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
+					    </keep-alive>
+					</router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<div class="main-maximize-exit" @click="exitMaximize"><el-icon><el-icon-close /></el-icon></div>
+
+	<div class="layout-setting" @click="openSetting"><el-icon><el-icon-brush-filled /></el-icon></div>
+
+	<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
+		<setting></setting>
+	</el-drawer>
+</template>
+
+<script>
+	import SideM from './components/sideM.vue';
+	import Topbar from './components/topbar.vue';
+	import Tags from './components/tags.vue';
+	import NavMenu from './components/NavMenu.vue';
+	import userbar from './components/userbar.vue';
+	import setting from './components/setting.vue';
+	import iframeView from './components/iframeView.vue';
+
+	export default {
+		name: 'index',
+		components: {
+			SideM,
+			Topbar,
+			Tags,
+			NavMenu,
+			userbar,
+			setting,
+			iframeView
+		},
+		data() {
+			return {
+				settingDialog: false,
+				menu: [],
+				nextMenu: [],
+				pmenu: {},
+				active: ''
+			}
+		},
+		computed:{
+			ismobile(){
+				return this.$store.state.global.ismobile
+			},
+			layout(){
+				return this.$store.state.global.layout
+			},
+			layoutTags(){
+				return this.$store.state.global.layoutTags
+			},
+			menuIsCollapse(){
+				return this.$store.state.global.menuIsCollapse
+			}
+		},
+		created() {
+			this.onLayoutResize();
+			window.addEventListener('resize', this.onLayoutResize);
+			var menu = this.$router.sc_getMenu();
+			this.menu = this.filterUrl(menu);
+			this.showThis()
+		},
+		watch: {
+			$route() {
+				this.showThis()
+			},
+			layout: {
+				handler(val){
+					document.body.setAttribute('data-layout', val)
+				},
+				immediate: true,
+			}
+		},
+		methods: {
+			openSetting(){
+				this.settingDialog = true;
+			},
+			onLayoutResize(){
+				this.$store.commit("SET_ismobile", document.body.clientWidth < 992)
+			},
+			//路由监听高亮
+			showThis(){
+				this.pmenu = this.$route.meta.breadcrumb ? this.$route.meta.breadcrumb[0] : {}
+				this.nextMenu = this.filterUrl(this.pmenu.children);
+				this.$nextTick(()=>{
+					this.active = this.$route.meta.active || this.$route.fullPath;
+				})
+			},
+			//点击显示
+			showMenu(route) {
+				this.pmenu = route;
+				this.nextMenu = this.filterUrl(route.children);
+				if((!route.children || route.children.length == 0) && route.component){
+					this.$router.push({path: route.path})
+				}
+			},
+			//转换外部链接的路由
+			filterUrl(map){
+				var newMap = []
+				map && map.forEach(item => {
+					item.meta = item.meta?item.meta:{};
+					//处理隐藏
+					if(item.meta.hidden){
+						return false
+					}
+					//处理http
+					if(item.meta.type=='iframe'){
+						item.path = `/i/${item.name}`;
+					}
+					//递归循环
+					if(item.children&&item.children.length > 0){
+						item.children = this.filterUrl(item.children)
+					}
+					newMap.push(item)
+				})
+				return newMap;
+			},
+			//退出最大化
+			exitMaximize(){
+				document.getElementById('app').classList.remove('main-maximize')
+			}
+		}
+	}
+</script>
diff --git a/ui/src/layout/other/404.vue b/ui/src/layout/other/404.vue
new file mode 100644
index 0000000..43105f3
--- /dev/null
+++ b/ui/src/layout/other/404.vue
@@ -0,0 +1,192 @@
+<template>
+	<div style="text-align: center;width: 100%;">
+		<el-empty description=" ">
+
+			<h2 data-text="404">404</h2>
+			<h4>啊呀~页面不存在!</h4>
+			<p>您可以先检查网址，然后重新输入或给我们反馈问题。</p>
+			<el-button type="primary" plain round @click="gohome">返回首页</el-button>
+			<el-button type="primary" plain round @click="gologin">重新登录</el-button>
+			<el-button type="primary" round @click="goback">返回上一页</el-button>
+		</el-empty>
+
+	</div>
+</template>
+
+<script>
+	export default {
+		methods: {
+			gohome(){
+				location.href="#/"
+			},
+			goback(){
+				this.$router.go(-1);
+			},
+			gologin(){
+				this.$router.push("/login");
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	h4 {font-size: 20px;color: #333;}
+	p {font-size: 12px;color: #999;margin:20px 0;}
+	h2 {font-size: 70px;position: relative;letter-spacing: 1px;z-index: 3;}
+	h2:after {
+		content: attr(data-text);
+		position: absolute;
+		left: 2px;
+		text-shadow: -1px 0 red;
+		top: 0;
+		color: #000;
+		background: #f6f8f9;
+		overflow: hidden;
+		clip: rect(0, 900px, 0, 0);
+		width: 100%;
+		animation: noise-anim 2s infinite linear alternate-reverse;
+	}
+	h2:before {
+	    content: attr(data-text);
+	    position: absolute;
+	    left: -2px;
+	    text-shadow: 1px 0 blue;
+	    top: 0;
+	    color: #000;
+	    background: #f6f8f9;
+	    overflow: hidden;
+	    clip: rect(0, 900px, 0, 0);
+		width: 100%;
+	    animation: noise-anim-2 3s infinite linear alternate-reverse;
+	}
+	@keyframes noise-anim {
+	    0% {
+	        clip: rect(77px, 9999px, 51px, 0);
+	    }
+	    5% {
+	        clip: rect(25px, 9999px, 30px, 0);
+	    }
+	    10% {
+	        clip: rect(70px, 9999px, 75px, 0);
+	    }
+	    15% {
+	        clip: rect(94px, 9999px, 96px, 0);
+	    }
+	    20% {
+	        clip: rect(24px, 9999px, 11px, 0);
+	    }
+	    25% {
+	        clip: rect(12px, 9999px, 53px, 0);
+	    }
+	    30% {
+	        clip: rect(79px, 9999px, 54px, 0);
+	    }
+	    35% {
+	        clip: rect(70px, 9999px, 93px, 0);
+	    }
+	    40% {
+	        clip: rect(73px, 9999px, 86px, 0);
+	    }
+	    45% {
+	        clip: rect(100px, 9999px, 96px, 0);
+	    }
+	    50% {
+	        clip: rect(5px, 9999px, 68px, 0);
+	    }
+	    55% {
+	        clip: rect(6px, 9999px, 16px, 0);
+	    }
+	    60% {
+	        clip: rect(4px, 9999px, 60px, 0);
+	    }
+	    65% {
+	        clip: rect(86px, 9999px, 74px, 0);
+	    }
+	    70% {
+	        clip: rect(6px, 9999px, 53px, 0);
+	    }
+	    75% {
+	        clip: rect(41px, 9999px, 35px, 0);
+	    }
+	    80% {
+	        clip: rect(70px, 9999px, 60px, 0);
+	    }
+	    85% {
+	        clip: rect(52px, 9999px, 66px, 0);
+	    }
+	    90% {
+	        clip: rect(18px, 9999px, 16px, 0);
+	    }
+	    95% {
+	        clip: rect(71px, 9999px, 80px, 0);
+	    }
+	    100% {
+	        clip: rect(69px, 9999px, 51px, 0);
+	    }
+	}
+	@keyframes noise-anim-2 {
+	    0% {
+	        clip: rect(20px, 9999px, 7px, 0);
+	    }
+	    5% {
+	        clip: rect(51px, 9999px, 73px, 0);
+	    }
+	    10% {
+	        clip: rect(33px, 9999px, 21px, 0);
+	    }
+	    15% {
+	        clip: rect(60px, 9999px, 48px, 0);
+	    }
+	    20% {
+	        clip: rect(86px, 9999px, 48px, 0);
+	    }
+	    25% {
+	        clip: rect(32px, 9999px, 50px, 0);
+	    }
+	    30% {
+	        clip: rect(59px, 9999px, 50px, 0);
+	    }
+	    35% {
+	        clip: rect(80px, 9999px, 96px, 0);
+	    }
+	    40% {
+	        clip: rect(7px, 9999px, 39px, 0);
+	    }
+	    45% {
+	        clip: rect(62px, 9999px, 90px, 0);
+	    }
+	    50% {
+	        clip: rect(85px, 9999px, 84px, 0);
+	    }
+	    55% {
+	        clip: rect(89px, 9999px, 51px, 0);
+	    }
+	    60% {
+	        clip: rect(88px, 9999px, 50px, 0);
+	    }
+	    65% {
+	        clip: rect(8px, 9999px, 82px, 0);
+	    }
+	    70% {
+	        clip: rect(80px, 9999px, 23px, 0);
+	    }
+	    75% {
+	        clip: rect(22px, 9999px, 52px, 0);
+	    }
+	    80% {
+	        clip: rect(96px, 9999px, 44px, 0);
+	    }
+	    85% {
+	        clip: rect(84px, 9999px, 27px, 0);
+	    }
+	    90% {
+	        clip: rect(32px, 9999px, 71px, 0);
+	    }
+	    95% {
+	        clip: rect(85px, 9999px, 35px, 0);
+	    }
+	    100% {
+	        clip: rect(24px, 9999px, 23px, 0);
+	    }
+	}
+</style>
diff --git a/ui/src/layout/other/empty.vue b/ui/src/layout/other/empty.vue
new file mode 100644
index 0000000..9c72bc8
--- /dev/null
+++ b/ui/src/layout/other/empty.vue
@@ -0,0 +1,3 @@
+<template>
+	<router-view></router-view>
+</template>
\ No newline at end of file
diff --git a/ui/src/locales/index.js b/ui/src/locales/index.js
new file mode 100644
index 0000000..d63e5d3
--- /dev/null
+++ b/ui/src/locales/index.js
@@ -0,0 +1,34 @@
+import sysConfig from "@/config"
+import tool from '@/utils/tool'
+import { createI18n } from 'vue-i18n'
+import el_zh_cn from 'element-plus/lib/locale/lang/zh-cn'
+import el_en from 'element-plus/lib/locale/lang/en'
+import el_ja from 'element-plus/lib/locale/lang/ja'
+
+import zh_cn from './lang/zh-cn.js'
+import en from './lang/en.js'
+import ja from './lang/ja.js'
+
+const messages = {
+	'zh-cn': {
+		el: el_zh_cn,
+		...zh_cn
+	},
+	'en': {
+		el: el_en,
+		...en
+	},
+	'ja': {
+		el: el_ja,
+		...ja
+	}
+}
+
+const i18n = createI18n({
+	locale: tool.data.get("APP_LANG") || sysConfig.LANG,
+	fallbackLocale: 'zh-cn',
+	globalInjection: true,
+	messages,
+})
+
+export default i18n;
diff --git a/ui/src/locales/lang/en.js b/ui/src/locales/lang/en.js
new file mode 100644
index 0000000..0893607
--- /dev/null
+++ b/ui/src/locales/lang/en.js
@@ -0,0 +1,26 @@
+export default {
+	login: {
+		slogan: 'High performance / delicate / grace',
+		describe: 'Vue3 + element plus based front-end solutions in the background.',
+		signInTitle: 'Sign in',
+		rememberMe: 'Remember me',
+		forgetPassword: 'Forget password',
+		signIn: 'Sign in',
+		signInOther: 'Sign in with',
+		userPlaceholder: 'user / phone / email',
+		userError: 'Please input a user name',
+		PWPlaceholder: 'Please input a password',
+		PWError: 'Please input a password',
+		admin: 'Administrator',
+		user: 'User'
+	},
+	user: {
+		dynamic: 'Dynamic',
+		info: 'User Info',
+		settings: 'Settings',
+		nightmode: 'night mode',
+		nightmode_msg: 'Suitable for low light environment,The current night mode is beta',
+		language: 'language',
+		language_msg: 'Translation in progress,Temporarily translated the text of this view',
+	}
+}
diff --git a/ui/src/locales/lang/ja.js b/ui/src/locales/lang/ja.js
new file mode 100644
index 0000000..258d30e
--- /dev/null
+++ b/ui/src/locales/lang/ja.js
@@ -0,0 +1,26 @@
+export default {
+	login: {
+		slogan: '高性能 / 精緻 / 優雅',
+		describe: 'Vue 3+Element-Palusによる中バックグラウンドの先端解決策。',
+		signInTitle: 'ユーザー登録',
+		rememberMe: '覚えてください',
+		forgetPassword: 'パスワードを忘れます',
+		signIn: 'ログイン',
+		signInOther: 'その他のログイン方式',
+		userPlaceholder: 'ユーザ名/携帯電話/メールアドレス',
+		userError: 'ユーザ名を入力してください',
+		PWPlaceholder: 'パスワードを入力してください',
+		PWError: 'パスワードを入力してください',
+		admin: '管理者',
+		user: 'ユーザー'
+	},
+	user: {
+		dynamic: 'ダイナミック',
+		info: 'ユーザー',
+		settings: '設定',
+		nightmode: 'ナイトモード',
+		nightmode_msg: '光の弱い環境に適しています，現在のブラックモードはベータバージョンです。',
+		language: '言語',
+		language_msg: '翻訳が進行中、本ビューのテキストを一時的に翻訳しました。',
+	}
+}
diff --git a/ui/src/locales/lang/zh-cn.js b/ui/src/locales/lang/zh-cn.js
new file mode 100644
index 0000000..3937d68
--- /dev/null
+++ b/ui/src/locales/lang/zh-cn.js
@@ -0,0 +1,26 @@
+export default {
+	login: {
+		slogan: '高性能 / 精致 / 优雅',
+		describe: '基于Vue3 + Element-Plus 的中后台前端解决方案。',
+		signInTitle: '用户登录',
+		rememberMe: '记住我',
+		forgetPassword: '忘记密码',
+		signIn: '登录',
+		signInOther: '其他登录方式',
+		userPlaceholder: '用户名 / 手机 / 邮箱',
+		userError: '请输入用户名',
+		PWPlaceholder: '请输入密码',
+		PWError: '请输入密码',
+		admin: '管理员',
+		user: '用户'
+	},
+	user: {
+		dynamic: '近期动态',
+		info: '个人信息',
+		settings: '设置',
+		nightmode: '黑夜模式',
+		nightmode_msg: '适合光线较弱的环境，当前黑暗模式为beta版本',
+		language: '语言',
+		language_msg: '翻译进行中，暂翻译了本视图的文本',
+	}
+}
diff --git a/ui/src/main.js b/ui/src/main.js
new file mode 100644
index 0000000..212abc7
--- /dev/null
+++ b/ui/src/main.js
@@ -0,0 +1,20 @@
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/display.css'
+import scui from './scui'
+import i18n from './locales'
+import router from './router'
+import store from './store'
+import { createApp } from 'vue'
+import App from './App.vue'
+
+const app = createApp(App);
+
+app.use(store);
+app.use(router);
+app.use(ElementPlus, {size: 'default'});
+app.use(i18n);
+app.use(scui);
+
+//挂载app
+app.mount('#app');
diff --git a/ui/src/router/index.js b/ui/src/router/index.js
new file mode 100644
index 0000000..baf18e9
--- /dev/null
+++ b/ui/src/router/index.js
@@ -0,0 +1,175 @@
+import {createRouter, createWebHashHistory} from 'vue-router';
+import { ElNotification } from 'element-plus';
+import config from "@/config"
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import tool from '@/utils/tool';
+import systemRouter from './systemRouter';
+import userRoutes from '@/config/route';
+import {beforeEach, afterEach} from './scrollBehavior';
+
+//系统路由
+const routes = systemRouter
+
+//系统特殊路由
+const routes_404 = {
+	path: "/:pathMatch(.*)*",
+	hidden: true,
+	component: () => import(/* webpackChunkName: "404" */ '@/layout/other/404'),
+}
+let routes_404_r = ()=>{}
+
+const router = createRouter({
+	history: createWebHashHistory(),
+	routes: routes
+})
+
+//设置标题
+document.title = config.APP_NAME
+
+//判断是否已加载过动态/静态路由
+var isGetRouter = false;
+
+router.beforeEach(async (to, from, next) => {
+
+	NProgress.start()
+	//动态标题
+	document.title = to.meta.title ? `${to.meta.title} - ${config.APP_NAME}` : `${config.APP_NAME}`
+
+	let token = tool.data.get("TOKEN");
+
+	if(to.path === "/login"){
+		//删除路由(替换当前layout路由)
+		router.addRoute(routes[0])
+		//删除路由(404)
+		routes_404_r()
+		isGetRouter = false;
+		next();
+		return false;
+	}
+
+	if(!token){
+		next({
+			path: '/login'
+		});
+		return false;
+	}
+
+	//整页路由处理
+	if(to.meta.fullpage){
+		to.matched = [to.matched[to.matched.length-1]]
+	}
+	//加载动态/静态路由
+	if(!isGetRouter){
+		let apiMenu = tool.data.get("MENU") || []
+		let userInfo = tool.data.get("USER_INFO")
+		let userMenu = treeFilter(userRoutes, node => {
+			return node.meta.role ? node.meta.role.filter(item=>userInfo.role.indexOf(item)>-1).length > 0 : true
+		})
+		let menu = [...userMenu, ...apiMenu]
+		var menuRouter = filterAsyncRouter(menu)
+		menuRouter = flatAsyncRoutes(menuRouter)
+		menuRouter.forEach(item => {
+			router.addRoute("layout", item)
+		})
+		routes_404_r = router.addRoute(routes_404)
+		if (to.matched.length == 0) {
+			router.push(to.fullPath);
+		}
+		isGetRouter = true;
+	}
+	beforeEach(to, from)
+	next();
+});
+
+router.afterEach((to, from) => {
+	afterEach(to, from)
+	NProgress.done()
+});
+
+router.onError((error) => {
+	NProgress.done();
+	ElNotification.error({
+		title: '路由错误',
+		message: error.message
+	});
+});
+
+//入侵追加自定义方法、对象
+router.sc_getMenu = () => {
+	var apiMenu = tool.data.get("MENU") || []
+	let userInfo = tool.data.get("USER_INFO")
+	let userMenu = treeFilter(userRoutes, node => {
+		return node.meta.role ? node.meta.role.filter(item=>userInfo.role.indexOf(item)>-1).length > 0 : true
+	})
+	var menu = [...userMenu, ...apiMenu]
+	return menu
+}
+
+//转换
+function filterAsyncRouter(routerMap) {
+	const accessedRouters = []
+	routerMap.forEach(item => {
+		item.meta = item.meta?item.meta:{};
+		//处理外部链接特殊路由
+		if(item.meta.type=='iframe'){
+			item.meta.url = item.path;
+			item.path = `/i/${item.name}`;
+		}
+		//MAP转路由对象
+		var route = {
+			path: item.path,
+			name: item.name,
+			meta: item.meta,
+			redirect: item.redirect,
+			children: item.children ? filterAsyncRouter(item.children) : null,
+			component: loadComponent(item.component)
+		}
+		accessedRouters.push(route)
+	})
+	return accessedRouters
+}
+function loadComponent(component){
+	if(component){
+		return () => import(/* webpackChunkName: "[request]" */ `@/views/${component}`)
+	}else{
+		return () => import(`@/layout/other/empty`)
+	}
+
+}
+
+//路由扁平化
+function flatAsyncRoutes(routes, breadcrumb=[]) {
+	let res = []
+	routes.forEach(route => {
+		const tmp = {...route}
+        if (tmp.children) {
+            let childrenBreadcrumb = [...breadcrumb]
+            childrenBreadcrumb.push(route)
+            let tmpRoute = { ...route }
+            tmpRoute.meta.breadcrumb = childrenBreadcrumb
+            delete tmpRoute.children
+            res.push(tmpRoute)
+            let childrenRoutes = flatAsyncRoutes(tmp.children, childrenBreadcrumb)
+            childrenRoutes.map(item => {
+                res.push(item)
+            })
+        } else {
+            let tmpBreadcrumb = [...breadcrumb]
+            tmpBreadcrumb.push(tmp)
+            tmp.meta.breadcrumb = tmpBreadcrumb
+            res.push(tmp)
+        }
+    })
+    return res
+}
+
+//过滤树
+function treeFilter(tree, func) {
+	return tree.map(node => ({ ...node })).filter(node => {
+		node.children = node.children && treeFilter(node.children, func)
+		return func(node) || (node.children && node.children.length)
+	})
+}
+
+export default router
diff --git a/ui/src/router/scrollBehavior.js b/ui/src/router/scrollBehavior.js
new file mode 100644
index 0000000..ec30197
--- /dev/null
+++ b/ui/src/router/scrollBehavior.js
@@ -0,0 +1,22 @@
+import store from '@/store'
+import { nextTick } from 'vue'
+
+export function beforeEach(to, from){
+	var adminMain = document.querySelector('#adminui-main')
+	if(!adminMain){return false}
+	store.commit("updateViewTags", {
+		fullPath: from.fullPath,
+		scrollTop: adminMain.scrollTop
+	})
+}
+
+export function afterEach(to){
+	var adminMain = document.querySelector('#adminui-main')
+	if(!adminMain){return false}
+	nextTick(()=>{
+		var beforeRoute = store.state.viewTags.viewTags.filter(v => v.fullPath == to.fullPath)[0]
+		if(beforeRoute){
+			adminMain.scrollTop = beforeRoute.scrollTop || 0
+		}
+	})
+}
\ No newline at end of file
diff --git a/ui/src/router/systemRouter.js b/ui/src/router/systemRouter.js
new file mode 100644
index 0000000..5d4c65b
--- /dev/null
+++ b/ui/src/router/systemRouter.js
@@ -0,0 +1,21 @@
+import config from "@/config"
+
+//系统路由
+const routes = [
+	{
+		name: "layout",
+		path: "/",
+		component: () => import(/* webpackChunkName: "layout" */ '@/layout'),
+		redirect: config.DASHBOARD_URL || '/dashboard',
+		children: []
+	},
+	{
+		path: "/login",
+		component: () => import(/* webpackChunkName: "login" */ '@/views/userCenter/login'),
+		meta: {
+			title: "登录"
+		}
+	}
+]
+
+export default routes;
diff --git a/ui/src/scui.js b/ui/src/scui.js
new file mode 100644
index 0000000..13541d4
--- /dev/null
+++ b/ui/src/scui.js
@@ -0,0 +1,78 @@
+import config from "./config"
+import api from './api'
+import tool from './utils/tool'
+import http from "./utils/request"
+import { permission, rolePermission } from './utils/permission'
+
+import scTable from './components/scTable'
+import scFilterBar from './components/scFilterBar'
+import scUpload from './components/scUpload'
+import scUploadMultiple from './components/scUpload/multiple'
+import scFormTable from './components/scFormTable'
+import scTableSelect from './components/scTableSelect'
+import scPageHeader from './components/scPageHeader'
+import scSelect from './components/scSelect'
+import scDialog from './components/scDialog'
+import scForm from './components/scForm'
+import scTitle from './components/scTitle'
+import scWaterMark from './components/scWaterMark'
+import scQrCode from './components/scQrCode'
+
+import scStatusIndicator from './components/scMini/scStatusIndicator'
+import scTrend from './components/scMini/scTrend'
+
+import auth from './directives/auth'
+import role from './directives/role'
+import time from './directives/time'
+import copy from './directives/copy'
+import errorHandler from './utils/errorHandler'
+
+import * as elIcons from '@element-plus/icons'
+import * as scIcons from './assets/icons'
+
+export default {
+	install(app) {
+		//挂载全局对象
+		app.config.globalProperties.$CONFIG = config;
+		app.config.globalProperties.$TOOL = tool;
+		app.config.globalProperties.$HTTP = http;
+		app.config.globalProperties.$API = api;
+		app.config.globalProperties.$AUTH = permission;
+		app.config.globalProperties.$ROLE = rolePermission;
+
+		//注册全局组件
+		app.component('scTable', scTable);
+		app.component('scFilterBar', scFilterBar);
+		app.component('scUpload', scUpload);
+		app.component('scUploadMultiple', scUploadMultiple);
+		app.component('scFormTable', scFormTable);
+		app.component('scTableSelect', scTableSelect);
+		app.component('scPageHeader', scPageHeader);
+		app.component('scSelect', scSelect);
+		app.component('scDialog', scDialog);
+		app.component('scForm', scForm);
+		app.component('scTitle', scTitle);
+		app.component('scWaterMark', scWaterMark);
+		app.component('scQrCode', scQrCode);
+		app.component('scStatusIndicator', scStatusIndicator);
+		app.component('scTrend', scTrend);
+
+		//注册全局指令
+		app.directive('auth', auth)
+		app.directive('role', role)
+		app.directive('time', time)
+		app.directive('copy', copy)
+
+		//统一注册el-icon图标
+		for(let icon in elIcons){
+			app.component(`ElIcon${icon}`, elIcons[icon])
+		}
+		//统一注册sc-icon图标
+		for(let icon in scIcons){
+			app.component(`ScIcon${icon}`, scIcons[icon])
+		}
+
+		//全局代码错误捕捉
+		app.config.errorHandler = errorHandler
+	}
+}
diff --git a/ui/src/store/index.js b/ui/src/store/index.js
new file mode 100644
index 0000000..6cb63b0
--- /dev/null
+++ b/ui/src/store/index.js
@@ -0,0 +1,15 @@
+/**
+ * @description 自动import导入所有 vuex 模块
+ */
+
+import { createStore } from 'vuex';
+
+const files = require.context('./modules', false, /\.js$/);
+const modules = {}
+files.keys().forEach((key) => {
+	modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+export default createStore({
+	modules
+});
diff --git a/ui/src/store/modules/global.js b/ui/src/store/modules/global.js
new file mode 100644
index 0000000..53ae864
--- /dev/null
+++ b/ui/src/store/modules/global.js
@@ -0,0 +1,33 @@
+import config from "@/config";
+
+export default {
+	state: {
+		//移动端布局
+		ismobile: false,
+		//布局
+		layout: config.LAYOUT,
+		//菜单是否折叠 toggle
+		menuIsCollapse: config.MENU_IS_COLLAPSE,
+		//多标签栏
+		layoutTags: config.LAYOUT_TAGS,
+		//主题
+		theme: config.THEME,
+	},
+	mutations: {
+		SET_ismobile(state, key){
+			state.ismobile = key
+		},
+		SET_layout(state, key){
+			state.layout = key
+		},
+		SET_theme(state, key){
+			state.theme = key
+		},
+		TOGGLE_menuIsCollapse(state){
+			state.menuIsCollapse = !state.menuIsCollapse
+		},
+		TOGGLE_layoutTags(state){
+			state.layoutTags = !state.layoutTags
+		}
+	}
+}
diff --git a/ui/src/store/modules/iframe.js b/ui/src/store/modules/iframe.js
new file mode 100644
index 0000000..f139578
--- /dev/null
+++ b/ui/src/store/modules/iframe.js
@@ -0,0 +1,38 @@
+export default {
+	state: {
+		iframeList: []
+	},
+	mutations: {
+		setIframeList(state, route){
+			state.iframeList = []
+			state.iframeList.push(route)
+		},
+		pushIframeList(state, route){
+			let target = state.iframeList.find((item) => item.path === route.path)
+			if(!target){
+				state.iframeList.push(route)
+			}
+		},
+		removeIframeList(state, route){
+			state.iframeList.forEach((item, index) => {
+				if (item.path === route.path){
+					state.iframeList.splice(index, 1)
+				}
+			})
+		},
+		refreshIframe(state, route){
+			state.iframeList.forEach((item) => {
+				if (item.path == route.path){
+					var url = route.meta.url;
+					item.meta.url = '';
+					setTimeout(function() {
+						item.meta.url = url
+					}, 200);
+				}
+			})
+		},
+		clearIframeList(state){
+			state.iframeList = []
+		}
+	}
+}
diff --git a/ui/src/store/modules/keepAlive.js b/ui/src/store/modules/keepAlive.js
new file mode 100644
index 0000000..c143cf5
--- /dev/null
+++ b/ui/src/store/modules/keepAlive.js
@@ -0,0 +1,34 @@
+export default {
+	state: {
+		keepLiveRoute: [],
+		routeKey: null,
+		routeShow: true
+	},
+	mutations: {
+		pushKeepLive(state, component){
+			if(!state.keepLiveRoute.includes(component)){
+				state.keepLiveRoute.push(component)
+			}
+		},
+		removeKeepLive(state, component){
+			var index = state.keepLiveRoute.indexOf(component);
+			if(index !== -1){
+				state.keepLiveRoute.splice(index, 1);
+			}
+		},
+		clearKeepLive(state){
+			state.keepLiveRoute = []
+		},
+		setRouteKey(state, key){
+			state.routeKey = key
+		},
+		setRouteShow(state, key){
+			state.routeShow = key
+		}
+	},
+	actions: {
+		setRouteKey({ commit }, key) {
+			commit('setRouteKey', key);
+		}
+	}
+}
diff --git a/ui/src/store/modules/viewTags.js b/ui/src/store/modules/viewTags.js
new file mode 100644
index 0000000..b34f71e
--- /dev/null
+++ b/ui/src/store/modules/viewTags.js
@@ -0,0 +1,39 @@
+export default {
+	state: {
+		viewTags: []
+	},
+	mutations: {
+		pushViewTags(state, route){
+			let target = state.viewTags.find((item) => item.fullPath === route.fullPath)
+			let isName = route.name
+			if(!target && isName){
+				state.viewTags.push(route)
+			}
+		},
+		removeViewTags(state, route){
+			state.viewTags.forEach((item, index) => {
+				if (item.fullPath === route.fullPath){
+					state.viewTags.splice(index, 1)
+				}
+			})
+		},
+		updateViewTags(state, route){
+			state.viewTags.forEach((item) => {
+				if (item.fullPath == route.fullPath){
+					item = Object.assign(item, route)
+				}
+			})
+		},
+		updateViewTagsTitle(state, title=''){
+			const nowFullPath = location.hash.substring(1)
+			state.viewTags.forEach((item) => {
+				if (item.fullPath == nowFullPath){
+					item.meta.title = title
+				}
+			})
+		},
+		clearViewTags(state){
+			state.viewTags = []
+		}
+	}
+}
diff --git a/ui/src/style/app.scss b/ui/src/style/app.scss
new file mode 100644
index 0000000..d0e1efe
--- /dev/null
+++ b/ui/src/style/app.scss
@@ -0,0 +1,90 @@
+/* 全局 */
+#app, body, html {width: 100%;height: 100%;background-color: #f6f8f9;font-size: 12px;}
+a {color: #333;text-decoration: none;}
+a:hover, a:focus {color: #000;text-decoration: none;}
+a:link {text-decoration: none;}
+a:-webkit-any-link {text-decoration: none;}
+a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: border-box;outline:none !important; -webkit-appearance: none;}
+* {margin: 0;padding: 0;box-sizing: border-box;outline: none;}
+
+/* 大布局样式 */
+.aminui {display: flex;flex-flow: column;}
+.aminui-wrapper {display: flex;flex:1;overflow: auto;}
+
+/*布局设置*/
+.layout-setting {position: fixed;width: 40px;height: 40px;border-radius: 3px 0 0 3px;bottom: 100px;right: 0px;z-index: 100;background: #409EFF;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;}
+.layout-setting i {font-size: 18px;color: #fff;}
+
+/* 头部 */
+.adminui-header {height: 58px;background: #222b45;color: #fff;display: flex;justify-content:space-between;}
+.adminui-header-left {display: flex;align-items: center;padding-left:20px;}
+.adminui-header-right {display: flex;align-items: center;}
+.adminui-header .logo-bar {font-size: 20px;font-weight: bold;display: flex;align-items: center;}
+.adminui-header .logo-bar .logo {margin-right: 10px;width: 35px;height: 35px;}
+.adminui-header .nav {display: flex;height: 100%;margin-left: 40px;}
+.adminui-header .nav li {padding:0 10px;margin: 0 10px 0 0;font-size: 14px;color: rgba(255, 255, 255, 0.6);list-style: none;height: 100%;display: flex;align-items: center;cursor: pointer;}
+.adminui-header .nav li i {margin-right: 5px;}
+.adminui-header .nav li:hover {color: #fff;}
+.adminui-header .nav li.active {background: rgba(255, 255, 255, 0.1);color: #fff;}
+.adminui-header .user-bar .panel-item:hover {background: rgba(255, 255, 255, 0.1)!important;}
+.adminui-header .user-bar .user label{color: #fff;}
+
+
+/* 左侧菜单 */
+.aminui-side-split {width:65px;flex-shrink:0;background: #222b45;display: flex;flex-flow: column;}
+.aminui-side-split-top {height: 49px;}
+.aminui-side-split-top a {display: inline-block;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
+.aminui-side-split-top .logo {height:30px;vertical-align: bottom;}
+.adminui-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;flex: 1;}
+.aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+.aminui-side-split li i {font-size: 18px;}
+.aminui-side-split li p {margin-top:5px;}
+.aminui-side-split li:hover {background: rgba(255, 255, 255, 0.1);}
+.aminui-side-split li.active {background: #409EFF;}
+
+.adminui-side-split-scroll::-webkit-scrollbar-thumb {background-color: rgba(255, 255, 255, 0.4);border-radius:5px;}
+.adminui-side-split-scroll::-webkit-scrollbar-thumb:hover {background-color: rgba(255, 255, 255, 0.5);}
+.adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
+.adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
+
+.aminui-side {display: flex;flex-flow: column;flex-shrink:0;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;transition:width 0.3s;}
+.adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
+.adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
+.adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
+.adminui-side-bottom {border-top: 1px solid #ebeef5;height:35px;cursor: pointer;display: flex;align-items: center;justify-content: center;}
+.adminui-side-bottom i {font-size: 16px;}
+.adminui-side-bottom:hover {color: var(--el-color-primary);}
+.aminui-side.isCollapse {width: 65px;}
+
+/* 右侧内容 */
+.aminui-body {flex: 1;display: flex;flex-flow: column;}
+
+.adminui-topbar {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
+.adminui-topbar .left-panel {display: flex;align-items: center;}
+.adminui-topbar .right-panel {display: flex;align-items: center;}
+
+.right-panel-search {display: flex;align-items: center;}
+.right-panel-search > * + * {margin-left:10px;}
+
+.adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;}
+.adminui-tags ul {display: flex;overflow: hidden;}
+.adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;position: relative;flex-shrink: 0;}
+.adminui-tags li::after {content: " ";width:1px;height:100%;position: absolute;right:0px;background-image: linear-gradient(#fff, #e6e6e6);}
+.adminui-tags li a {display: inline-block;padding:0 10px;width:100%;height:100%;color: #999;text-decoration:none;display: flex;align-items: center;}
+.adminui-tags li i {margin-left:10px;border-radius: 3px;width:18px;height:18px;display: flex;align-items: center;justify-content: center;}
+.adminui-tags li i:hover {background: rgba(0,0,0,.2);color: #fff;}
+.adminui-tags li:hover {background: #ecf5ff;}
+.adminui-tags li.active {background: #409EFF;}
+.adminui-tags li.active a {color: #fff;}
+.adminui-tags li.sortable-ghost {opacity: 0;}
+
+.adminui-main {overflow: auto;background-color: #f6f8f9;flex: 1;}
+
+/*页面最大化*/
+.aminui.main-maximize {
+	.main-maximize-exit {display: block;}
+	.aminui-side-split, .aminui-side, .adminui-header, .adminui-topbar, .adminui-tags {display: none;}
+}
+.main-maximize-exit {display: none;position: fixed;z-index: 3000;top:-20px;left:50%;margin-left: -20px;border-radius: 50%;width: 40px;height: 40px;cursor: pointer;background: rgba(0,0,0,0.2);text-align: center;}
+.main-maximize-exit i {font-size: 14px;margin-top: 22px;color: #fff;}
+.main-maximize-exit:hover {background: rgba(0,0,0,0.4);}
diff --git a/ui/src/style/fix.scss b/ui/src/style/fix.scss
new file mode 100644
index 0000000..a5d9421
--- /dev/null
+++ b/ui/src/style/fix.scss
@@ -0,0 +1,69 @@
+/* 覆盖element-plus样式 */
+.el-menu {border: none!important;}
+.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
+.el-form-item-msg {font-size: 12px;color: #999;clear: both;width: 100%;}
+.el-container {height: 100%;}
+.el-aside {border-right: 1px solid #e6e6e6;background: #fff;}
+.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
+.el-header .left-panel {display: flex;align-items: center;}
+.el-header .right-panel {display: flex;align-items: center;}
+.el-header .right-panel > * + * {margin-left:10px;}
+.el-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
+.el-main {padding:15px;}
+.el-main.nopadding {padding:0;background: #fff;}
+.el-drawer__body {overflow: auto;padding:0;}
+.el-popconfirm__main {margin: 14px 0;}
+.el-card__header {border-bottom: 0;font-size: 17px;font-weight: bold;padding:15px 20px 0px 20px;}
+.el-dialog__title {font-size: 17px;font-weight: bold;}
+.el-drawer__header>:first-child {font-size: 17px;font-weight: bold;}
+.el-tree.menu .el-tree-node__content {height:36px;}
+.el-tree.menu .el-tree-node__content .el-tree-node__label .icon {margin-right: 5px;}
+.el-progress__text {font-size: 12px!important;}
+.el-progress__text i {font-size: 14.4px!important;}
+.el-step.is-horizontal .el-step__line {height:1px;}
+.el-step__title {font-size: 14px;}
+.drawerBG {background: #f6f8f9;}
+.el-button+.el-dropdown {margin-left: 10px;}
+.el-button-group+.el-dropdown {margin-left: 10px;}
+.el-tag+.el-tag {margin-left: 10px;}
+.el-button-group+.el-button-group {margin-left: 10px;}
+.el-tabs__nav-wrap::after {height: 1px;}
+.el-table th.is-sortable {transition: .1s;}
+.el-table th.is-sortable:hover {background: #eee;}
+.el-table .el-table__body-wrapper {background: #f6f8f9;}
+.el-col .el-card {margin-bottom: 15px;}
+.el-main {flex-basis: 100%;}
+.el-main > .scTable .el-table--border::before {display: none;}
+.el-main > .scTable .el-table--border::after {display: none;}
+.el-main > .scTable .el-table--border .el-table__inner-wrapper::after {display: none;}
+.el-main > .scTable .el-table__border-left-patch {display: none;}
+.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child td:first-child {border-left: 0;}
+.el-main > .scTable .el-table--border .el-table__inner-wrapper tr:first-child th:first-child {border-left: 0;}
+.el-table.el-table--large {font-size: 14px;}
+.el-table {font-size: 12px;}
+
+/* 动态值 */
+.el-button--default:active, .el-button--default.is-plain:active {border-color: var(--el-color-primary-darken-1, #0d84ff);color: var(--el-color-primary-darken-1, #0d84ff);}
+.el-button--primary {background-color: var(--el-color-primary);border-color: var(--el-color-primary);}
+.el-button--primary:focus, .el-button--primary:hover {background: var(--el-color-primary-light-2);border-color: var(--el-color-primary-light-2);}
+.el-button--primary:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);color: #fff;}
+.el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {background: var(--el-color-primary-light-5);border-color: var(--el-color-primary-light-5);}
+.el-button--primary.is-plain {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-6);color: var(--el-color-primary);}
+.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {background-color: var(--el-color-primary);border-color: var(--el-color-primary);color: #fff;}
+.el-button--primary.is-plain:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);}
+.el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-8);color: var(--el-color-primary-light-4);}
+.el-button--text:focus, .el-button--text:hover {color: var(--el-color-primary-light-2);border-color: transparent;background-color: transparent;}
+.aminui-side .el-menu-item.is-active {background: var(--el-color-primary-light-9);color: var(--el-color-primary)!important;}
+
+
+.aminui-side-split li.active {background-color: var(--el-color-primary);}
+.adminui-tags li:hover {background-color: var(--el-color-primary-light-9);}
+.adminui-tags li.active {background-color: var(--el-color-primary)!important;}
+.contextmenu li:hover {background-color: var(--el-color-primary-light-9)!important;color: var(--el-color-primary-light-2)!important;}
+.data-box .item-background {background-color: var(--el-color-primary)!important;}
+.layout-setting,.diy-grid-setting {background-color: var(--el-color-primary)!important;}
+
+/* 覆盖tinymce样式 */
+.sceditor .tox-tinymce {border: 1px solid #DCDFE6;}
+.sceditor .tox .tox-statusbar {border-top: 1px solid #DCDFE6;}
+.sceditor .tox .tox-toolbar__primary {background: #f6f8f9;border-bottom: 1px solid #DCDFE6;}
diff --git a/ui/src/style/media.scss b/ui/src/style/media.scss
new file mode 100644
index 0000000..b2d18e1
--- /dev/null
+++ b/ui/src/style/media.scss
@@ -0,0 +1,42 @@
+@media (max-width: 992px){
+	// 移动端样式覆盖
+	.el-form-item {display: block;}
+	.el-form-item__label {display: block;text-align: left;padding: 0 0 10px;}
+	.el-dialog {width: 90%!important;}
+	.el-dialog.is-fullscreen {width: 100%!important;}
+	.el-drawer.rtl {width: 90%!important;}
+	.el-form-item__content {margin-left: 0px!important;}
+
+	.adminui-main {
+		>.el-container {display: block;height:auto;}
+		>.el-container > .el-aside {width: 100%!important;border: 0}
+	}
+	.scTable {
+		.el-table,
+		.el-table__body-wrapper {display: block!important;height:auto!important;}
+		.el-scrollbar__wrap {height:auto!important;}
+		.scTable-page {padding: 0 5px!important;}
+		.el-pagination__total,
+		.el-pagination__jump,
+		.scTable-do {display: none!important;}
+	}
+
+	.headerPublic {
+		height: auto!important;display: block;
+		.left-panel {overflow: auto;}
+		.left-panel::-webkit-scrollbar{display: none;}
+		.right-panel {display: block;border-top: 1px solid #ebeef5;margin-top: 15px;}
+		.right-panel .right-panel-search {display: block;}
+		.right-panel .right-panel-search >* {width: 100%;margin: 0;margin-top: 15px;}
+	}
+	.adminui-main > .el-container >*:first-child:not(.el-aside):not(.el-header) {border: 0;margin-top: 0;}
+	.adminui-main > .el-container >*:first-child:not(.el-aside):not(.el-header) + .el-aside {margin-top: 0;}
+	.adminui-main > .el-container > .el-aside {border-bottom: 1px solid #ebeef5!important;}
+	.adminui-main > .el-container > .el-container {border-top: 1px solid #ebeef5;border-bottom: 1px solid #ebeef5;margin-top: 15px;}
+	.adminui-main > .el-container > .el-header {@extend .headerPublic;border-bottom: 1px solid #ebeef5;}
+	.adminui-main > .el-container > .el-main {border-top: 1px solid #ebeef5;border-bottom: 1px solid #ebeef5;margin-top: 15px;}
+	.adminui-main > .el-container > .el-main + .el-aside {border-left: 0!important;border-top: 1px solid #ebeef5;margin-top: 15px;}
+	.adminui-main > .el-container > .el-container > .el-header {@extend .headerPublic}
+	.adminui-main > .el-container > .el-container > .el-header .left-panel {display: block;}
+	.adminui-main > .el-container > .el-container > .el-header .right-panel {display: block;margin-top: 15px;}
+}
diff --git a/ui/src/style/pages.scss b/ui/src/style/pages.scss
new file mode 100644
index 0000000..e5c9509
--- /dev/null
+++ b/ui/src/style/pages.scss
@@ -0,0 +1,22 @@
+/* USERCENTER */
+.user-info {padding:20px 40px;}
+.user-info-top {text-align: center;}
+.user-info-top h2 {margin-top:10px;font-size: 24px;}
+.user-info-top p {color: #999;margin-top:5px;}
+.user-info-top button {margin-top:10px;}
+.user-info-main {padding:20px 0;}
+.user-info-main li {list-style-type:none;line-height: 2;font-size: 14px;}
+.user-info-main li i {margin-right: 10px;}
+.user-info-bottom {border-top: 1px solid #e6e6e6;}
+.user-info-bottom h2 {font-size: 14px;margin:15px 0;}
+
+/*static-table*/
+.static-table {border-collapse: collapse;width: 100%;font-size: 14px;margin-bottom: 45px;line-height: 1.5em;}
+.static-table th {text-align: left;white-space: nowrap;color: #909399;font-weight: 400;border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;}
+.static-table td {border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;color: #606266;}
+
+/*header-tabs*/
+.header-tabs {padding:0;display:block;border:0!important;height:auto;}
+.header-tabs .el-tabs {border:0;box-shadow:none;}
+.header-tabs .el-tabs__content {display: none;}
+.header-tabs .el-tabs__item {font-size: 12px;}
diff --git a/ui/src/style/style.scss b/ui/src/style/style.scss
new file mode 100644
index 0000000..11b2cd6
--- /dev/null
+++ b/ui/src/style/style.scss
@@ -0,0 +1,4 @@
+@import 'app.scss';
+@import 'fix.scss';
+@import 'pages.scss';
+@import 'media.scss';
\ No newline at end of file
diff --git a/ui/src/style/theme/dark.scss b/ui/src/style/theme/dark.scss
new file mode 100644
index 0000000..8907909
--- /dev/null
+++ b/ui/src/style/theme/dark.scss
@@ -0,0 +1,265 @@
+[data-theme='dark'] {
+
+	$--color: #409EFF;
+	$--background: #222225;
+	$--background-translucent: rgba(0,0,0,0.2);
+	$--card-background: #2b2b2b;
+	$--text-color: #d0d0d0;
+	$--border-color: #434343;
+
+	--el-color-white: #383838;
+	--el-border-base: 1px solid #434343;
+	--el-border-color-base: #434343;
+	--el-border-color-light: #434343;
+	--el-border-color-lighter: #434343;
+	--el-border-color-hover: #6d6d6d;
+	--el-text-color-primary: #fff;
+	--el-text-color-placeholder: #5c5c5c;
+	--el-text-color-regular: #d0d0d0;
+	--el-disabled-border-base: #434343;
+	--el-disabled-fill-base: #383838;
+	--el-disabled-border-color: #434343;
+	--el-disabled-bg-color: #2b2b2b;
+	--el-disabled-text-color: #5c5c5c;
+	--el-bg-color: #3f3f3f;
+	--el-bg-color-base: #3f3f3f;
+	--el-datepicker-inner-border-color: #434343;
+	--el-datepicker-inrange-background-color: #383838;
+	--el-datepicker-inrange-hover-background-color: #434343;
+	--el-dropdown-menuItem-hover-fill: #434343;
+	--el-dropdown-menuItem-hover-color: #fff;
+	--el-datepicker-border-color: #434343;
+	--el-svg-monochrome-grey: #434343;
+	--el-button-disabled-font-color: #5c5c5c;
+
+	/* APP背景 */
+	#app {background: $--background;color: $--text-color;}
+
+	/* 登录 */
+	.login_bg {background: $--card-background !important;}
+
+	.el-menu {
+		--el-menu-item-hover-fill: rgba(0,0,0,0.2);
+	}
+	.el-input__inner {
+		--el-input-font-color: #d0d0d0;
+		--el-disabled-color-base: #5c5c5c;
+		--el-disabled-fill-base: $--card-background;
+	}
+	.el-input-group__append, .el-input-group__prepend {
+		--el-background-color-base: #383838;
+		--el-color-info: $--text-color;
+		border-color: $--border-color;
+	}
+	.el-input .el-input__count .el-input__count-inner {
+		background: none;
+	}
+	.el-radio {
+		--el-radio-font-color: #d0d0d0;
+	}
+	.el-radio-button {
+		--el-radio-button-checked-text-color: #fff;
+	}
+	.el-checkbox {
+		--el-checkbox-font-color: #d0d0d0;
+		--el-checkbox-checked-icon-color: #fff;
+		--el-checkbox-disabled-input-fill: #383838;
+		--el-checkbox-disabled-border-color: #383838;
+		--el-checkbox-disabled-checked-input-fill: #383838;
+	}
+	.el-checkbox-button {
+		--el-checkbox-button-checked-font-color: #fff;
+	}
+	.el-select {
+		--el-select-input-color: #d0d0d0;
+	}
+	.el-switch {
+		--el-switch-off-color: #383838;
+	}
+	.el-cascader__dropdown {
+		--el-cascader-menu-fill: #383838;
+	}
+	.el-button {
+		--el-button-default-background-color: none;
+	}
+	.el-dialog {
+		--el-dialog-bg-color: #2b2b2b;
+	}
+	.el-drawer {
+		--el-drawer-bg-color: #2b2b2b;
+	}
+	.el-table {
+		--el-table-font-color: #d0d0d0;
+		--el-table-header-bg-color: #2b2b2b;
+		--el-table-current-row-bg-color: #3f3f3f;
+		--el-table-row-hover-bg-color: #373737;
+		--el-table-border-color: #434343;
+	}
+	.el-descriptions {
+		--el-descriptions-item-bordered-label-background: #222225;
+	}
+	.el-skeleton {
+		--el-skeleton-color: #434343;
+	}
+	.el-collapse {
+		--el-collapse-header-bg-color: none;
+		--el-collapse-content-bg-color: none;
+	}
+	.el-calendar {
+		--el-calendar-selected-bg-color: #222225;
+	}
+	.el-dropdown__popper {
+		--el-dropdown-menuItem-hover-fill: #222225;
+	}
+	.el-date-range-picker {
+		--el-datepicker-inrange-bg-color: #383838;
+		--el-datepicker-inrange-hover-bg-color: #383838;
+	}
+
+	/* 布局 */
+	.adminui-header {background: $--card-background;border-bottom: 1px solid $--border-color;}
+	.adminui-header-menu .el-menu .el-sub-menu__title {height:59px;line-height: 59px;}
+	.aminui-side-split {background: $--background;}
+	.aminui-side-split li {color: $--text-color;}
+	.aminui-side-split li.active {color: #fff;}
+	.aminui-side {background: $--card-background;border-color: $--border-color;}
+	.adminui-side-top {border-color: $--border-color;}
+	.adminui-side-top h2 {color: $--text-color;}
+	.adminui-side-bottom {border-color: $--border-color;}
+	.adminui-main {background: $--background;}
+	.adminui-topbar {background: $--card-background;border-color: $--border-color;color: $--text-color;}
+	.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, $--background, transparent);}
+	.adminui-tags {background: $--card-background;border-color: $--border-color;}
+	.adminui-tags li::after {display: none;}
+	.adminui-tags li:hover {background: $--background-translucent;}
+	.adminui-tags li.active {background: $--color;}
+	.drawerBG {background: $--background;}
+
+	.el-card {background: $--card-background;border-color: $--card-background;color: $--text-color;}
+	.el-card__header {color: $--text-color;}
+
+	.el-main.nopadding {background: $--card-background !important;border-color: $--border-color;}
+	.el-header {background: $--card-background;border-color: $--border-color;}
+	.el-aside {background: $--card-background;border-color: $--border-color !important;}
+	.el-footer {background: $--card-background;border-color: $--border-color;}
+
+	.el-tree {background: none;color: $--text-color;}
+	.el-tree-node:focus>.el-tree-node__content {background: $--background-translucent}
+	.el-tree-node__content:hover {background: $--background-translucent;}
+	.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {background: $--background-translucent;}
+
+	.el-table {background: $--card-background;color: $--text-color;}
+	.el-table thead.is-group th {background: $--background-translucent}
+	.el-table th.is-sortable:hover {background: $--background-translucent}
+	.el-table tr {background: #2e2e2e;}
+	.el-table--striped .el-table__body tr.el-table__row--striped td {background: #2b2b2b;}
+	.el-table .el-table__body-wrapper {background: $--background;}
+	.el-table__header-wrapper tr th.el-table-fixed-column--right {background: var(--el-table-header-bg-color);}
+	.el-table__body-wrapper tr td.el-table-fixed-column--right {background: #2e2e2e;}
+	.el-table__header-wrapper tr th.el-table-fixed-column--left {background: var(--el-table-header-bg-color);}
+	.el-table__body-wrapper tr td.el-table-fixed-column--left {background: #2e2e2e;}
+	.el-table__body tr.hover-row>td.el-table__cell {background-color: var(--el-table-row-hover-bg-color);}
+
+	.el-menu {background: $--card-background;}
+	.el-menu-item {color: $--text-color;}
+	.el-menu-item:hover {background: $--background-translucent;}
+	.el-menu-item.is-active {background: $--background;color: $--color;}
+	.el-sub-menu__title:hover {background: $--background-translucent;}
+	.el-menu--horizontal .el-menu-item {background: none;}
+	.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {background: $--background-translucent;}
+
+	.el-loading-mask {background-color: rgba(0,0,0,0.5);}
+
+	.el-tabs--border-card {background: $--card-background;}
+	.el-tabs--border-card>.el-tabs__header {background: $--background;}
+	.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {background: $--card-background;}
+	.el-tabs__item {color: $--text-color;}
+	.el-tabs__nav-wrap::after {background: $--border-color;}
+
+	.el-radio-button__inner {border-color: $--border-color;color: $--text-color;}
+	.el-radio-button:first-child .el-radio-button__inner {border-left-color: $--border-color;}
+
+	.el-checkbox-button__inner {border-color: $--border-color;color: $--text-color;}
+	.el-checkbox-button:first-child .el-checkbox-button__inner {border-left-color: $--border-color;}
+
+	.el-input-number__decrease, .el-input-number__increase {background: #383838;color: $--text-color;}
+	.el-input-number.is-disabled .el-input-number__decrease, .el-input-number.is-disabled .el-input-number__increase {background: $--card-background;}
+
+	.el-select .el-select__tags .el-tag {background: $--background-translucent;}
+	.el-switch__core .el-switch__action {background: $--text-color;}
+
+	.el-picker__popper.el-popper[role=tooltip] {background: $--card-background;}
+	.el-picker-panel {background: $--card-background;}
+	.el-picker-panel__footer {background: $--card-background;}
+	.el-picker-panel .el-time-panel {background: $--card-background;}
+	.el-time-spinner__item:hover:not(.disabled):not(.active) {background: $--background-translucent;}
+	.el-date-editor .el-range-input {background: none;}
+
+	.el-dropdown__popper.el-popper[role=tooltip] {background: $--card-background;}
+	.el-dropdown-menu {background: $--card-background;}
+	.el-dropdown-menu__item--divided:before {background: $--card-background;}
+
+	.el-tag.el-tag--light {background: none;border-color: $--border-color;}
+
+	.el-button.is-plain {background: none;border-color: var(--el-button-hover-color);}
+	.el-button.is-plain:active {background: #383838;}
+	.el-button.is-plain:hover,.el-button.is-plain:focus {color: var(--el-button-hover-color);border-color: var(--el-button-hover-color);}
+	.el-button--default:hover, .el-button--default:focus {background: #383838;border-color: var(--el-color-primary);}
+	.el-button--default.is-plain {border-color: var(--el-button-border-color);}
+	.el-button--default.is-plain:hover,.el-button--default.is-plain:focus {background: none;border-color: var(--el-border-color-hover);}
+	.el-button--default.is-plain:active {background: #383838;}
+	.el-button--primary {color: #fff;}
+	.el-button--primary:focus, .el-button--primary:hover {background: var(--el-color-primary-light-2);border-color: var(--el-color-primary-light-2);}
+	.el-button--primary:active {background-color: var(--el-color-primary-darken-1, #0d84ff);border-color: var(--el-color-primary-darken-1, #0d84ff);color: #fff;}
+	.el-button--primary.is-plain {border-color: var(--el-color-primary);color: var(--el-color-primary);}
+	.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {background: none;border-color: var(--el-color-primary);color: var(--el-color-primary-light-2);}
+	.el-button--primary.is-plain:active {background: #383838;}
+	.el-button.is-disabled, .el-button.is-disabled:hover {background: #383838;border-color: $--border-color;color: var(--el-button-disabled-font-color);}
+
+	.el-button--success, .el-button--info, .el-button--warning, .el-button--danger {color: #fff;}
+
+
+	.el-badge__content {color: #fff;}
+
+	.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {background: #383838;}
+	.el-pagination.is-background .el-pager li:not(.disabled).active {color: #fff;}
+
+	.el-descriptions__body {background: none;}
+
+	.el-alert--info.is-light {background: #383838;}
+	.el-alert--success.is-light {background: #273a1d;}
+	.el-alert--warning.is-light {background: #3e2e15;}
+	.el-alert--error.is-light {background: #3a2323;}
+
+	.el-divider__text {background: $--card-background;}
+
+	.el-calendar {background: $--card-background;}
+	.el-calendar__title {color: $--text-color;}
+
+	.el-switch__core .el-switch__inner .is-icon, .el-switch__core .el-switch__inner .is-text {color: #fff;}
+
+	.el-step .el-step__icon {background: $--card-background;}
+
+	.el-popper.is-light {background: $--card-background;color: #d0d0d0;}
+	.el-popper.is-light .el-popper__arrow::before {background: $--card-background;}
+
+	.el-color-picker__trigger {border-color: $--border-color;}
+
+	.el-empty__image svg {
+		#Rectangle-Copy {fill: #111;}
+		#Rectangle-Copy-10 {fill: #555;}
+		#Rectangle-Copy-11 {fill: #333;}
+		#Rectangle-Copy-12 {fill: #424242;}
+		#Rectangle-Copy-13 {fill: #555;}
+		#Rectangle-Copy-14 {fill: #555;}
+		#Rectangle-Copy-15 {fill: #2b2b2b;}
+		#Rectangle-Copy-18 {fill: #555;}
+		#Mask {fill: #222;}
+		#Oval-Copy-2 {fill: #1d1d1d;}
+	}
+
+	.sc-title {color: #d0d0d0;border-color: $--border-color;}
+	.sc-upload-uploader {border-color: $--border-color;}
+	.setting-column .setting-column__title {border-color: $--border-color;}
+	.setting-column .setting-column__bottom {border-color: $--border-color;}
+}
diff --git a/ui/src/utils/color.js b/ui/src/utils/color.js
new file mode 100644
index 0000000..295d011
--- /dev/null
+++ b/ui/src/utils/color.js
@@ -0,0 +1,29 @@
+export default {
+	//hex颜色转rgb颜色
+	HexToRgb(str) {
+		str = str.replace("#", "")
+		var hxs = str.match(/../g)
+		for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16)
+		return hxs
+	},
+	//rgb颜色转hex颜色
+	RgbToHex(a, b, c) {
+		var hexs = [a.toString(16), b.toString(16), c.toString(16)]
+		for (var i = 0; i < 3; i++) {
+			if (hexs[i].length == 1) hexs[i] = "0" + hexs[i]
+		}
+		return "#" + hexs.join("");
+	},
+	//加深
+	darken(color, level) {
+		var rgbc = this.HexToRgb(color)
+		for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level))
+		return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
+	},
+	//变淡
+	lighten(color, level) {
+		var rgbc = this.HexToRgb(color)
+		for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])
+		return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
+	}
+}
diff --git a/ui/src/utils/errorHandler.js b/ui/src/utils/errorHandler.js
new file mode 100644
index 0000000..d5d81dd
--- /dev/null
+++ b/ui/src/utils/errorHandler.js
@@ -0,0 +1,33 @@
+/**
+ * 全局代码错误捕捉
+ * 比如 null.length 就会被捕捉到
+ */
+
+export default (error, vm)=>{
+	//过滤HTTP请求错误
+	if(error.status){
+		return false
+	}
+	
+	var errorMap = {
+		InternalError: "Javascript引擎内部错误",
+		ReferenceError: "未找到对象",
+		TypeError: "使用了错误的类型或对象",
+		RangeError: "使用内置对象时，参数超范围",
+		SyntaxError: "语法错误",
+		EvalError: "错误的使用了Eval",
+		URIError: "URI错误"
+	}
+	var errorName = errorMap[error.name] || "未知错误"
+
+	console.warn(`[SCUI error]: ${error}`);
+	console.error(error);
+	//throw error;
+
+	vm.$nextTick(() => {
+		vm.$notify.error({
+			title: errorName,
+			message: error
+		});
+	})
+}
diff --git a/ui/src/utils/permission.js b/ui/src/utils/permission.js
new file mode 100644
index 0000000..a8dd63e
--- /dev/null
+++ b/ui/src/utils/permission.js
@@ -0,0 +1,23 @@
+import tool from '@/utils/tool';
+
+export function permission(data) {
+	let permissions = tool.data.get("PERMISSIONS");
+	if(!permissions){
+		return false;
+	}
+	let isHave = permissions.includes(data);
+	return isHave;
+}
+
+export function rolePermission(data) {
+	let userInfo = tool.data.get("USER_INFO");
+	if(!userInfo){
+		return false;
+	}
+	let role = userInfo.role;
+	if(!role){
+		return false;
+	}
+	let isHave = role.includes(data);
+	return isHave;
+}
diff --git a/ui/src/utils/print.js b/ui/src/utils/print.js
new file mode 100644
index 0000000..fb6d422
--- /dev/null
+++ b/ui/src/utils/print.js
@@ -0,0 +1,137 @@
+// 打印类属性、方法定义
+/* eslint-disable */
+const Print = function(dom, options) {
+	if (!(this instanceof Print)) return new Print(dom, options);
+
+	this.options = this.extend({
+		'noPrint': '.no-print'
+	}, options);
+
+	if ((typeof dom) === "string") {
+		try{
+			this.dom = document.querySelector(dom);
+		}catch{
+			var createDom = document.createElement("div")
+				createDom.innerHTML = dom
+			this.dom = createDom;
+		};
+	} else {
+		this.isDOM(dom)
+		this.dom = this.isDOM(dom) ? dom : dom.$el;
+	}
+
+	this.init();
+};
+Print.prototype = {
+	init: function() {
+		var content = this.getStyle() + this.getHtml();
+		this.writeIframe(content);
+	},
+	extend: function(obj, obj2) {
+		for (var k in obj2) {
+			obj[k] = obj2[k];
+		}
+		return obj;
+	},
+
+	getStyle: function() {
+		var str = "",
+			styles = document.querySelectorAll('style,link');
+		for (var i = 0; i < styles.length; i++) {
+			str += styles[i].outerHTML;
+		}
+		str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') +
+			"{display:none;}</style>";
+		str += "<style>html,body{background-color:#fff;}</style>";
+		return str;
+	},
+
+	getHtml: function() {
+		var inputs = document.querySelectorAll('input');
+		var textareas = document.querySelectorAll('textarea');
+		var selects = document.querySelectorAll('select');
+
+		for (var k = 0; k < inputs.length; k++) {
+			if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
+				if (inputs[k].checked == true) {
+					inputs[k].setAttribute('checked', "checked")
+				} else {
+					inputs[k].removeAttribute('checked')
+				}
+			} else if (inputs[k].type == "text") {
+				inputs[k].setAttribute('value', inputs[k].value)
+			} else {
+				inputs[k].setAttribute('value', inputs[k].value)
+			}
+		}
+
+		for (var k2 = 0; k2 < textareas.length; k2++) {
+			if (textareas[k2].type == 'textarea') {
+				textareas[k2].innerHTML = textareas[k2].value
+			}
+		}
+
+		for (var k3 = 0; k3 < selects.length; k3++) {
+			if (selects[k3].type == 'select-one') {
+				var child = selects[k3].children;
+				for (var i in child) {
+					if (child[i].tagName == 'OPTION') {
+						if (child[i].selected == true) {
+							child[i].setAttribute('selected', "selected")
+						} else {
+							child[i].removeAttribute('selected')
+						}
+					}
+				}
+			}
+		}
+
+		return this.dom.outerHTML;
+	},
+
+	writeIframe: function(content) {
+		var w, doc, iframe = document.createElement('iframe'),
+			f = document.body.appendChild(iframe);
+		iframe.id = "myIframe";
+		//iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
+		iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
+		w = f.contentWindow || f.contentDocument;
+		doc = f.contentDocument || f.contentWindow.document;
+		doc.open();
+		doc.write(content);
+		doc.close();
+		var _this = this
+		iframe.onload = function() {
+			_this.toPrint(w);
+			setTimeout(function() {
+				document.body.removeChild(iframe)
+			}, 100)
+		}
+	},
+
+	toPrint: function(frameWindow) {
+		try {
+			setTimeout(function() {
+				frameWindow.focus();
+				try {
+					if (!frameWindow.document.execCommand('print', false, null)) {
+						frameWindow.print();
+					}
+				} catch (e) {
+					frameWindow.print();
+				}
+				frameWindow.close();
+			}, 10);
+		} catch (err) {
+			console.log('err', err);
+		}
+	},
+	isDOM: (typeof HTMLElement === 'object') ?
+		function(obj) {
+			return obj instanceof HTMLElement;
+		} : function(obj) {
+			return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
+		}
+};
+
+export default Print
diff --git a/ui/src/utils/request.js b/ui/src/utils/request.js
new file mode 100644
index 0000000..70c9db1
--- /dev/null
+++ b/ui/src/utils/request.js
@@ -0,0 +1,200 @@
+import axios from 'axios';
+import { ElNotification, ElMessageBox } from 'element-plus';
+import sysConfig from "@/config";
+import tool from '@/utils/tool';
+import router from '@/router';
+
+axios.defaults.baseURL = ''
+
+axios.defaults.timeout = sysConfig.TIMEOUT
+
+// HTTP request 拦截器
+axios.interceptors.request.use(
+	(config) => {
+		let token = tool.data.get("TOKEN");
+		if(token){
+			config.headers[sysConfig.TOKEN_NAME] = sysConfig.TOKEN_PREFIX + token
+		}
+		if(!sysConfig.REQUEST_CACHE && config.method == 'get'){
+			config.params = config.params || {};
+			config.params['_'] = new Date().getTime();
+		}
+		Object.assign(config.headers, sysConfig.HEADERS)
+		return config;
+	},
+	(error) => {
+		return Promise.reject(error);
+	}
+);
+
+// HTTP response 拦截器
+axios.interceptors.response.use(
+	(response) => {
+		return response;
+	},
+	(error) => {
+		if (error.response) {
+			if (error.response.status == 404) {
+				ElNotification.error({
+					title: '请求错误',
+					message: "Status:404，正在请求不存在的服务器记录！"
+				});
+			} else if (error.response.status == 500) {
+				ElNotification.error({
+					title: '请求错误',
+					message: error.response.data.message || "Status:500，服务器发生错误！"
+				});
+			} else if (error.response.status == 401) {
+				ElMessageBox.confirm('当前用户已被登出或无权限访问当前资源，请尝试重新登录后再操作。', '无权限访问', {
+					type: 'error',
+					closeOnClickModal: false,
+					center: true,
+					confirmButtonText: '重新登录'
+				}).then(() => {
+					router.replace({path: '/login'});
+				}).catch(() => {})
+			} else {
+				ElNotification.error({
+					title: '请求错误',
+					message: error.response.data.message || `Status:${error.response.status}，未知错误！`
+				});
+			}
+		} else {
+			ElNotification.error({
+				title: '请求错误',
+				message: "请求服务器无响应！"
+			});
+		}
+
+		return Promise.reject(error.response);
+	}
+);
+
+var http = {
+
+	/** get 请求
+	 * @param  {接口地址} url
+	 * @param  {请求参数} params
+	 * @param  {参数} config
+	 */
+	get: function(url, params={}, config={}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: 'get',
+				url: url,
+				params: params,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** post 请求
+	 * @param  {接口地址} url
+	 * @param  {请求参数} data
+	 * @param  {参数} config
+	 */
+	post: function(url, data={}, config={}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: 'post',
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** put 请求
+	 * @param  {接口地址} url
+	 * @param  {请求参数} data
+	 * @param  {参数} config
+	 */
+	put: function(url, data={}, config={}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: 'put',
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** patch 请求
+	 * @param  {接口地址} url
+	 * @param  {请求参数} data
+	 * @param  {参数} config
+	 */
+	patch: function(url, data={}, config={}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: 'patch',
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** delete 请求
+	 * @param  {接口地址} url
+	 * @param  {请求参数} data
+	 * @param  {参数} config
+	 */
+	delete: function(url, data={}, config={}) {
+		return new Promise((resolve, reject) => {
+			axios({
+				method: 'delete',
+				url: url,
+				data: data,
+				...config
+			}).then((response) => {
+				resolve(response.data);
+			}).catch((error) => {
+				reject(error);
+			})
+		})
+	},
+
+	/** jsonp 请求
+	 * @param  {接口地址} url
+	 * @param  {JSONP回调函数名称} name
+	 */
+	jsonp: function(url, name='jsonp'){
+		return new Promise((resolve) => {
+			var script = document.createElement('script')
+			var _id = `jsonp${Math.ceil(Math.random() * 1000000)}`
+			script.id = _id
+			script.type = 'text/javascript'
+			script.src = url
+			window[name] =(response) => {
+				resolve(response)
+				document.getElementsByTagName('head')[0].removeChild(script)
+				try {
+					delete window[name];
+				}catch(e){
+					window[name] = undefined;
+				}
+			}
+			document.getElementsByTagName('head')[0].appendChild(script)
+		})
+	}
+}
+
+export default http;
diff --git a/ui/src/utils/template.js b/ui/src/utils/template.js
new file mode 100644
index 0000000..e441bd6
--- /dev/null
+++ b/ui/src/utils/template.js
@@ -0,0 +1,316 @@
+/*!
+ * template.js v0.7.1 (https://github.com/yanhaijing/template.js)
+ * API https://github.com/yanhaijing/template.js/blob/master/doc/api.md
+ * Copyright 2015 yanhaijing. All Rights Reserved
+ * Licensed under MIT (https://github.com/yanhaijing/template.js/blob/master/MIT-LICENSE.txt)
+ */
+/* eslint-disable */
+;(function(root, factory) {
+    var template = factory(root);
+    if (typeof define === 'function' && define.amd) {
+        // AMD
+        define('template', function() {
+            return template;
+        });
+    } else if (typeof exports === 'object') {
+        // Node.js
+        module.exports = template;
+    } else {
+        // Browser globals
+        var _template = root.template;
+
+        template.noConflict = function() {
+            if (root.template === template) {
+                root.template = _template;
+            }
+
+            return template;
+        };
+        root.template = template;
+    }
+}(this, function(root) {
+    'use strict';
+    var o = {
+        sTag: '<%',//开始标签
+        eTag: '%>',//结束标签
+        compress: false,//是否压缩html
+        escape: true, //默认输出是否进行HTML转义
+        error: function (e) {}//错误回调
+    };
+    var functionMap = {}; //内部函数对象
+    //修饰器前缀
+    var modifierMap = {
+        '': function (param) {return nothing(param)},
+        'h': function (param) {return encodeHTML(param)},
+        'u': function (param) {return encodeURI(param)}
+    };
+
+    var toString = {}.toString;
+    var slice = [].slice;
+    function type(x) {
+        if(x === null){
+            return 'null';
+        }
+
+        var t= typeof x;
+
+        if(t !== 'object'){
+            return t;
+        }
+
+        var c = toString.call(x).slice(8, -1).toLowerCase();
+        if(c !== 'object'){
+            return c;
+        }
+
+        if(x.constructor==Object){
+            return c;
+        }
+
+        return 'unknown';
+    }
+
+    function isObject(obj) {
+        return type(obj) === 'object';
+    }
+    function isFunction(fn) {
+        return type(fn) === 'function';
+    }
+    function isString(str) {
+        return type(str) === 'string';
+    }
+    function extend() {
+        var target = arguments[0] || {};
+        var arrs = slice.call(arguments, 1);
+        var len = arrs.length;
+     
+        for (var i = 0; i < len; i++) {
+            var arr = arrs[i];
+            for (var name in arr) {
+                target[name] = arr[name];
+            }
+     
+        }
+        return target;
+    }
+    function clone() {
+        var args = slice.call(arguments);
+        return extend.apply(null, [{}].concat(args));
+    }
+    function nothing(param) {
+        return param;
+    }
+    function encodeHTML(source) {
+        return String(source)
+            .replace(/&/g,'&amp;')
+            .replace(/</g,'&lt;')
+            .replace(/>/g,'&gt;')
+            .replace(/\\/g,'&#92;')
+            .replace(/"/g,'&quot;')
+            .replace(/'/g,'&#39;');
+    }
+    function compress(html) {
+        return html.replace(/\s+/g, ' ').replace(/<!--[\w\W]*?-->/g, '');
+    }
+    function consoleAdapter(cmd, msg) {
+        typeof console !== 'undefined' && console[cmd] && console[cmd](msg);
+    }
+    function handelError(e) {
+        var message = 'template.js error\n\n';
+
+        for (var key in e) {
+            message += '<' + key + '>\n' + e[key] + '\n\n';
+        }
+        message += '<message>\n' + e.message + '\n\n';
+        consoleAdapter('error', message);
+
+        o.error(e);
+        function error() {
+            return 'template.js error';
+        }
+        error.toString = function () {
+            return '__code__ = "template.js error"';
+        }
+        return error;
+    }
+    function parse(tpl, opt) {
+        var code = '';
+        var sTag = opt.sTag;
+        var eTag = opt.eTag;
+        var escape = opt.escape;
+        function parsehtml(line) {
+            // 单双引号转义，换行符替换为空格
+            line = line.replace(/('|")/g, '\\$1');
+            var lineList = line.split('\n');
+            var code = '';
+            for (var i = 0; i < lineList.length; i++) {
+                code += ';__code__ += ("' + lineList[i] + (i === lineList.length - 1 ? '")\n' : '\\n")\n');
+            }
+            return code;
+        }
+        function parsejs(line) {              
+            //var reg = /^(:?)(.*?)=(.*)$/;
+            var reg = /^(?:=|(:.*?)=)(.*)$/
+            var html;
+            var arr;
+            var modifier;
+
+            // = := :*=
+            // :h=123 [':h=123', 'h', '123']
+            if (arr = reg.exec(line)) {
+                html = arr[2]; // 输出
+                if (Boolean(arr[1])) {
+                    // :开头
+                    modifier = arr[1].slice(1);
+                } else {
+                    // = 开头
+                    modifier = escape ? 'h' : '';
+                }
+
+                return ';__code__ += __modifierMap__["' + modifier + '"](typeof (' + html + ') !== "undefined" ? (' + html + ') : "")\n';
+            }
+            
+            //原生js
+            return ';' + line + '\n';
+        }
+
+        var tokens = tpl.split(sTag);
+
+        for (var i = 0, len = tokens.length; i < len; i++) {
+            var token = tokens[i].split(eTag);
+
+            if (token.length === 1) {
+                code += parsehtml(token[0]);
+            } else {
+                code += parsejs(token[0], true);
+                if (token[1]) {
+                    code += parsehtml(token[1]);
+                }
+            }
+        }
+        return code;
+    }
+    function compiler(tpl, opt) {
+        var mainCode = parse(tpl, opt);
+
+        var headerCode = '\n' + 
+        '    var html = (function (__data__, __modifierMap__) {\n' + 
+        '        var __str__ = "", __code__ = "";\n' + 
+        '        for(var key in __data__) {\n' + 
+        '            __str__+=("var " + key + "=__data__[\'" + key + "\'];");\n' + 
+        '        }\n' + 
+        '        eval(__str__);\n\n';
+
+        var footerCode = '\n' + 
+        '        ;return __code__;\n' + 
+        '    }(__data__, __modifierMap__));\n' + 
+        '    return html;\n';
+
+        var code = headerCode + mainCode + footerCode;
+        code = code.replace(/[\r]/g, ' '); // ie 7 8 会报错，不知道为什么
+        try {
+            var Render = new Function('__data__', '__modifierMap__', code); 
+            Render.toString = function () {
+                return mainCode;
+            }
+            return Render;
+        } catch(e) {
+            e.temp = 'function anonymous(__data__, __modifierMap__) {' + code + '}';
+            throw e;
+        }  
+    }
+    function compile(tpl, opt) {
+        opt = clone(o, opt);
+
+        try {
+            var Render = compiler(tpl, opt);
+        } catch(e) {
+            e.name = 'CompileError';
+            e.tpl = tpl;
+            e.render = e.temp;
+            delete e.temp;
+            return handelError(e);
+        }
+
+        function render(data) {
+            data = clone(functionMap, data);
+            try {
+                var html = Render(data, modifierMap);
+                html = opt.compress ? compress(html) : html;
+                return html;
+            } catch(e) {
+                e.name = 'RenderError';
+                e.tpl = tpl;
+                e.render = Render.toString();
+                return handelError(e)();
+            }            
+        }
+
+        render.toString = function () {
+            return Render.toString();
+        };
+        return render;
+    }
+    function template(tpl, data) {
+        if (typeof tpl !== 'string') {
+            return '';
+        }
+
+        var fn = compile(tpl);
+        if (!isObject(data)) {
+            return fn;
+        }
+
+        return fn(data);
+    }
+
+    template.config = function (option) {
+        if (isObject(option)) {
+            o = extend(o, option);
+        }
+        return clone(o);
+    };
+
+    template.registerFunction = function(name, fn) {
+        if (!isString(name)) {
+            return clone(functionMap);
+        }
+        if (!isFunction(fn)) {
+            return functionMap[name];
+        }
+
+        return functionMap[name] = fn;
+    }
+    template.unregisterFunction = function (name) {
+        if (!isString(name)) {
+            return false;
+        }
+        delete functionMap[name];
+        return true;
+    }
+
+    template.registerModifier = function(name, fn) {
+        if (!isString(name)) {
+            return clone(modifierMap);
+        }
+        if (!isFunction(fn)) {
+            return modifierMap[name];
+        }
+
+        return modifierMap[name] = fn;
+    }
+    template.unregisterModifier = function (name) {
+        if (!isString(name)) {
+            return false;
+        }
+        delete modifierMap[name];
+        return true;
+    }
+
+    template.__encodeHTML = encodeHTML;
+    template.__compress = compress;
+    template.__handelError = handelError;
+    template.__compile = compile;
+    template.version = '0.7.1';
+    return template;
+}));
\ No newline at end of file
diff --git a/ui/src/utils/tool.js b/ui/src/utils/tool.js
new file mode 100644
index 0000000..c11ef73
--- /dev/null
+++ b/ui/src/utils/tool.js
@@ -0,0 +1,157 @@
+/*
+ * @Descripttion: 工具集
+ * @version: 1.1
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年7月20日10:58:41
+ */
+
+import CryptoJS from 'crypto-js';
+
+const tool = {}
+
+/* localStorage */
+tool.data = {
+	set(table, settings) {
+		var _set = JSON.stringify(settings)
+		return localStorage.setItem(table, _set);
+	},
+	get(table) {
+		var data = localStorage.getItem(table);
+		try {
+			data = JSON.parse(data)
+		} catch (err) {
+			return null
+		}
+		return data;
+	},
+	remove(table) {
+		return localStorage.removeItem(table);
+	},
+	clear() {
+		return localStorage.clear();
+	}
+}
+
+/*sessionStorage*/
+tool.session = {
+	set(table, settings) {
+		var _set = JSON.stringify(settings)
+		return sessionStorage.setItem(table, _set);
+	},
+	get(table) {
+		var data = sessionStorage.getItem(table);
+		try {
+			data = JSON.parse(data)
+		} catch (err) {
+			return null
+		}
+		return data;
+	},
+	remove(table) {
+		return sessionStorage.removeItem(table);
+	},
+	clear() {
+		return sessionStorage.clear();
+	}
+}
+
+/* Fullscreen */
+tool.screen = function (element) {
+	var isFull = !!(document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
+	if(isFull){
+		if(document.exitFullscreen) {
+			document.exitFullscreen();
+		}else if (document.msExitFullscreen) {
+			document.msExitFullscreen();
+		}else if (document.mozCancelFullScreen) {
+			document.mozCancelFullScreen();
+		}else if (document.webkitExitFullscreen) {
+			document.webkitExitFullscreen();
+		}
+	}else{
+		if(element.requestFullscreen) {
+			element.requestFullscreen();
+		}else if(element.msRequestFullscreen) {
+			element.msRequestFullscreen();
+		}else if(element.mozRequestFullScreen) {
+			element.mozRequestFullScreen();
+		}else if(element.webkitRequestFullscreen) {
+			element.webkitRequestFullscreen();
+		}
+	}
+}
+
+/* 复制对象 */
+tool.objCopy = function (obj) {
+	return JSON.parse(JSON.stringify(obj));
+}
+
+/* 日期格式化 */
+tool.dateFormat = function (date, fmt='yyyy-MM-dd hh:mm:ss') {
+	date = new Date(date)
+	var o = {
+		"M+" : date.getMonth()+1,                 //月份
+		"d+" : date.getDate(),                    //日
+		"h+" : date.getHours(),                   //小时
+		"m+" : date.getMinutes(),                 //分
+		"s+" : date.getSeconds(),                 //秒
+		"q+" : Math.floor((date.getMonth()+3)/3), //季度
+		"S"  : date.getMilliseconds()             //毫秒
+	};
+	if(/(y+)/.test(fmt)) {
+		fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));
+	}
+	for(var k in o) {
+		if(new RegExp("("+ k +")").test(fmt)){
+			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
+		}
+	}
+	return fmt;
+}
+
+/* 千分符 */
+tool.groupSeparator = function (num) {
+	num = num + '';
+	if(!num.includes('.')){
+		num += '.'
+	}
+	return num.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
+		return $1 + ',';
+	}).replace(/\.$/, '');
+}
+
+/* 常用加解密 */
+tool.crypto = {
+	//MD5加密
+	MD5(data){
+		return CryptoJS.MD5(data).toString()
+	},
+	//BASE64加解密
+	BASE64: {
+		encrypt(data){
+			return CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(data))
+		},
+		decrypt(cipher){
+			return CryptoJS.enc.Base64.parse(cipher).toString(CryptoJS.enc.Utf8)
+		}
+	},
+	//AES加解密
+	AES: {
+		encrypt(data, secretKey){
+			const result = CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(secretKey), {
+				mode: CryptoJS.mode.ECB,
+				padding: CryptoJS.pad.Pkcs7
+			})
+			return result.toString()
+		},
+		decrypt(cipher, secretKey){
+			const result = CryptoJS.AES.decrypt(cipher, CryptoJS.enc.Utf8.parse(secretKey), {
+				mode: CryptoJS.mode.ECB,
+				padding: CryptoJS.pad.Pkcs7
+			})
+			return CryptoJS.enc.Utf8.stringify(result);
+		}
+	}
+}
+
+export default tool
diff --git a/ui/src/utils/useTabs.js b/ui/src/utils/useTabs.js
new file mode 100644
index 0000000..8813e9f
--- /dev/null
+++ b/ui/src/utils/useTabs.js
@@ -0,0 +1,61 @@
+import { nextTick  } from 'vue'
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css'
+import router from '@/router'
+import store from '@/store'
+
+export default {
+	//刷新标签
+	refresh() {
+		NProgress.start()
+		const route = router.currentRoute.value
+		store.commit("removeKeepLive", route.name)
+		store.commit("setRouteShow", false)
+		nextTick(() => {
+			store.commit("pushKeepLive", route.name)
+			store.commit("setRouteShow", true)
+			NProgress.done()
+		})
+	},
+	//关闭标签
+	close(tag) {
+		const route = tag || router.currentRoute.value
+		store.commit("removeViewTags", route)
+		store.commit("removeIframeList", route)
+		store.commit("removeKeepLive", route.name)
+		const tagList = store.state.viewTags.viewTags
+		const latestView = tagList.slice(-1)[0]
+		if (latestView) {
+			router.push(latestView)
+		} else {
+			router.push('/')
+		}
+	},
+	//关闭标签后处理
+	closeNext(next) {
+		const route = router.currentRoute.value
+		store.commit("removeViewTags", route)
+		store.commit("removeIframeList", route)
+		store.commit("removeKeepLive", route.name)
+		if(next){
+			const tagList = store.state.viewTags.viewTags
+			next(tagList)
+		}
+	},
+	//关闭其他
+	closeOther() {
+		const route = router.currentRoute.value
+		const tagList = [...store.state.viewTags.viewTags]
+		tagList.forEach(tag => {
+			if(tag.meta&&tag.meta.affix || route.fullPath==tag.fullPath){
+				return true
+			}else{
+				this.close(tag)
+			}
+		})
+	},
+	//设置标题
+	setTitle(title){
+		store.commit("updateViewTagsTitle", title)
+	}
+}
diff --git a/ui/src/views/home/index.vue b/ui/src/views/home/index.vue
new file mode 100644
index 0000000..dae58c7
--- /dev/null
+++ b/ui/src/views/home/index.vue
@@ -0,0 +1,48 @@
+<template>
+	<div v-if="pageLoading">
+		<el-main>
+			<el-card shadow="never">
+				<el-skeleton :rows="1"></el-skeleton>
+			</el-card>
+			<el-card shadow="never" style="margin-top: 15px;">
+				<el-skeleton></el-skeleton>
+			</el-card>
+		</el-main>
+	</div>
+	<work v-if="dashboard=='1'" @on-mounted="onMounted"></work>
+	<widgets v-else @on-mounted="onMounted"></widgets>
+</template>
+
+<script>
+	import { defineAsyncComponent } from 'vue';
+	const work = defineAsyncComponent(() => import('./work'));
+	const widgets = defineAsyncComponent(() => import('./widgets'));
+
+	export default {
+		name: "dashboard",
+		components: {
+			work,
+			widgets
+		},
+		data(){
+			return {
+				pageLoading: true,
+				dashboard: '0'
+			}
+		},
+		created(){
+			this.dashboard = this.$TOOL.data.get("USER_INFO").dashboard || '0';
+		},
+		mounted(){
+
+		},
+		methods: {
+			onMounted(){
+				this.pageLoading = false
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/home/widgets/components/about.vue b/ui/src/views/home/widgets/components/about.vue
new file mode 100644
index 0000000..efe806e
--- /dev/null
+++ b/ui/src/views/home/widgets/components/about.vue
@@ -0,0 +1,27 @@
+<template>
+	<el-card shadow="hover" header="关于项目" class="item-background">
+		<p>高性能 / 精致 / 优雅。基于Vue3 + Element-Plus 的中后台前端解决方案，如果喜欢就点个星星支持一下。</p>
+		<p>
+			<a href='https://gitee.com/lolicode/scui' target="_blank">
+				<img src='https://gitee.com/lolicode/scui/badge/star.svg?theme=dark' alt='star' style="vertical-align: middle">
+			</a>
+		</p>
+	</el-card>
+</template>
+
+<script>
+	export default {
+		title: "关于项目",
+		icon: "el-icon-setting",
+		description: "点个星星支持一下",
+		data() {
+			return {
+				
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.item-background p {color: #999;margin-top:10px;line-height: 1.8;}
+</style>
diff --git a/ui/src/views/home/widgets/components/echarts.vue b/ui/src/views/home/widgets/components/echarts.vue
new file mode 100644
index 0000000..e9fd5ae
--- /dev/null
+++ b/ui/src/views/home/widgets/components/echarts.vue
@@ -0,0 +1,98 @@
+<template>
+	<el-card shadow="hover" header="实时收入" v-loading="loading">
+		<scEcharts ref="c1" height="300px" :option="option"></scEcharts>
+	</el-card>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	export default {
+		title: "实时收入",
+		icon: "el-icon-data-line",
+		description: "Echarts组件演示",
+		components: {
+			scEcharts
+		},
+		data() {
+			return {
+				loading: true,
+				option: {}
+			}
+		},
+		created() {
+			var _this = this;
+			setTimeout(function() {
+				_this.loading = false
+			}, 500);
+
+			var option = {
+				tooltip: {
+					trigger: 'axis'
+				},
+				xAxis: {
+					boundaryGap: false,
+					type: 'category',
+					data: (function (){
+						var now = new Date();
+						var res = [];
+						var len = 30;
+						while (len--) {
+							res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
+							now = new Date(now - 2000);
+						}
+						return res;
+					})()
+				},
+				yAxis: [{
+					type: 'value',
+					name: '价格',
+					"splitLine": {
+						"show": false
+					}
+				}],
+				series: [
+					{
+						name: '收入',
+						type: 'line',
+						symbol: 'none',
+						lineStyle: {
+							width: 1,
+							color: '#409EFF'
+						},
+						areaStyle: {
+							opacity: 0.1,
+							color: '#79bbff'
+						},
+						data: (function (){
+							var res = [];
+							var len = 30;
+							while (len--) {
+								res.push(Math.round(Math.random() * 0));
+							}
+							return res;
+						})()
+					},
+				],
+			};
+			this.option = option;
+
+		},
+		mounted(){
+			 var _this = this;
+			setInterval(function (){
+				var o = _this.option;
+
+				o.series[0].data.shift()
+				o.series[0].data.push(Math.round(Math.random() * 100));
+
+				o.xAxis.data.shift();
+				o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
+
+
+				//_this.$refs.c1.myChart.setOption(o)
+			},2100)
+
+		},
+	}
+</script>
diff --git a/ui/src/views/home/widgets/components/index.js b/ui/src/views/home/widgets/components/index.js
new file mode 100644
index 0000000..ec097fb
--- /dev/null
+++ b/ui/src/views/home/widgets/components/index.js
@@ -0,0 +1,12 @@
+import {markRaw} from 'vue';
+const resultComps = {}
+let requireComponent = require.context(
+	'./', // 在当前目录下查找
+	false, // 不遍历子文件夹
+	/\.vue$/ // 正则匹配 以 .vue结尾的文件
+)
+requireComponent.keys().forEach(fileName => {
+	let comp = requireComponent(fileName)
+	resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
+})
+export default markRaw(resultComps)
diff --git a/ui/src/views/home/widgets/components/progress.vue b/ui/src/views/home/widgets/components/progress.vue
new file mode 100644
index 0000000..994c082
--- /dev/null
+++ b/ui/src/views/home/widgets/components/progress.vue
@@ -0,0 +1,32 @@
+<template>
+	<el-card shadow="hover" header="进度环">
+		<div class="progress">
+			<el-progress type="dashboard" :percentage="85.5" :width="160">
+				<template #default="{ percentage }">
+				    <div class="percentage-value">{{ percentage }}%</div>
+				    <div class="percentage-label">当前进度</div>
+				  </template>
+			</el-progress>
+		</div>
+
+	</el-card>
+</template>
+
+<script>
+	export default {
+		title: "进度环",
+		icon: "el-icon-odometer",
+		description: "进度环原子组件演示",
+		data() {
+			return {
+
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.progress {text-align: center;}
+	.progress .percentage-value {font-size: 28px;}
+	.progress .percentage-label {font-size: 12px;margin-top: 10px;}
+</style>
diff --git a/ui/src/views/home/widgets/components/time.vue b/ui/src/views/home/widgets/components/time.vue
new file mode 100644
index 0000000..c551cbc
--- /dev/null
+++ b/ui/src/views/home/widgets/components/time.vue
@@ -0,0 +1,40 @@
+<template>
+	<el-card shadow="hover" header="时钟" class="item-background">
+		<div class="time">
+			<h2>{{ time }}</h2>
+			<p>{{ day }}</p>
+		</div>
+	</el-card>
+</template>
+
+<script>
+	export default {
+		title: "时钟",
+		icon: "el-icon-clock",
+		description: "演示部件效果",
+		data() {
+			return {
+				time: '',
+				day: ''
+			}
+		},
+		mounted() {
+			this.showTime()
+			setInterval(()=>{
+				this.showTime()
+			},1000)
+		},
+		methods: {
+			showTime(){
+				this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
+				this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.item-background {background: linear-gradient(to right, #8E54E9, #4776E6);color: #fff;}
+	.time h2 {font-size: 40px;}
+	.time p {font-size: 14px;margin-top: 13px;opacity: 0.7;}
+</style>
diff --git a/ui/src/views/home/widgets/components/ver.vue b/ui/src/views/home/widgets/components/ver.vue
new file mode 100644
index 0000000..d3b0d71
--- /dev/null
+++ b/ui/src/views/home/widgets/components/ver.vue
@@ -0,0 +1,41 @@
+<template>
+	<el-card shadow="hover" header="版本信息">
+		<div style="height: 210px;text-align: center;">
+			<img src="img/ver.svg" style="height:140px"/>
+			<h2 style="margin-top: 15px;">SCUI {{$CONFIG.CORE_VER}}</h2>
+			<p style="margin-top: 5px;">最新版本 {{ver}}</p>
+		</div>
+		<div style="margin-top: 20px;">
+			<el-button type="primary" plain round @click="golog">更新日志</el-button>
+			<el-button type="primary" plain round @click="gogit">gitee</el-button>
+		</div>
+	</el-card>
+</template>
+
+<script>
+	export default {
+		title: "版本信息",
+		icon: "el-icon-monitor",
+		description: "当前项目版本信息",
+		data() {
+			return {
+				ver: 'loading...'
+			}
+		},
+		mounted() {
+			this.getVer()
+		},
+		methods: {
+			async getVer(){
+				const ver = await this.$API.demo.ver.get()
+				this.ver = ver.data
+			},
+			golog(){
+				window.open("https://gitee.com/lolicode/scui/releases")
+			},
+			gogit(){
+				window.open("https://gitee.com/lolicode/scui")
+			}
+		}
+	}
+</script>
diff --git a/ui/src/views/home/widgets/components/welcome.vue b/ui/src/views/home/widgets/components/welcome.vue
new file mode 100644
index 0000000..b1bf536
--- /dev/null
+++ b/ui/src/views/home/widgets/components/welcome.vue
@@ -0,0 +1,59 @@
+<template>
+	<el-card shadow="hover" header="欢迎">
+		<div class="welcome">
+			<div class="logo">
+				<img src="img/logo.png">
+				<h2>欢迎体验 SCUI</h2>
+			</div>
+			<div class="tips">
+				<div class="tips-item">
+					<div class="tips-item-icon"><el-icon><el-icon-menu/></el-icon></div>
+					<div class="tips-item-message">这里是项目控制台，你可以点击右上方的“自定义”按钮来添加移除或者移动部件。</div>
+				</div>
+				<div class="tips-item">
+					<div class="tips-item-icon"><el-icon><el-icon-promotion/></el-icon></div>
+					<div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
+				</div>
+				<div class="tips-item">
+					<div class="tips-item-icon"><el-icon><el-icon-milk-tea/></el-icon></div>
+					<div class="tips-item-message">项目目的：让前端工作更快乐</div>
+				</div>
+			</div>
+			<div class="actions">
+				<el-button type="primary" icon="el-icon-check" size="large" @click="godoc">文档</el-button>
+			</div>
+		</div>
+	</el-card>
+</template>
+
+<script>
+	export default {
+		title: "欢迎",
+		icon: "el-icon-present",
+		description: "项目特色以及文档链接",
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			godoc(){
+				window.open("https://lolicode.gitee.io/scui-doc/")
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.welcome {}
+	.welcome .logo {text-align: center;}
+	.welcome .logo img {vertical-align: bottom;width: 100px;height: 100px;margin-bottom: 20px;}
+	.welcome .logo h2 {font-size: 30px;font-weight: normal;display: flex;align-items: center;justify-content: center;}
+
+	.tips {margin-top: 20px;padding:0 40px;}
+	.tips-item {display: flex;align-items: center;justify-content: center;padding:7.5px 0;}
+	.tips-item-icon {width: 40px;height:40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 18px;margin-right: 20px;color: var(--el-color-primary);background: rgba(180,180,180,0.1);}
+	.tips-item-message {flex: 1;font-size: 14px;}
+
+	.actions {text-align: center;margin: 40px 0 20px 0;}
+</style>
diff --git a/ui/src/views/home/widgets/index.vue b/ui/src/views/home/widgets/index.vue
new file mode 100644
index 0000000..713d204
--- /dev/null
+++ b/ui/src/views/home/widgets/index.vue
@@ -0,0 +1,255 @@
+<template>
+	<div :class="['widgets-home', customizing?'customizing':'']" ref="main">
+		<div class="widgets-content">
+			<div class="widgets-top">
+				<div class="widgets-top-title">
+					控制台
+				</div>
+				<div class="widgets-top-actions">
+					<el-button v-if="customizing" type="primary" icon="el-icon-check" round @click="save">完成</el-button>
+					<el-button v-else type="primary" icon="el-icon-edit" round @click="custom">自定义</el-button>
+				</div>
+			</div>
+			<div class="widgets" ref="widgets">
+				<div class="widgets-wrapper">
+					<div v-if="nowCompsList.length<=0" class="no-widgets">
+						<el-empty image="img/no-widgets.svg" description="没有部件啦" :image-size="280"></el-empty>
+					</div>
+					<el-row :gutter="15">
+						<el-col v-for="(item, index) in grid.layout" v-bind:key="index" :md="item" :xs="24">
+							<draggable v-model="grid.copmsList[index]" animation="200" handle=".customize-overlay" group="people" item-key="com" dragClass="aaaaa" force-fallback fallbackOnBody class="draggable-box">
+								<template #item="{ element }">
+									<div class="widgets-item">
+										<component :is="allComps[element]"></component>
+										<div v-if="customizing" class="customize-overlay">
+											<el-button class="close" type="danger" plain icon="el-icon-close" size="small" @click="remove(element)"></el-button>
+											<label><el-icon><component :is="allComps[element].icon" /></el-icon>{{ allComps[element].title }}</label>
+										</div>
+									</div>
+								</template>
+							</draggable>
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+		</div>
+		<div v-if="customizing" class="widgets-aside">
+			<el-container>
+				<el-header>
+					<div class="widgets-aside-title"><el-icon><el-icon-circle-plus-filled/></el-icon>添加部件</div>
+					<div class="widgets-aside-close" @click="close()"><el-icon><el-icon-close /></el-icon></div>
+				</el-header>
+				<el-header style="height:auto">
+					<div class="selectLayout">
+						<div class="selectLayout-item item01" :class="{active:grid.layout.join(',')=='12,6,6'}" @click="setLayout([12,6,6])">
+							<el-row :gutter="2">
+								<el-col :span="12"><span></span></el-col>
+								<el-col :span="6"><span></span></el-col>
+								<el-col :span="6"><span></span></el-col>
+							</el-row>
+						</div>
+						<div class="selectLayout-item item02" :class="{active:grid.layout.join(',')=='24,16,8'}" @click="setLayout([24,16,8])">
+							<el-row :gutter="2">
+								<el-col :span="24"><span></span></el-col>
+								<el-col :span="16"><span></span></el-col>
+								<el-col :span="8"><span></span></el-col>
+							</el-row>
+						</div>
+						<div class="selectLayout-item item03" :class="{active:grid.layout.join(',')=='24'}" @click="setLayout([24])">
+							<el-row :gutter="2">
+								<el-col :span="24"><span></span></el-col>
+								<el-col :span="24"><span></span></el-col>
+								<el-col :span="24"><span></span></el-col>
+							</el-row>
+						</div>
+					</div>
+				</el-header>
+				<el-main class="nopadding">
+					<div class="widgets-list">
+						<div v-if="myCompsList.length<=0" class="widgets-list-nodata">
+							<el-empty description="没有部件啦" :image-size="60"></el-empty>
+						</div>
+						<div v-for="item in myCompsList" :key="item.title" class="widgets-list-item">
+							<div class="item-logo"><el-icon><component :is="item.icon" /></el-icon></div>
+							<div class="item-info">
+								<h2>{{ item.title }}</h2>
+								<p>{{ item.description }}</p>
+							</div>
+							<div class="item-actions">
+								<el-button type="primary" icon="el-icon-plus" size="small" @click="push(item)"></el-button>
+							</div>
+						</div>
+					</div>
+				</el-main>
+				<el-footer style="height:51px;">
+					<el-button size="small" @click="backDefaul()">恢复默认</el-button>
+				</el-footer>
+			</el-container>
+		</div>
+	</div>
+</template>
+
+<script>
+	import draggable from 'vuedraggable'
+	import allComps from './components'
+
+	export default {
+		components: {
+			draggable
+		},
+		data() {
+			return {
+				customizing: false,
+				allComps: allComps,
+				selectLayout: [],
+				defaultGrid: this.$CONFIG.DEFAULT_GRID,
+				grid: []
+			}
+		},
+		created(){
+			this.grid = this.$TOOL.data.get("grid") || JSON.parse(JSON.stringify(this.defaultGrid))
+		},
+		mounted() {
+			this.$emit('on-mounted')
+		},
+		computed: {
+			allCompsList(){
+				var allCompsList = []
+				for(var key in this.allComps){
+					allCompsList.push({
+						key: key,
+						title: allComps[key].title,
+						icon: allComps[key].icon,
+						description: allComps[key].description
+					})
+				}
+				var myCopmsList = this.grid.copmsList.reduce(function(a, b){return a.concat(b)})
+				for(let comp of allCompsList){
+					const _item = myCopmsList.find((item)=>{return item === comp.key})
+					if(_item){
+						comp.disabled = true
+					}
+				}
+				return allCompsList
+			},
+			myCompsList(){
+				return this.allCompsList.filter(item => !item.disabled )
+			},
+			nowCompsList(){
+				return this.grid.copmsList.reduce(function(a, b){return a.concat(b)})
+			}
+		},
+		methods: {
+			//开启自定义
+			custom(){
+				this.customizing = true
+				const oldWidth = this.$refs.widgets.offsetWidth
+				this.$nextTick(() => {
+					const scale =  this.$refs.widgets.offsetWidth / oldWidth
+					this.$refs.widgets.style.setProperty('transform', `scale(${scale})`)
+				})
+			},
+			//设置布局
+			setLayout(layout){
+				this.grid.layout = layout
+				if(layout.join(',')=='24'){
+					this.grid.copmsList[0] = [...this.grid.copmsList[0],...this.grid.copmsList[1],...this.grid.copmsList[2]]
+					this.grid.copmsList[1] = []
+					this.grid.copmsList[2] = []
+				}
+			},
+			//追加
+			push(item){
+				let target = this.grid.copmsList[0]
+				target.push(item.key)
+			},
+			//隐藏组件
+			remove(item){
+				var newCopmsList = this.grid.copmsList
+				newCopmsList.forEach((obj, index) => {
+					var newObj = obj.filter(o=>o!=item)
+					newCopmsList[index] = newObj;
+				})
+			},
+			//保存
+			save(){
+				this.customizing = false
+				this.$refs.widgets.style.removeProperty('transform')
+				this.$TOOL.data.set("grid", this.grid)
+			},
+			//恢复默认
+			backDefaul(){
+				this.customizing = false
+				this.$refs.widgets.style.removeProperty('transform')
+				this.grid =  JSON.parse(JSON.stringify(this.defaultGrid))
+				this.$TOOL.data.remove("grid")
+			},
+			//关闭
+			close(){
+				this.customizing = false
+				this.$refs.widgets.style.removeProperty('transform')
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.widgets-home {display: flex;flex-direction: row;flex: 1;height: 100%;}
+	.widgets-content {flex: 1;overflow: auto;overflow-x:hidden;padding:15px;}
+	.widgets-aside {width: 360px;background: #fff;box-shadow: 0 0 10px rgba(0,0,0,.1);position: relative;overflow: auto;}
+	.widgets-aside-title {font-size: 14px;display: flex;align-items: center;justify-content: center;}
+	.widgets-aside-title i {margin-right: 10px;font-size: 18px;}
+	.widgets-aside-close {font-size: 18px;width:30px;height: 30px;display: flex;align-items: center;justify-content: center;border-radius: 3px;cursor: pointer;}
+	.widgets-aside-close:hover {background: rgba(180,180,180,0.1);}
+
+	.widgets-top {margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;}
+	.widgets-top-title {font-size: 18px;font-weight: bold;}
+
+	.widgets {transform-origin: top left;transition: transform .15s;}
+
+	.draggable-box {height: 100%;}
+
+	.customizing .widgets-wrapper {margin-right:-360px}
+	.customizing .widgets-wrapper .el-col {padding-bottom:15px;}
+	.customizing .widgets-wrapper .draggable-box {border: 1px dashed var(--el-color-primary);padding:15px;}
+	.customizing .widgets-wrapper .no-widgets {display: none;}
+	.customizing .widgets-item {position: relative;margin-bottom: 15px;}
+	.customize-overlay {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);cursor: move;}
+	.customize-overlay label {background: var(--el-color-primary);color: #fff;height:40px;padding:0 30px;border-radius: 40px;font-size: 18px;display: flex;align-items: center;justify-content: center;cursor: move;}
+	.customize-overlay label i {margin-right: 15px;font-size: 24px;}
+	.customize-overlay .close {position: absolute;top:15px;right:15px;}
+	.customize-overlay .close:focus, .customize-overlay .close:hover {background: var(--el-button-hover-color);}
+
+	.widgets-list {}
+	.widgets-list-item {display: flex;flex-direction: row;padding:15px;align-items: center;}
+	.widgets-list-item .item-logo {width: 40px;height: 40px;border-radius: 50%;background: rgba(180,180,180,0.1);display: flex;align-items: center;justify-content: center;font-size: 18px;margin-right: 15px;color: #6a8bad;}
+	.widgets-list-item .item-info {flex: 1;}
+	.widgets-list-item .item-info h2 {font-size: 16px;font-weight: normal;cursor: default;}
+	.widgets-list-item .item-info p {font-size: 12px;color: #999;cursor: default;}
+	.widgets-list-item:hover {background: rgba(180,180,180,0.1);}
+
+	.widgets-wrapper .sortable-ghost {opacity: 0.5;}
+
+	.selectLayout {width: 100%;display: flex;}
+	.selectLayout-item {width:60px;height:60px;border: 2px solid var(--el-border-color-light);padding:5px;cursor: pointer;margin-right: 15px;}
+	.selectLayout-item span {display: block;background: var(--el-border-color-light);height:46px;}
+	.selectLayout-item.item02 span {height:30px;}
+	.selectLayout-item.item02 .el-col:nth-child(1) span {height:14px;margin-bottom: 2px;}
+	.selectLayout-item.item03 span {height:14px;margin-bottom: 2px;}
+	.selectLayout-item:hover {border-color: var(--el-color-primary);}
+	.selectLayout-item.active {border-color: var(--el-color-primary);}
+	.selectLayout-item.active span {background: var(--el-color-primary);}
+
+
+	[data-theme=dark] {
+		.widgets-aside {background: #2b2b2b;}
+		.customize-overlay {background: rgba(43,43,43,0.9);}
+	}
+
+	@media (max-width: 992px){
+		.customizing .widgets {transform: scale(1) !important;}
+		.customizing .widgets-aside {width: 100%;position: absolute;top:50%;right:0;bottom:0;}
+		.customizing .widgets-wrapper {margin-right:0;}
+	}
+
+</style>
diff --git a/ui/src/views/home/work/components/myapp.vue b/ui/src/views/home/work/components/myapp.vue
new file mode 100644
index 0000000..57382cc
--- /dev/null
+++ b/ui/src/views/home/work/components/myapp.vue
@@ -0,0 +1,131 @@
+<template>
+	<div>
+		<ul class="myMods">
+			<li v-for="mod in myMods" :key="mod.path" :style="{background:mod.meta.color||'#909399'}">
+				<a v-if="mod.meta.type=='link'" :href="mod.path" target="_blank">
+					<el-icon><component :is="mod.meta.icon||el-icon-menu" /></el-icon>
+					<p>{{ mod.meta.title }}</p>
+				</a>
+				<router-link v-else :to="{ path: mod.path }">
+					<el-icon><component :is="mod.meta.icon||el-icon-menu" /></el-icon>
+					<p>{{ mod.meta.title }}</p>
+				</router-link>
+			</li>
+			<li class="modItem-add" @click="addMods">
+				<a href="javascript:void(0)">
+					<el-icon><el-icon-plus /></el-icon>
+				</a>
+			</li>
+		</ul>
+
+		<el-drawer title="添加应用" v-model="modsDrawer" :size="570" destroy-on-close>
+			<div class="setMods">
+				<h4>我的常用 ( {{myMods.length}} )</h4>
+				<draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="people">
+					<template #item="{ element }">
+						<li :style="{background:element.meta.color||'#909399'}">
+							<el-icon><component :is="element.meta.icon||el-icon-menu" /></el-icon>
+							<p>{{element.meta.title}}</p>
+						</li>
+					</template>
+				</draggable>
+			</div>
+			<div class="setMods">
+				<h4>全部应用 ( {{filterMods.length}} )</h4>
+				<draggable tag="ul" v-model="filterMods" animation="200" item-key="path" :sort="false" group="people">
+					<template #item="{ element }">
+						<li :style="{background:element.meta.color||'#909399'}">
+							<el-icon><component :is="element.meta.icon||el-icon-menu" /></el-icon>
+							<p>{{element.meta.title}}</p>
+						</li>
+					</template>
+				</draggable>
+			</div>
+			<template #footer>
+				<el-button @click="modsDrawer=false">取消</el-button>
+				<el-button type="primary" @click="saveMods">保存</el-button>
+			</template>
+		</el-drawer>
+	</div>
+</template>
+
+<script>
+	import draggable from 'vuedraggable'
+
+	export default {
+		components: {
+			draggable
+		},
+		data() {
+			return {
+				mods: [],
+				myMods: [],
+				myModsName: [],
+				filterMods: [],
+				modsDrawer: false
+			}
+		},
+		mounted(){
+			this.getMods()
+		},
+		methods: {
+			addMods(){
+				this.modsDrawer = true
+			},
+			getMods(){
+				//这里可用改为读取远程数据
+				this.myModsName = this.$TOOL.data.get("my-mods") || []
+				var menuTree = this.$TOOL.data.get("MENU")
+				this.filterMenu(menuTree)
+				this.myMods = this.mods.filter(item => {
+					return this.myModsName.includes(item.name)
+				})
+				this.filterMods =  this.mods.filter(item => {
+					return !this.myModsName.includes(item.name)
+				})
+			},
+			filterMenu(map){
+				map.forEach(item => {
+					if(item.meta.hidden){
+						return false
+					}
+					if(item.meta.type=='iframe'){
+						item.path = `/i/${item.name}`
+					}
+					if(item.children&&item.children.length > 0){
+						this.filterMenu(item.children)
+					}else{
+						this.mods.push(item)
+					}
+				})
+			},
+			saveMods(){
+				const myModsName = this.myMods.map(v => v.name)
+				this.$TOOL.data.set("my-mods", myModsName)
+				this.$message.success("设置常用成功")
+				this.modsDrawer = false
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.myMods {list-style:none;margin:-10px;}
+	.myMods li {display: inline-block;width: 100px;height:100px;vertical-align: top;transition:all 0.3s ease;margin:10px;border-radius:5px;}
+	.myMods li:hover {opacity: 0.8;}
+	.myMods li a {width: 100%;height: 100%;padding:10px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: #fff;}
+	.myMods li i {font-size: 26px;color: #fff;}
+	.myMods li p {font-size: 12px;color: #fff;margin-top: 10px;width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}
+
+	.modItem-add {border: 1px dashed #ddd;cursor: pointer;}
+	.modItem-add i {font-size: 30px;color: #999!important;}
+	.modItem-add:hover,.modItem-add:hover i {border-color: #409EFF;color: #409EFF!important;}
+
+	.setMods {padding:0 20px;}
+	.setMods h4 {font-size: 14px;font-weight: normal;}
+	.setMods ul {margin:20px -5px;min-height: 90px;}
+	.setMods li {display: inline-block;width: 80px;height:80px;text-align: center;margin:5px;color: #fff;vertical-align: top;padding:4px;padding-top:15px;cursor: move;border-radius: 3px;}
+	.setMods li i {font-size: 20px;}
+	.setMods li p {font-size: 12px;margin-top: 10px;}
+	.setMods li.sortable-ghost {opacity: 0.3;}
+</style>
diff --git a/ui/src/views/home/work/index.vue b/ui/src/views/home/work/index.vue
new file mode 100644
index 0000000..2c51266
--- /dev/null
+++ b/ui/src/views/home/work/index.vue
@@ -0,0 +1,37 @@
+<template>
+	<el-main>
+		<el-alert title="根据角色配置,可让不同角色访问不同的控制台视图,参数值在登录成功后返回 dashboard:{type}" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="15">
+			<el-col :lg="24">
+				<el-card shadow="never" header="我的常用">
+					<myapp></myapp>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import myapp from './components/myapp';
+
+	export default {
+		components: {
+			myapp
+		},
+		data() {
+			return {
+
+			}
+		},
+		mounted(){
+			this.$emit('on-mounted')
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/ui/src/views/other/about.vue b/ui/src/views/other/about.vue
new file mode 100644
index 0000000..fc2722c
--- /dev/null
+++ b/ui/src/views/other/about.vue
@@ -0,0 +1,52 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="24">
+				<el-card shadow="never" class="aboutTop">
+					<div class="aboutTop-info">
+						<img src="img/logo.png">
+						<h2>{{data.name}}</h2>
+						<p>{{data.version}}</p>
+					</div>
+				</el-card>
+				<el-card shadow="never" header="dependencies">
+					<el-descriptions border :column="3">
+						<el-descriptions-item v-for="(value, key) in data.dependencies" :key="key" :label="key">{{value}}</el-descriptions-item>
+					</el-descriptions>
+				</el-card>
+				<el-card shadow="never" header="devDependencies">
+					<el-descriptions border :column="3">
+						<el-descriptions-item v-for="(value, key) in data.devDependencies" :key="key" :label="key">{{value}}</el-descriptions-item>
+					</el-descriptions>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import packageJson from '../../../package.json'
+
+	export default {
+		name: 'about',
+		data() {
+			return {
+				data: packageJson
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.aboutTop {border:0;background: linear-gradient(to right, #8E54E9, #4776E6);color: #fff;}
+	.aboutTop-info {text-align: center}
+	.aboutTop-info img {width: 100px;}
+	.aboutTop-info h2 {font-size: 26px;margin-top: 15px;}
+	.aboutTop-info p {font-size: 16px;margin-top: 10px;}
+</style>
diff --git a/ui/src/views/other/directive.vue b/ui/src/views/other/directive.vue
new file mode 100644
index 0000000..6449990
--- /dev/null
+++ b/ui/src/views/other/directive.vue
@@ -0,0 +1,54 @@
+<template>
+	<el-main>
+		<el-card shadow="never" header="v-auth 高精度权限控制">
+			<el-button v-auth="'user.add'" type="primary">v-auth="'user.add'"</el-button>
+			<el-button v-auth="['user.no','user.add']" type="primary">v-auth="['user.no','user.add']"</el-button>
+			<el-alert title="v-auth指令 是$AUTH的语法糖, 原先需要使用v-if来判断是否有权限, 使用指令将减少代码冗余. 并且支持传入数组,有一项满足就判断有权限" style="margin-top: 20px;"></el-alert>
+		</el-card>
+		<el-card shadow="never" header="v-role 角色权限控制" style="margin-top: 15px;">
+			<el-button v-role="'admin'" type="primary">v-role="'admin'"</el-button>
+			<el-button v-role="['SA','admin']" type="primary">v-role="['SA','admin']"</el-button>
+			<el-alert title="v-role指令 是$ROLE的语法糖, 原理是判断是否含有用户所在的角色别名" style="margin-top: 20px;"></el-alert>
+		</el-card>
+		<el-card shadow="never" header="v-time 时间转换" style="margin-top: 15px;">
+			<p>
+				<el-tag v-time="1630117968295" format="yyyy-MM-dd hh:mm:ss"></el-tag>
+			</p>
+			<p style="margin-top: 15px;">
+				<el-tag v-time.tip="time1"></el-tag>
+			</p>
+			<p style="margin-top: 15px;">
+				<el-tag v-time.tip="time2"></el-tag>
+			</p>
+			<p style="margin-top: 15px;">
+				<el-tag v-time.tip="time3"></el-tag>
+			</p>
+			<el-alert title="指令方式日期时间转换,如设置'tip'修饰符将会转换成相对时间,并且每60秒自动更新" style="margin-top: 20px;"></el-alert>
+		</el-card>
+		<el-card shadow="never" header="v-copy 一键复制" style="margin-top: 15px;">
+			<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="copyText"></el-input>
+			<el-button v-copy="copyText" type="primary" style="margin-top: 15px;">复制</el-button>
+			<el-alert title="点击复制按钮会将文本框绑定的值复制到剪切板, 试着粘贴到其他地方看看效果" style="margin-top: 20px;"></el-alert>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'directive',
+		data() {
+			return {
+				time1: new Date(),
+				time2: new Date().setMinutes(new Date().getMinutes()-1),
+				time3: new Date().setMinutes(new Date().getMinutes()-120),
+				copyText: '测试复制内容'
+			}
+		},
+		created() {
+
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/other/fullpage.vue b/ui/src/views/other/fullpage.vue
new file mode 100644
index 0000000..d6ecd3d
--- /dev/null
+++ b/ui/src/views/other/fullpage.vue
@@ -0,0 +1,32 @@
+<template>
+	<el-container>
+		<el-header>
+			<el-page-header content="FullPage" @back="goBack" />
+		</el-header>
+		<el-main>
+			<el-empty description="FullPageMain"></el-empty>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+	export default {
+		name: 'fullpage',
+		data() {
+			return {
+
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			goBack(){
+				this.$router.go(-1)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/other/viewTags.vue b/ui/src/views/other/viewTags.vue
new file mode 100644
index 0000000..20bdc92
--- /dev/null
+++ b/ui/src/views/other/viewTags.vue
@@ -0,0 +1,82 @@
+<template>
+	<el-main>
+		<el-card shadow="never" header="打开">
+			<el-button type="primary" plain @click="open1">打开个人信息</el-button>
+			<el-button type="primary" plain @click="open2">打开后执行</el-button>
+			<el-alert title="打开后执行原理: 路由push时,在当前路由对象中插入一个特殊标识, 在目标视图中beforeRouteEnter获取判断是否需要执行特殊方法" style="margin-top: 20px;"></el-alert>
+		</el-card>
+		<el-card shadow="never" header="刷新" style="margin-top: 15px;">
+			<el-button type="primary" plain @click="refresh1">刷新当前</el-button>
+		</el-card>
+		<el-card shadow="never" header="关闭" style="margin-top: 15px;">
+			<el-button type="primary" plain @click="close1">关闭当前</el-button>
+			<el-button type="primary" plain @click="close2">关闭其他</el-button>
+			<el-button type="primary" plain @click="close3">关闭后执行</el-button>
+		</el-card>
+		<el-card shadow="never" header="设置" style="margin-top: 15px;">
+			<el-form :inline="true">
+				<el-form-item>
+					<el-input v-model="input" placeholder="请输入内容"></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" plain @click="set1">设置标题</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+		<el-card shadow="never" header="整页路由" style="margin-top: 15px;">
+			<el-button type="primary" plain @click="fullpage">fullpage</el-button>
+			<el-alert title="变更路由的层级关系,向上推至顶级达到在layout视图中显示. 只需要在路由中设置 meta.fullpage 即可" style="margin-top: 20px;"></el-alert>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import useTabs from '@/utils/useTabs'
+
+	export default {
+		name: 'viewTags',
+		data() {
+			return {
+				input: "newTabName"
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			open1(){
+				this.$router.push('/usercenter')
+			},
+			open2(){
+				this.$router.push('/usercenter')
+				this.$route.is = true
+			},
+			refresh1(){
+				useTabs.refresh()
+			},
+			close1(){
+				useTabs.close()
+			},
+			close2(){
+				useTabs.closeOther()
+			},
+			close3(){
+				useTabs.closeNext((tags)=>{
+					//回调返回所有标签的数组，这里其实是需要判断是否含有'/usercenter'，含有再操作的，这里为了演示就直接打开了。
+					console.log(tags)
+					this.$router.push('/usercenter')
+					this.$route.is = true
+				})
+			},
+			set1(){
+				useTabs.setTitle(this.input)
+			},
+			fullpage(){
+				this.$router.push('/other/fullpage')
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/client/index.vue b/ui/src/views/setting/client/index.vue
new file mode 100644
index 0000000..9e8e9e9
--- /dev/null
+++ b/ui/src/views/setting/client/index.vue
@@ -0,0 +1,122 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="应用ID" prop="appId" width="150"></el-table-column>
+				<el-table-column label="应用名称" prop="appName" width="250"></el-table-column>
+				<el-table-column label="状态" width="50">
+					<template #default>
+						<el-icon style="color: #67C23A;"><el-icon-circle-check-filled /></el-icon>
+					</template>
+				</el-table-column>
+				<el-table-column label="秘钥" prop="secret" show-overflow-tooltip width="150"></el-table-column>
+				<el-table-column label="授权到期" prop="exp" width="150"></el-table-column>
+				<el-table-column label="操作" fixed="right" align="right" width="120">
+					<template #default="scope">
+						<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+						<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+							<template #reference>
+								<el-button type="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
+
+</template>
+
+<script>
+	import saveDialog from './save'
+
+	export default {
+		name: "client",
+		components: {
+			saveDialog
+		},
+		data(){
+			return {
+				dialog: {
+					save: false
+				},
+				apiObj: this.$API.system.app.list,
+				selection: []
+			}
+		},
+		methods: {
+			//增加
+			add(){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open()
+				})
+			},
+			//编辑
+			table_edit(row){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('edit').setData(row)
+				})
+			},
+			//删除
+			async table_del(row, index){
+				var reqData = {id: row.id}
+				var res = await this.$API.user.del.post(reqData);
+				if(res.code == 200){
+					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+					this.$refs.table.tableData.splice(index, 1);
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//本地更新数据
+			handleSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.unshift(data)
+				}else if(mode=='edit'){
+					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/client/save.vue b/ui/src/views/setting/client/save.vue
new file mode 100644
index 0000000..0718dde
--- /dev/null
+++ b/ui/src/views/setting/client/save.vue
@@ -0,0 +1,109 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
+			<el-form-item label="应用标识" prop="appId">
+				<el-input v-model="form.appId" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="应用名称" prop="appName">
+				<el-input v-model="form.appName" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="秘钥" prop="secret">
+				<el-input v-model="form.secret" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="类型范围" prop="type">
+				<el-checkbox-group v-model="form.type">
+					<el-checkbox-button label="ALL"></el-checkbox-button>
+					<el-checkbox-button label="UPDATA"></el-checkbox-button>
+					<el-checkbox-button label="QUERY"></el-checkbox-button>
+					<el-checkbox-button label="INSERT"></el-checkbox-button>
+				</el-checkbox-group>
+			</el-form-item>
+			<el-form-item label="授权至" prop="exp">
+				<el-date-picker v-model="form.exp" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				mode: "add",
+				titleMap: {
+					add: '新增APP',
+					edit: '编辑APP'
+				},
+				form: {
+					id:"",
+					appId: "",
+					appName: "",
+					secret: "",
+					type: [],
+					exp: ""
+				},
+				rules: {
+					appId:[
+						{required: true, message: '请输入应用标识'}
+					],
+					appName:[
+						{required: true, message: '请输入应用名称'}
+					],
+					secret:[
+						{required: true, message: '请输入秘钥'}
+					],
+					type:[
+						{required: true, message: '请选择类型范围', trigger: 'change'}
+					],
+					exp:[
+						{required: true, message: '请选择授权到期日期', trigger: 'change'}
+					]
+				},
+				visible: false,
+				isSaveing: false
+			}
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$API.demo.post.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.appId = data.appId
+				this.form.appName = data.appName
+				this.form.secret = data.secret
+				this.form.type = data.type
+				this.form.exp = data.exp
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/dic/dic.vue b/ui/src/views/setting/dic/dic.vue
new file mode 100644
index 0000000..fb1092d
--- /dev/null
+++ b/ui/src/views/setting/dic/dic.vue
@@ -0,0 +1,103 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="330" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
+			<el-form-item label="编码" prop="code">
+				<el-input v-model="form.code" clearable placeholder="字典编码"></el-input>
+			</el-form-item>
+			<el-form-item label="字典名称" prop="name">
+				<el-input v-model="form.name" clearable placeholder="字典显示名称"></el-input>
+			</el-form-item>
+			<el-form-item label="父路径" prop="parentId">
+				<el-cascader v-model="form.parentId" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				mode: "add",
+				titleMap: {
+					add: '新增字典',
+					edit: '编辑字典'
+				},
+				visible: false,
+				isSaveing: false,
+				form: {
+					id:"",
+					name: "",
+					code: "",
+					parentId: ""
+				},
+				rules: {
+					code: [
+						{required: true, message: '请输入编码'}
+					],
+					name: [
+						{required: true, message: '请输入字典名称'}
+					]
+				},
+				dic: [],
+				dicProps: {
+					value: "id",
+					label: "name",
+					emitPath: false,
+					checkStrictly: true
+				}
+			}
+		},
+		mounted() {
+			this.getDic()
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
+			//获取字典列表
+			async getDic(){
+				var res = await this.$API.system.dic.tree.get();
+				this.dic = res.data;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$API.demo.post.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.name = data.name
+				this.form.code = data.code
+				this.form.parentId = data.parentId
+
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/dic/index.vue b/ui/src/views/setting/dic/index.vue
new file mode 100644
index 0000000..d8e64d3
--- /dev/null
+++ b/ui/src/views/setting/dic/index.vue
@@ -0,0 +1,330 @@
+<template>
+	<el-container>
+		<el-aside width="300px" v-loading="showDicloading">
+			<el-container>
+				<el-header>
+					<el-input placeholder="输入关键字进行过滤" v-model="dicFilterText" clearable></el-input>
+				</el-header>
+				<el-main class="nopadding">
+					<el-tree ref="dic" class="menu" node-key="id" :data="dicList" :props="dicProps" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="dicFilterNode" @node-click="dicClick">
+						<template #default="{node, data}">
+							<span class="custom-tree-node">
+								<span class="label">{{ node.label }}</span>
+								<span class="code">{{ data.code }}</span>
+								<span class="do">
+									<el-icon @click.stop="dicEdit(data)"><el-icon-edit /></el-icon>
+									<el-icon @click.stop="dicDel(node, data)"><el-icon-delete /></el-icon>
+								</span>
+							</span>
+						</template>
+					</el-tree>
+				</el-main>
+				<el-footer style="height:51px;">
+					<el-button type="primary" size="small" icon="el-icon-plus" style="width: 100%;" @click="addDic">字典分类</el-button>
+				</el-footer>
+			</el-container>
+		</el-aside>
+		<el-container class="is-vertical">
+			<el-header>
+				<div class="left-panel">
+					<el-button type="primary" icon="el-icon-plus" @click="addInfo"></el-button>
+					<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
+				</div>
+			</el-header>
+			<el-main class="nopadding">
+				<scTable ref="table" :apiObj="listApi" row-key="id" :params="listApiParams" @selection-change="selectionChange" stripe :paginationLayout="'prev, pager, next'">
+					<el-table-column type="selection" width="50"></el-table-column>
+					<el-table-column label="" width="60">
+						<template #default>
+							<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
+						</template>
+					</el-table-column>
+					<el-table-column label="名称" prop="name" width="150"></el-table-column>
+					<el-table-column label="键值" prop="key" width="150"></el-table-column>
+					<el-table-column label="是否有效" prop="yx" width="100">
+						<template #default="scope">
+							<el-switch v-model="scope.row.yx" @change="changeSwitch($event, scope.row)" :loading="scope.row.$switch_yx" active-value="1" inactive-value="0"></el-switch>
+						</template>
+					</el-table-column>
+					<el-table-column label="操作" fixed="right" align="right" width="140">
+						<template #default="scope">
+							<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+							<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+								<template #reference>
+									<el-button type="text" size="small">删除</el-button>
+								</template>
+							</el-popconfirm>
+						</template>
+					</el-table-column>
+				</scTable>
+			</el-main>
+		</el-container>
+	</el-container>
+
+	<dic-dialog v-if="dialog.dic" ref="dicDialog" @success="handleDicSuccess" @closed="dialog.dic=false"></dic-dialog>
+
+	<list-dialog v-if="dialog.list" ref="listDialog" @success="handleListSuccess" @closed="dialog.list=false"></list-dialog>
+
+</template>
+
+<script>
+	import dicDialog from './dic'
+	import listDialog from './list'
+	import Sortable from 'sortablejs'
+
+	export default {
+		name: 'dic',
+		components: {
+			dicDialog,
+			listDialog
+		},
+		data() {
+			return {
+				dialog: {
+					dic: false,
+					info: false
+				},
+				showDicloading: true,
+				dicList: [],
+				dicFilterText: '',
+				dicProps: {
+					label: 'name'
+				},
+				listApi: null,
+				listApiParams: {},
+				selection: []
+			}
+		},
+		watch: {
+			dicFilterText(val) {
+				this.$refs.dic.filter(val);
+			}
+		},
+		mounted() {
+			this.getDic()
+			this.rowDrop()
+		},
+		methods: {
+			//加载树数据
+			async getDic(){
+				var res = await this.$API.system.dic.tree.get();
+				this.showDicloading = false;
+				this.dicList = res.data;
+				//获取第一个节点,设置选中 & 加载明细列表
+				var firstNode = this.dicList[0];
+				if(firstNode){
+					this.$nextTick(() => {
+						this.$refs.dic.setCurrentKey(firstNode.id)
+					})
+					this.listApiParams = {
+						code: firstNode.code
+					}
+					this.listApi = this.$API.system.dic.list;
+				}
+			},
+			//树过滤
+			dicFilterNode(value, data){
+				if (!value) return true;
+				var targetText = data.name + data.code;
+				return targetText.indexOf(value) !== -1;
+			},
+			//树增加
+			addDic(){
+				this.dialog.dic = true
+				this.$nextTick(() => {
+					this.$refs.dicDialog.open()
+				})
+			},
+			//编辑树
+			dicEdit(data){
+				this.dialog.dic = true
+				this.$nextTick(() => {
+					var editNode = this.$refs.dic.getNode(data.id);
+					var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.id
+					data.parentId = editNodeParentId
+					this.$refs.dicDialog.open('edit').setData(data)
+				})
+			},
+			//树点击事件
+			dicClick(data){
+				this.$refs.table.reload({
+					code: data.code
+				})
+			},
+			//删除树
+			dicDel(node, data){
+				this.$confirm(`确定删除 ${data.name} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					this.showDicloading = true;
+
+					//删除节点是否为高亮当前 是的话 设置第一个节点高亮
+					var dicCurrentKey = this.$refs.dic.getCurrentKey();
+					this.$refs.dic.remove(data.id)
+					if(dicCurrentKey == data.id){
+						var firstNode = this.dicList[0];
+						if(firstNode){
+							this.$refs.dic.setCurrentKey(firstNode.id);
+							this.$refs.table.upData({
+								code: firstNode.code
+							})
+						}else{
+							this.listApi = null;
+							this.$refs.table.tableData = []
+						}
+					}
+
+					this.showDicloading = false;
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//行拖拽
+			rowDrop(){
+				const _this = this
+				const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody')
+				Sortable.create(tbody, {
+					handle: ".move",
+					animation: 300,
+					ghostClass: "ghost",
+					onEnd({ newIndex, oldIndex }) {
+						const tableData = _this.$refs.table.tableData
+						const currRow = tableData.splice(oldIndex, 1)[0]
+						tableData.splice(newIndex, 0, currRow)
+						_this.$message.success("排序成功")
+					}
+				})
+			},
+			//添加明细
+			addInfo(){
+				this.dialog.list = true
+				this.$nextTick(() => {
+					var dicCurrentKey = this.$refs.dic.getCurrentKey();
+					const data = {
+						dic: dicCurrentKey
+					}
+					this.$refs.listDialog.open().setData(data)
+				})
+			},
+			//编辑明细
+			table_edit(row){
+				this.dialog.list = true
+				this.$nextTick(() => {
+					this.$refs.listDialog.open('edit').setData(row)
+				})
+			},
+			//删除明细
+			async table_del(row, index){
+				var reqData = {id: row.id}
+				var res = await this.$API.demo.post.post(reqData);
+				if(res.code == 200){
+					this.$refs.table.tableData.splice(index, 1);
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//提交明细
+			saveList(){
+				this.$refs.listDialog.submit(async (formData) => {
+					this.isListSaveing = true;
+					var res = await this.$API.demo.post.post(formData);
+					this.isListSaveing = false;
+					if(res.code == 200){
+						//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+						this.listDialogVisible = false;
+						this.$message.success("操作成功")
+					}else{
+						this.$alert(res.message, "提示", {type: 'error'})
+					}
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//表格内开关事件
+			changeSwitch(val, row){
+				//1.还原数据
+				row.yx = row.yx == '1'?'0':'1'
+				//2.执行加载
+				row.$switch_yx = true;
+				//3.等待接口返回后改变值
+				setTimeout(()=>{
+					delete row.$switch_yx;
+					row.yx = val;
+					this.$message.success(`操作成功id:${row.id} val:${val}`)
+				}, 500)
+			},
+			//本地更新数据
+			handleDicSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					if(this.dicList.length > 0){
+						this.$refs.table.upData({
+							code: data.code
+						})
+					}else{
+						this.listApiParams = {
+							code: data.code
+						}
+						this.listApi = this.$API.dic.info;
+					}
+					this.$refs.dic.append(data, data.parentId[0])
+					this.$refs.dic.setCurrentKey(data.id)
+				}else if(mode=='edit'){
+					var editNode = this.$refs.dic.getNode(data.id);
+					//判断是否移动？
+					var editNodeParentId =  editNode.level==1?undefined:editNode.parent.data.id
+					if(editNodeParentId != data.parentId){
+						var obj = editNode.data;
+						this.$refs.dic.remove(data.id)
+						this.$refs.dic.append(obj, data.parentId[0])
+					}
+					Object.assign(editNode.data, data)
+				}
+			},
+			//本地更新数据
+			handleListSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.push(data)
+				}else if(mode=='edit'){
+					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
+	.custom-tree-node .code {font-size: 12px;color: #999;}
+	.custom-tree-node .do {display: none;}
+	.custom-tree-node .do i {margin-left:5px;color: #999;padding:5px;}
+	.custom-tree-node .do i:hover {color: #333;}
+	.custom-tree-node:hover .code {display: none;}
+	.custom-tree-node:hover .do {display: inline-block;}
+</style>
diff --git a/ui/src/views/setting/dic/list.vue b/ui/src/views/setting/dic/list.vue
new file mode 100644
index 0000000..309b236
--- /dev/null
+++ b/ui/src/views/setting/dic/list.vue
@@ -0,0 +1,111 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="400" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
+			<el-form-item label="所属字典" prop="dic">
+				<el-cascader v-model="form.dic" :options="dic" :props="dicProps" :show-all-levels="false" clearable></el-cascader>
+			</el-form-item>
+			<el-form-item label="项名称" prop="name">
+				<el-input v-model="form.name" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="键值" prop="key">
+				<el-input v-model="form.key" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="是否有效" prop="yx">
+				<el-switch v-model="form.yx" active-value="1" inactive-value="0"></el-switch>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				mode: "add",
+				titleMap: {
+					add: '新增项',
+					edit: '编辑项'
+				},
+				visible: false,
+				isSaveing: false,
+				form: {
+					id: "",
+					dic: "",
+					name: "",
+					key: "",
+					yx: "1"
+				},
+				rules: {
+					dic: [
+						{required: true, message: '请选择所属字典'}
+					],
+					name: [
+						{required: true, message: '请输入项名称'}
+					],
+					key: [
+						{required: true, message: '请输入键值'}
+					]
+				},
+				dic: [],
+				dicProps: {
+					value: "id",
+					label: "name",
+					emitPath: false,
+					checkStrictly: true
+				}
+			}
+		},
+		mounted() {
+			if(this.params){
+				this.form.dic = this.params.code
+			}
+			this.getDic()
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
+			//获取字典列表
+			async getDic(){
+				var res = await this.$API.system.dic.tree.get();
+				this.dic = res.data;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$API.demo.post.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.name = data.name
+				this.form.key = data.key
+				this.form.yx = data.yx
+				this.form.dic = data.dic
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/log/index.vue b/ui/src/views/setting/log/index.vue
new file mode 100644
index 0000000..5863c8e
--- /dev/null
+++ b/ui/src/views/setting/log/index.vue
@@ -0,0 +1,142 @@
+<template>
+	<el-container>
+		<el-aside width="220px">
+			<el-tree ref="category" class="menu" node-key="label" :data="category" :default-expanded-keys="['系统日志']" current-node-key="系统日志" :highlight-current="true" :expand-on-click-node="false">
+			</el-tree>
+		</el-aside>
+		<el-container>
+			<el-main class="nopadding">
+				<el-container>
+					<el-header>
+						<div class="left-panel">
+							<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+						</div>
+						<div class="right-panel">
+
+						</div>
+					</el-header>
+					<el-header style="height:150px;">
+						<scEcharts height="100%" :option="logsChartOption"></scEcharts>
+					</el-header>
+					<el-main class="nopadding">
+						<scTable ref="table" :apiObj="apiObj" stripe highlightCurrentRow @row-click="rowClick">
+							<el-table-column label="级别" prop="level" width="60">
+								<template #default="scope">
+									<el-icon v-if="scope.row.level=='error'" style="color: #F56C6C;"><el-icon-circle-close-filled /></el-icon>
+									<el-icon v-if="scope.row.level=='warn'" style="color: #E6A23C;"><el-icon-warning-filled /></el-icon>
+									<el-icon v-if="scope.row.level=='info'" style="color: #409EFF;"><el-icon-info-filled /></el-icon>
+								</template>
+							</el-table-column>
+							<el-table-column label="ID" prop="id" width="180"></el-table-column>
+							<el-table-column label="日志名" prop="name" width="150"></el-table-column>
+							<el-table-column label="请求接口" prop="url" width="150"></el-table-column>
+							<el-table-column label="请求方法" prop="type" width="150"></el-table-column>
+							<el-table-column label="用户" prop="user" width="150"></el-table-column>
+							<el-table-column label="客户端IP" prop="cip" width="150"></el-table-column>
+							<el-table-column label="日志时间" prop="time" width="170"></el-table-column>
+						</scTable>
+					</el-main>
+				</el-container>
+			</el-main>
+		</el-container>
+	</el-container>
+
+	<el-drawer v-model="infoDrawer" title="日志详情" :size="600" destroy-on-close>
+		<info ref="info"></info>
+	</el-drawer>
+</template>
+
+<script>
+	import info from './info'
+	import scEcharts from '@/components/scEcharts'
+
+	export default {
+		name: 'log',
+		components: {
+			info,
+			scEcharts
+		},
+		data() {
+			return {
+				infoDrawer: false,
+				logsChartOption: {
+					color: ['#409eff','#e6a23c','#f56c6c'],
+					grid: {
+						top: '0px',
+						left: '10px',
+						right: '10px',
+						bottom: '0px'
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: {
+						type: 'category',
+						boundaryGap: false,
+						data: ['2021-07-01', '2021-07-02', '2021-07-03', '2021-07-04', '2021-07-05', '2021-07-06', '2021-07-07', '2021-07-08', '2021-07-09', '2021-07-10', '2021-07-11', '2021-07-12', '2021-07-13', '2021-07-14', '2021-07-15']
+					},
+					yAxis: {
+						show: false,
+						type: 'value'
+					},
+					series: [{
+						data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 70, 110],
+						type: 'bar',
+						stack: 'log',
+						barWidth: '15px'
+					},
+					{
+						data: [15, 26, 7, 12, 13, 9, 21, 15, 26, 7, 12, 13, 9, 21, 12, 3],
+						type: 'bar',
+						stack: 'log',
+						barWidth: '15px'
+					},
+					{
+						data: [0, 0, 0, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+						type: 'bar',
+						stack: 'log',
+						barWidth: '15px'
+					}]
+				},
+				category: [
+					{
+						label: '系统日志',
+						children: [
+							{label: 'debug'},
+							{label: 'info'},
+							{label: 'warn'},
+							{label: 'error'},
+							{label: 'fatal'}
+						]
+					},
+					{
+						label: '应用日志',
+						children: [
+							{label: 'selfHelp'},
+							{label: 'WechatApp'}
+						]
+					}
+				],
+				date: [],
+				apiObj: this.$API.system.log.list,
+				search: {
+					keyword: ""
+				}
+			}
+		},
+		methods: {
+			upsearch(){
+
+			},
+			rowClick(row){
+				this.infoDrawer = true
+				this.$nextTick(() => {
+					this.$refs.info.setData(row)
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/log/info.vue b/ui/src/views/setting/log/info.vue
new file mode 100644
index 0000000..bdb3fca
--- /dev/null
+++ b/ui/src/views/setting/log/info.vue
@@ -0,0 +1,54 @@
+<template>
+
+	<el-main style="padding:0 20px;">
+		<el-descriptions :column="1" border size="small">
+			<el-descriptions-item label="请求接口">{{data.url}}</el-descriptions-item>
+			<el-descriptions-item label="请求方法">{{data.type}}</el-descriptions-item>
+			<el-descriptions-item label="状态代码">{{data.code}}</el-descriptions-item>
+			<el-descriptions-item label="日志名">{{data.name}}</el-descriptions-item>
+			<el-descriptions-item label="日志时间">{{data.time}}</el-descriptions-item>
+		</el-descriptions>
+		<el-collapse v-model="activeNames" style="margin-top: 20px;">
+			<el-collapse-item title="常规" name="1">
+				<el-alert title="在没有配置的 DNS 服务器响应之后，名称 update-khd.2345.cc 的名称解析超时。" :type="typeMap[data.level]" :closable="false"></el-alert>
+			</el-collapse-item>
+			<el-collapse-item title="详细" name="2">
+				<div class="code">
+					Request: {
+						User-Agent: "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
+					},
+					Response: {
+						Content-Type: "application/json; charset=utf-8",
+						Date: "Fri, 25 Jun 2021 03:02:14 GMT",
+						Server: "nginx/1.17.8"
+					}
+				</div>
+			</el-collapse-item>
+		</el-collapse>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				data: {},
+				activeNames: ['1'],
+				typeMap: {
+					'info': "info",
+					'warn': "warning",
+					'error': "error"
+				}
+			}
+		},
+		methods: {
+			setData(data){
+				this.data = data
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.code {background: #848484;padding:15px;color: #fff;font-size: 12px;border-radius: 4px;}
+</style>
diff --git a/ui/src/views/setting/menu/index.vue b/ui/src/views/setting/menu/index.vue
new file mode 100644
index 0000000..992598e
--- /dev/null
+++ b/ui/src/views/setting/menu/index.vue
@@ -0,0 +1,164 @@
+<template>
+	<el-container>
+		<el-aside width="300px" v-loading="menuloading">
+			<el-container>
+				<el-header>
+					<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
+				</el-header>
+				<el-main class="nopadding">
+					<el-tree ref="menu" class="menu" node-key="id" :data="menuList" :props="menuProps" draggable highlight-current :expand-on-click-node="false" check-strictly show-checkbox :filter-node-method="menuFilterNode" @node-click="menuClick" @node-drop="nodeDrop">
+
+						<template #default="{node, data}">
+							<span class="custom-tree-node el-tree-node__label">
+								<span class="label">
+									{{ node.label }}
+								</span>
+								<span class="do">
+									<el-icon @click.stop="add(node, data)"><el-icon-plus /></el-icon>
+								</span>
+							</span>
+						</template>
+
+					</el-tree>
+				</el-main>
+				<el-footer style="height:51px;">
+					<el-button type="primary" size="small" icon="el-icon-plus" @click="add()"></el-button>
+					<el-button type="danger" size="small" plain icon="el-icon-delete" @click="delMenu"></el-button>
+				</el-footer>
+			</el-container>
+		</el-aside>
+		<el-container>
+			<el-main class="nopadding" style="padding:20px;" ref="main">
+				<save ref="save" :menu="menuList"></save>
+			</el-main>
+		</el-container>
+	</el-container>
+</template>
+
+<script>
+	let newMenuIndex = 1;
+	import save from './save'
+
+	export default {
+		name: "settingMenu",
+		components: {
+			save
+		},
+		data(){
+			return {
+				menuloading: false,
+				menuList: [],
+				menuProps: {
+					label: (data)=>{
+						return data.meta.title
+					}
+				},
+				menuFilterText: ""
+			}
+		},
+		watch: {
+			menuFilterText(val){
+				this.$refs.menu.filter(val);
+			}
+		},
+		mounted() {
+			this.getMenu();
+		},
+		methods: {
+			//加载树数据
+			async getMenu(){
+				this.menuloading = true
+				var res = await this.$API.system.menu.list.get();
+				this.menuloading = false
+				this.menuList = res.data;
+			},
+			//树点击
+			menuClick(data, node){
+				var pid = node.level==1?undefined:node.parent.data.id;
+				this.$refs.save.setData(data, pid)
+				this.$refs.main.$el.scrollTop = 0
+			},
+			//树过滤
+			menuFilterNode(value, data){
+				if (!value) return true;
+				var targetText = data.meta.title;
+				return targetText.indexOf(value) !== -1;
+			},
+			//树拖拽
+			nodeDrop(draggingNode, dropNode, dropType){
+				this.$refs.save.setData({})
+				this.$message(`拖拽对象：${draggingNode.data.meta.title}, 释放对象：${dropNode.data.meta.title}, 释放对象的位置：${dropType}`)
+			},
+			//增加
+			async add(node, data){
+				var newMenuName = "未命名" + newMenuIndex++;
+				var newMenuData = {
+					parentId: data ? data.id : "",
+					name: newMenuName,
+					path: "",
+					component: "",
+					meta:{
+						title: newMenuName,
+						type: "menu"
+					}
+				}
+				this.menuloading = true
+				var res = await this.$API.demo.post.post(newMenuData)
+				this.menuloading = false
+				newMenuData.id = res.data
+
+				this.$refs.menu.append(newMenuData, node)
+				this.$refs.menu.setCurrentKey(newMenuData.id)
+				var pid = node ? node.data.id : ""
+				this.$refs.save.setData(newMenuData, pid)
+			},
+			//删除菜单
+			async delMenu(){
+				var CheckedNodes = this.$refs.menu.getCheckedNodes()
+				if(CheckedNodes.length == 0){
+					this.$message.warning("请选择需要删除的项")
+					return false;
+				}
+
+				var confirm = await this.$confirm('确认删除已选择的菜单吗？','提示', {
+					type: 'warning',
+					confirmButtonText: '删除',
+					confirmButtonClass: 'el-button--danger'
+				}).catch(() => {})
+				if(confirm != 'confirm'){
+					return false
+				}
+
+				this.menuloading = true
+				var reqData = {
+					ids: CheckedNodes.map(item => item.id)
+				}
+				var res = await this.$API.demo.post.post(reqData)
+				this.menuloading = false
+
+				if(res.code == 200){
+					CheckedNodes.forEach(item => {
+						var node = this.$refs.menu.getNode(item)
+						if(node.isCurrent){
+							this.$refs.save.setData({})
+						}
+						this.$refs.menu.remove(item)
+					})
+				}else{
+					this.$message.warning(res.message)
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
+	.custom-tree-node .label {display: flex;align-items: center;;height: 100%;}
+	.custom-tree-node .label .el-tag {margin-left: 5px;}
+	.custom-tree-node .do {display: none;}
+	.custom-tree-node .do i {margin-left:5px;color: #999;}
+	.custom-tree-node .do i:hover {color: #333;}
+
+	.custom-tree-node:hover .do {display: inline-block;}
+</style>
diff --git a/ui/src/views/setting/menu/save.vue b/ui/src/views/setting/menu/save.vue
new file mode 100644
index 0000000..86b065c
--- /dev/null
+++ b/ui/src/views/setting/menu/save.vue
@@ -0,0 +1,186 @@
+<template>
+	<el-row :gutter="40">
+		<el-col v-if="!form.id">
+			<el-empty description="请选择左侧菜单后操作" :image-size="100"></el-empty>
+		</el-col>
+		<template v-else>
+			<el-col :lg="12">
+				<h2>{{form.meta.title || "新增菜单"}}</h2>
+				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px" label-position="left">
+					<el-form-item label="显示名称" prop="meta.title">
+						<el-input v-model="form.meta.title" clearable placeholder="菜单显示名字"></el-input>
+					</el-form-item>
+					<el-form-item label="上级菜单" prop="parentId">
+						<el-cascader v-model="form.parentId" :options="menuOptions" :props="menuProps" :show-all-levels="false" placeholder="顶级菜单" clearable disabled></el-cascader>
+					</el-form-item>
+					<el-form-item label="类型" prop="meta.type">
+						<el-radio-group v-model="form.meta.type">
+							<el-radio-button label="menu">菜单</el-radio-button>
+							<el-radio-button label="iframe">Iframe</el-radio-button>
+							<el-radio-button label="link">外链</el-radio-button>
+							<el-radio-button label="button">按钮</el-radio-button>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="别名" prop="name">
+						<el-input v-model="form.name" clearable placeholder="菜单别名"></el-input>
+						<div class="el-form-item-msg">系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏</div>
+					</el-form-item>
+					<el-form-item label="菜单图标" prop="meta.icon">
+						<sc-icon-select v-model="form.meta.icon" clearable></sc-icon-select>
+					</el-form-item>
+					<el-form-item label="路由地址" prop="path">
+						<el-input v-model="form.path" clearable placeholder=""></el-input>
+					</el-form-item>
+					<el-form-item label="重定向" prop="redirect">
+						<el-input v-model="form.redirect" clearable placeholder=""></el-input>
+					</el-form-item>
+					<el-form-item label="菜单高亮" prop="active">
+						<el-input v-model="form.active" clearable placeholder=""></el-input>
+						<div class="el-form-item-msg">子节点或详情页需要高亮的上级菜单路由地址</div>
+					</el-form-item>
+					<el-form-item label="视图" prop="component">
+						<el-input v-model="form.component" clearable placeholder="">
+							<template #prepend>views/</template>
+						</el-input>
+						<div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div>
+					</el-form-item>
+					<el-form-item label="颜色" prop="color">
+						<el-color-picker v-model="form.meta.color" :predefine="predefineColors"></el-color-picker>
+
+					</el-form-item>
+					<el-form-item label="是否隐藏" prop="meta.hidden">
+						<el-checkbox v-model="form.meta.hidden">隐藏菜单</el-checkbox>
+						<el-checkbox v-model="form.meta.hiddenBreadcrumb">隐藏面包屑</el-checkbox>
+						<div class="el-form-item-msg">菜单不显示在导航中，但用户依然可以访问，例如详情页</div>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" @click="save" :loading="loading">保 存</el-button>
+					</el-form-item>
+				</el-form>
+
+			</el-col>
+			<el-col :lg="12" class="apilist">
+				<h2>接口权限</h2>
+				<sc-form-table v-model="form.apiList" :addTemplate="apiListAddTemplate" placeholder="暂无匹配接口权限">
+					<el-table-column prop="code" label="标识" width="150">
+						<template #default="scope">
+							<el-input v-model="scope.row.code" placeholder="请输入内容"></el-input>
+						</template>
+					</el-table-column>
+					<el-table-column prop="url" label="Api url">
+						<template #default="scope">
+							<el-input v-model="scope.row.url" placeholder="请输入内容"></el-input>
+						</template>
+					</el-table-column>
+				</sc-form-table>
+			</el-col>
+		</template>
+	</el-row>
+
+</template>
+
+<script>
+	import scIconSelect from '@/components/scIconSelect'
+
+	export default {
+		components: {
+			scIconSelect
+		},
+		props: {
+			menu: { type: Object, default: () => {} },
+		},
+		data(){
+			return {
+				form: {
+					id: "",
+					parentId: "",
+					name: "",
+					path: "",
+					component: "",
+					redirect: "",
+					meta:{
+						title: "",
+						icon: "",
+						active: "",
+						color: "",
+						type: "menu"
+					},
+					apiList: []
+				},
+				menuOptions: [],
+				menuProps: {
+					value: 'id',
+					label: 'title',
+					checkStrictly: true
+				},
+				predefineColors: [
+					'#ff4500',
+					'#ff8c00',
+					'#ffd700',
+					'#67C23A',
+					'#00ced1',
+					'#409EFF',
+					'#c71585'
+				],
+				rules: [],
+				apiListAddTemplate: {
+					code: "",
+					url: ""
+				},
+				loading: false
+			}
+		},
+		watch: {
+			menu: {
+				handler(){
+					this.menuOptions = this.treeToMap(this.menu)
+				},
+				deep: true
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//简单化菜单
+			treeToMap(tree){
+				const map = []
+				tree.forEach(item => {
+					var obj = {
+						id: item.id,
+						parentId: item.parentId,
+						title: item.meta.title,
+						children: item.children&&item.children.length>0 ? this.treeToMap(item.children) : null
+					}
+					map.push(obj)
+				})
+				return map
+			},
+			//保存
+			async save(){
+				this.loading = true
+				var res = await this.$API.demo.post.post(this.form)
+				this.loading = false
+				if(res.code == 200){
+					this.$message.success("保存成功")
+				}else{
+					this.$message.warning(res.message)
+				}
+			},
+			//表单注入数据
+			setData(data, pid){
+				this.form = data
+				this.form.apiList = data.apiList || []
+				this.form.parentId = pid
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	h2 {font-size: 17px;color: #3c4a54;padding:0 0 30px 0;}
+	.apilist {border-left: 1px solid #eee;}
+
+	[data-theme="dark"] h2 {color: #fff;}
+	[data-theme="dark"] .apilist {border-color: #434343;}
+</style>
diff --git a/ui/src/views/setting/role/index.vue b/ui/src/views/setting/role/index.vue
new file mode 100644
index 0000000..f97b0b6
--- /dev/null
+++ b/ui/src/views/setting/role/index.vue
@@ -0,0 +1,160 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
+				<el-button type="primary" plain :disabled="selection.length!=1" @click="permission">权限设置</el-button>
+			</div>
+			<div class="right-panel">
+				<div class="right-panel-search">
+					<el-input v-model="search.keyword" placeholder="角色名称" clearable></el-input>
+					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" hidePagination>
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="#" type="index" width="50"></el-table-column>
+				<el-table-column label="角色名称" prop="label" width="250"></el-table-column>
+				<el-table-column label="别名" prop="alias" width="150"></el-table-column>
+				<el-table-column label="排序" prop="sort" width="150"></el-table-column>
+				<el-table-column label="操作" fixed="right" align="right" width="140">
+					<template #default="scope">
+						<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
+						<el-divider direction="vertical"></el-divider>
+						<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+						<el-divider direction="vertical"></el-divider>
+						<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+							<template #reference>
+								<el-button type="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
+
+	<permission-dialog v-if="dialog.permission" ref="permissionDialog" @closed="dialog.permission=false"></permission-dialog>
+
+</template>
+
+<script>
+	import saveDialog from './save'
+	import permissionDialog from './permission'
+
+	export default {
+		name: 'role',
+		components: {
+			saveDialog,
+			permissionDialog
+		},
+		data() {
+			return {
+				dialog: {
+					save: false,
+					permission: false
+				},
+				apiObj: this.$API.system.role.list,
+				selection: [],
+				search: {
+					keyword: null
+				}
+			}
+		},
+		methods: {
+			//添加
+			add(){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open()
+				})
+			},
+			//编辑
+			table_edit(row){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('edit').setData(row)
+				})
+			},
+			//查看
+			table_show(row){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('show').setData(row)
+				})
+			},
+			//权限设置
+			permission(){
+				this.dialog.permission = true
+				this.$nextTick(() => {
+					this.$refs.permissionDialog.open()
+				})
+			},
+			//删除
+			async table_del(row){
+				var reqData = {id: row.id}
+				var res = await this.$API.demo.post.post(reqData);
+				if(res.code == 200){
+					this.$refs.table.refresh()
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？如果删除项中含有子集将会被一并删除`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.$refs.table.refresh()
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//搜索
+			upsearch(){
+
+			},
+			//根据ID获取树结构
+			filterTree(id){
+				var target = null;
+				function filter(tree){
+					tree.forEach(item => {
+						if(item.id == id){
+							target = item
+						}
+						if(item.children){
+							filter(item.children)
+						}
+					})
+				}
+				filter(this.$refs.table.tableData)
+				return target
+			},
+			//本地更新数据
+			handleSaveSuccess(data, mode){
+				if(mode=='add'){
+					this.$refs.table.refresh()
+				}else if(mode=='edit'){
+					this.$refs.table.refresh()
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/role/permission.vue b/ui/src/views/setting/role/permission.vue
new file mode 100644
index 0000000..f66e725
--- /dev/null
+++ b/ui/src/views/setting/role/permission.vue
@@ -0,0 +1,131 @@
+<template>
+	<el-dialog title="角色权限设置" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+		<el-tabs tab-position="top">
+			<el-tab-pane label="菜单权限">
+				<div class="treeMain">
+					<el-tree ref="menu" node-key="name" :data="menu.list" :default-checked-keys="menu.checked" :props="menu.props" show-checkbox></el-tree>
+				</div>
+			</el-tab-pane>
+			<el-tab-pane label="部门权限">
+				<div class="treeMain">
+					<el-tree ref="group" node-key="name" :data="group.list" :default-checked-keys="group.checked" :props="group.props" show-checkbox></el-tree>
+				</div>
+			</el-tab-pane>
+			<el-tab-pane label="类型权限">
+				<div class="treeMain">
+					<el-tree ref="type" node-key="name" :data="type.list" :default-checked-keys="type.checked" :props="type.props" show-checkbox></el-tree>
+				</div>
+			</el-tab-pane>
+			<el-tab-pane label="控制台">
+				<el-form label-width="100px" label-position="left">
+					<el-form-item label="控制台视图">
+						<el-select v-model="dashboard" placeholder="请选择">
+							<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
+								<span style="float: left">{{ item.label }}</span>
+								<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
+							</el-option>
+						</el-select>
+						<div class="el-form-item-msg">用于控制角色登录后控制台的视图</div>
+					</el-form-item>
+				</el-form>
+			</el-tab-pane>
+		</el-tabs>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				visible: false,
+				isSaveing: false,
+				menu: {
+					list: [],
+					checked: ["test", "system", "user", "role"],
+					props: {
+						label: (data)=>{
+							return data.meta.title
+						}
+					}
+				},
+				group: {
+					list: [],
+					checked: [],
+					props: {}
+				},
+				type: {
+					list: [],
+					checked: [],
+					props: {}
+				},
+				dashboard: "0",
+				dashboardOptions: [
+					{
+						value: '0',
+						label: '数据统计',
+						views: 'stats'
+
+					},
+					{
+						value: '1',
+						label: '工作台',
+						views: 'work'
+					},
+				]
+			}
+		},
+		mounted() {
+			this.getMenu();
+			this.getGroup();
+			this.getType();
+		},
+		methods: {
+			open(){
+				this.visible = true;
+			},
+			submit(){
+				this.isSaveing = true;
+				setTimeout(()=>{
+					this.isSaveing = false;
+					this.visible = false;
+					this.$message.success("操作成功")
+					this.$emit('success')
+				},1000)
+			},
+			async getMenu(){
+				var res = await this.$API.system.menu.list.get();
+				this.menu.list = res.data;
+			},
+			getGroup(){
+				this.group.list = [
+					{label: 'JL00'},
+					{label: 'LP01'},
+					{label: 'LP07'},
+					{label: 'SL01'},
+					{label: 'TL06'},
+					{label: 'TL09'},
+					{label: 'YP07'}
+				];
+			},
+			getType(){
+				this.type.list = [
+					{label: '原料采购'},
+					{label: '厂内互供'},
+					{label: '炼销订单'},
+					{label: '化工统销订单'},
+					{label: '移库单'},
+					{label: '自销订单'},
+				];
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
+</style>
diff --git a/ui/src/views/setting/role/save.vue b/ui/src/views/setting/role/save.vue
new file mode 100644
index 0000000..c3de9e4
--- /dev/null
+++ b/ui/src/views/setting/role/save.vue
@@ -0,0 +1,114 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
+			<el-form-item label="上级角色" prop="parentId">
+				<el-cascader v-model="form.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
+			</el-form-item>
+			<el-form-item label="角色名称" prop="label">
+				<el-input v-model="form.label" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="角色别名" prop="alias">
+				<el-input v-model="form.alias" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="排序" prop="sort">
+				<el-input-number v-model="form.sort" controls-position="right" :min="1" style="width: 100%;"></el-input-number>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				mode: "add",
+				titleMap: {
+					add: '新增',
+					edit: '编辑',
+					show: '查看'
+				},
+				visible: false,
+				isSaveing: false,
+				//表单数据
+				form: {
+					id:"",
+					label: "",
+					alias: "",
+					sort: 1,
+					parentId: ""
+				},
+				//验证规则
+				rules: {
+					sort: [
+						{required: true, message: '请输入排序', trigger: 'change'}
+					],
+					label: [
+						{required: true, message: '请输入角色名称'}
+					],
+					alias: [
+						{required: true, message: '请输入角色别名'}
+					]
+				},
+				//所需数据选项
+				groups: [],
+				groupsProps: {
+					value: "id",
+					emitPath: false,
+					checkStrictly: true
+				}
+			}
+		},
+		mounted() {
+			this.getGroup()
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this
+			},
+			//加载树数据
+			async getGroup(){
+				var res = await this.$API.system.role.list.get();
+				this.groups = res.data;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$API.demo.post.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.label = data.label
+				this.form.alias = data.alias
+				this.form.sort = data.sort
+				this.form.parentId = data.parentId
+
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/system/index.vue b/ui/src/views/setting/system/index.vue
new file mode 100644
index 0000000..34f9432
--- /dev/null
+++ b/ui/src/views/setting/system/index.vue
@@ -0,0 +1,171 @@
+<template>
+	<el-main>
+		<el-card shadow="never">
+			<el-tabs tab-position="top">
+
+				<el-tab-pane label="系统设置">
+					<el-form ref="form" :model="sys" label-width="100px" style="margin-top: 20px;">
+						<el-form-item label="系统名称">
+							<el-input v-model="sys.name"></el-input>
+						</el-form-item>
+						<el-form-item label="LogoUrl">
+							<el-input v-model="sys.logoUrl"></el-input>
+						</el-form-item>
+						<el-form-item label="登录开关">
+							<el-switch v-model="sys.login"></el-switch>
+							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后普通用户无法登录，仅允许管理员角色登录</div>
+						</el-form-item>
+						<el-form-item label="密码验证规则">
+							<el-input v-model="sys.passwordRules"></el-input>
+						</el-form-item>
+						<el-form-item label="版权信息">
+							<el-input type="textarea" :autosize="{minRows: 4}" v-model="sys.copyright"></el-input>
+						</el-form-item>
+						<el-form-item>
+							<el-button type="primary">保存</el-button>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+
+				<el-tab-pane label="短信配置">
+					<el-form ref="form" :model="msg" label-width="100px" style="margin-top: 20px;">
+						<el-form-item label="短信开关">
+							<el-switch v-model="msg.open"></el-switch>
+							<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后用户无法收到短信，但日志中将记录</div>
+						</el-form-item>
+						<el-form-item label="appKey">
+							<el-input v-model="msg.appKey"></el-input>
+						</el-form-item>
+						<el-form-item label="secretKey">
+							<el-input v-model="msg.secretKey"></el-input>
+						</el-form-item>
+						<el-form-item>
+							<el-button type="primary">保存</el-button>
+						</el-form-item>
+					</el-form>
+				</el-tab-pane>
+
+				<el-tab-pane label="扩展配置">
+					<el-alert title="扩展配置为系统业务所有的配置，应该由系统管理员操作，如需用户配置应另起业务配置页面。" type="warning" style="margin-bottom: 15px;"></el-alert>
+
+					<el-table :data="setting" stripe>
+						<el-table-column label="#" type="index" width="50"></el-table-column>
+						<el-table-column label="KEY" prop="key" width="150">
+							<template #default="scope">
+								<el-input v-if="scope.row.isSet" v-model="scope.row.key" placeholder="请输入内容"></el-input>
+								<span v-else>{{scope.row.key}}</span>
+							</template>
+						</el-table-column>
+						<el-table-column label="VALUE" prop="value" width="350">
+							<template #default="scope">
+								<template v-if="scope.row.isSet">
+									<el-switch v-if="typeof scope.row.value==='boolean'" v-model="scope.row.value"></el-switch>
+									<el-input v-else v-model="scope.row.value" placeholder="请输入内容"></el-input>
+								</template>
+								<span v-else>{{scope.row.value}}</span>
+							</template>
+						</el-table-column>
+						<el-table-column label="CATEGORY" prop="category" width="150">
+							<template #default="scope">
+								<el-input v-if="scope.row.isSet" v-model="scope.row.category" placeholder="请输入内容"></el-input>
+								<span v-else>{{scope.row.category}}</span>
+							</template>
+						</el-table-column>
+						<el-table-column label="TITLE" prop="title" width="350">
+							<template #default="scope">
+								<el-input v-if="scope.row.isSet" v-model="scope.row.title" placeholder="请输入内容"></el-input>
+								<span v-else>{{scope.row.title}}</span>
+							</template>
+						</el-table-column>
+						<el-table-column min-width="1"></el-table-column>
+						<el-table-column label="操作" fixed="right" width="100">
+							<template #default="scope">
+								<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">{{scope.row.isSet?'保存':"修改"}}</el-button>
+								<el-button v-if="scope.row.isSet" @click="scope.row.isSet=false" type="text" size="small">取消</el-button>
+								<el-popconfirm v-if="!scope.row.isSet" title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+									<template #reference>
+										<el-button type="text" size="small">删除</el-button>
+									</template>
+								</el-popconfirm>
+							</template>
+						</el-table-column>
+					</el-table>
+					<el-button type="primary" icon="el-icon-plus" @click="table_add" style="margin-top: 20px;"></el-button>
+				</el-tab-pane>
+
+			</el-tabs>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'system',
+		data() {
+			return {
+				sys: {
+					name: "SCUI",
+					logoUrl: "",
+					login: true,
+					passwordRules: "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$",
+					copyright: "@SCUI"
+				},
+				msg: {
+					open: true,
+					appKey: "",
+					secretKey: ""
+				},
+				setting: [
+					{
+						key: "file_serve",
+						value: "https://file.scui.com",
+						category: "url",
+						title: "文件服务器地址"
+					},
+					{
+						key: "cloud_url",
+						value: "-",
+						category: "url",
+						title: "客户端地址"
+					},
+					{
+						key: "crm_url",
+						value: "-",
+						category: "url",
+						title: "CRM地址"
+					},
+					{
+						key: "autoSwitch",
+						value: true,
+						category: "user",
+						title: "自动判断boolean类型"
+					}
+				]
+			}
+		},
+		methods: {
+			table_add(){
+				var newRow = {
+					key: "",
+					value: "",
+					title: "",
+					isSet: true
+				}
+				this.setting.push(newRow)
+			},
+			table_edit(row){
+				if(row.isSet){
+					row.isSet = false
+				}else{
+					row.isSet = true
+				}
+			},
+			table_del(row, index){
+				this.setting.splice(index, 1)
+			},
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/table/index.vue b/ui/src/views/setting/table/index.vue
new file mode 100644
index 0000000..8fea26c
--- /dev/null
+++ b/ui/src/views/setting/table/index.vue
@@ -0,0 +1,118 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange" stripe>
+				<el-table-column type="selection" width="50"></el-table-column>
+				<el-table-column label="标识" prop="code" width="150"></el-table-column>
+				<el-table-column label="表格名称" prop="name" width="250"></el-table-column>
+
+				<el-table-column label="操作" fixed="right" align="right" width="120">
+					<template #default="scope">
+						<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+						<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+							<template #reference>
+								<el-button type="text" size="small">删除</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+	
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
+	
+</template>
+
+<script>
+	import saveDialog from './save'
+	
+	export default {
+		name: 'tableSetting',
+		components: {
+			saveDialog
+		},
+		data() {
+			return {
+				dialog: {
+					save: false
+				},
+				apiObj: this.$API.system.table.list,
+				selection: []
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//增加
+			add(){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open()
+				})
+			},
+			//编辑
+			table_edit(row){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('edit').setData(row)
+				})
+			},
+			//删除
+			async table_del(row, index){
+				var reqData = {id: row.id}
+				var res = await this.$API.demo.post.post(reqData);
+				if(res.code == 200){
+					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+					this.$refs.table.tableData.splice(index, 1);
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//本地更新数据
+			handleSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.unshift(data)
+				}else if(mode=='edit'){
+					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/table/save.vue b/ui/src/views/setting/table/save.vue
new file mode 100644
index 0000000..d18b03c
--- /dev/null
+++ b/ui/src/views/setting/table/save.vue
@@ -0,0 +1,182 @@
+<template>
+	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close @closed="$emit('closed')">
+		<el-container v-loading="loading">
+			<el-main style="padding:0 20px 20px 20px">
+
+				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="100px" label-position="top">
+					<sc-title title="基础"></sc-title>
+					<el-row :gutter="20">
+						<el-col :span="16">
+							<el-form-item label="表格名称" prop="name">
+								<el-input v-model="form.name" placeholder="请输入中文描述标题"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="标识" prop="code">
+								<el-input v-model="form.code" placeholder="请输入唯一标识"></el-input>
+							</el-form-item>
+						</el-col>
+					</el-row>
+					<el-form-item>
+						<el-checkbox v-model="form.remoteSort" label="远程排序"></el-checkbox>
+						<el-checkbox v-model="form.remoteFilter" label="远程过滤"></el-checkbox>
+					</el-form-item>
+					<sc-title title="表格列"></sc-title>
+					<el-form-item prop="column">
+						<sc-form-table v-model="form.column" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
+							<el-table-column prop="label" label="名称">
+								<template #default="scope">
+									<el-input v-model="scope.row.label" placeholder="请输入名称"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="prop" label="字段" width="150">
+								<template #default="scope">
+									<el-input v-model="scope.row.prop" placeholder="请输入字段"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="width" label="宽度" width="100">
+								<template #default="scope">
+									<el-input v-model="scope.row.width" placeholder="请输入宽度"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="hide" label="隐藏" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.hide"></el-checkbox>
+								</template>
+							</el-table-column>
+							<el-table-column prop="sortable" label="排序" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.sortable"></el-checkbox>
+								</template>
+							</el-table-column>
+							<el-table-column prop="filters" label="过滤项" width="80" align="center">
+								<template #default="scope">
+									<el-button type="text" :style="{'color':scope.row.filters.length==0?'#bbb':null}" @click="setFilters(scope.row.filters)">过滤项</el-button>
+								</template>
+							</el-table-column>
+							<el-table-column prop="fixed" label="固定" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.fixed"></el-checkbox>
+								</template>
+							</el-table-column>
+						</sc-form-table>
+					</el-form-item>
+				</el-form>
+			</el-main>
+			<el-footer>
+				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
+				<el-button @click="visible=false">取消</el-button>
+			</el-footer>
+		</el-container>
+
+		<el-drawer title="过滤项配置" v-model="setFiltersVisible" :size="500" destroy-on-close>
+			<el-main style="padding:0 20px 20px 20px">
+				<sc-form-table v-model="selectionFilters" :addTemplate="filtersAddTemplate" drag-sort placeholder="暂无数据">
+					<el-table-column prop="text" label="名称">
+						<template #default="scope">
+							<el-input v-model="scope.row.text" placeholder="请输入名称"></el-input>
+						</template>
+					</el-table-column>
+					<el-table-column prop="value" label="值" width="150">
+						<template #default="scope">
+							<el-input v-model="scope.row.value" placeholder="请输入值"></el-input>
+						</template>
+					</el-table-column>
+				</sc-form-table>
+			</el-main>
+		</el-drawer>
+
+
+	</el-drawer>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				loading: false,
+				mode: "add",
+				titleMap: {
+					add: '新增',
+					edit: '编辑'
+				},
+				form: {},
+				rules: {
+					name: [
+						{required: true, message: '请输入表格名称', trigger: 'blur'}
+					],
+					code: [
+						{required: true, message: '请输入唯一标识', trigger: 'blur'}
+					]
+				},
+				addTemplate: {
+					label: '',
+					prop: '',
+					width: '100',
+					hide: false,
+					sortable: false,
+					fixed: false,
+					filters: []
+				},
+				visible: false,
+				isSaveing: false,
+				selectionFilters: [],
+				filtersAddTemplate: {
+					text: '',
+					value: ''
+				},
+				setFiltersVisible: false
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$API.demo.post.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.loading = true
+				const params = {
+					id: data.id
+				}
+				setTimeout(async ()=>{
+					var res = await this.$API.system.table.info.get(params)
+					this.loading = false
+					this.form = res.data
+				},400)
+
+			},
+			//设置过滤项
+			setFilters(filters){
+				this.selectionFilters = filters
+				this.setFiltersVisible = true
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/task/index.vue b/ui/src/views/setting/task/index.vue
new file mode 100644
index 0000000..2210de0
--- /dev/null
+++ b/ui/src/views/setting/task/index.vue
@@ -0,0 +1,173 @@
+<!--
+ * @Descripttion: 系统计划任务配置
+ * @version: 1.2
+ * @Author: sakuya
+ * @Date: 2021年7月7日09:28:32
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年7月10日20:56:47
+-->
+
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.id">
+				<el-card class="task task-item" shadow="hover">
+					<h2>{{item.title}}</h2>
+					<ul>
+						<li>
+							<h4>执行类</h4>
+							<p>{{item.handler}}</p>
+						</li>
+						<li>
+							<h4>定时规则</h4>
+							<p>{{item.cron}}</p>
+						</li>
+					</ul>
+					<div class="bottom">
+						<div class="state">
+							<el-tag v-if="item.state=='1'" size="small">准备就绪</el-tag>
+							<el-tag v-if="item.state=='-1'" size="small" type="info">停用</el-tag>
+						</div>
+						<div class="handler">
+							<el-popconfirm title="确定立即执行吗？" @confirm="run(item)">
+								<template #reference>
+									<el-button type="primary" icon="el-icon-caret-right" circle></el-button>
+								</template>
+							</el-popconfirm>
+							<el-dropdown trigger="click">
+								<el-button type="primary" icon="el-icon-more" circle plain></el-button>
+								<template #dropdown>
+									<el-dropdown-menu>
+										<el-dropdown-item @click="edit(item)">编辑</el-dropdown-item>
+										<el-dropdown-item @click="logs(item)">日志</el-dropdown-item>
+										<el-dropdown-item @click="del(item)" divided>删除</el-dropdown-item>
+									</el-dropdown-menu>
+								</template>
+							</el-dropdown>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
+				<el-card class="task task-add" shadow="none" @click="add">
+					<el-icon><el-icon-plus /></el-icon>
+					<p>添加计划任务</p>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
+
+	<el-drawer title="计划任务日志" v-model="dialog.logsVisible" :size="600" direction="rtl" destroy-on-close>
+		<logs></logs>
+	</el-drawer>
+</template>
+
+<script>
+	import saveDialog from './save'
+	import logs from './logs'
+
+	export default {
+		name: 'task',
+		components: {
+			saveDialog,
+			logs
+		},
+		provide() {
+			return {
+				list: this.list
+			}
+		},
+		data() {
+			return {
+				dialog: {
+					save: false,
+					logsVisible: false
+				},
+				list: [
+					{
+						id: "1",
+						title: "清理服务器缓存",
+						handler: "cleanUpCacheHandler",
+						cron: "59 59 23 * * ? *",
+						state: "1"
+					},
+					{
+						id: "2",
+						title: "自动审核",
+						handler: "automaticAuditHandler",
+						cron: "0 0 * * * ? *",
+						state: "1"
+					},
+					{
+						id: "3",
+						title: "清理未实名用户",
+						handler: "deleteUserHandler",
+						cron: "0 0 0 * * ? *",
+						state: "-1"
+					}
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			add(){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open()
+				})
+			},
+			edit(task){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('edit').setData(task)
+				})
+			},
+			del(task){
+				this.$confirm(`确认删除 ${task.title} 计划任务吗？`,'提示', {
+					type: 'warning',
+					confirmButtonText: '删除',
+					confirmButtonClass: 'el-button--danger'
+				}).then(() => {
+					this.list.splice(this.list.findIndex(item => item.id === task.id), 1)
+				}).catch(() => {
+					//取消
+				})
+			},
+			logs(){
+				this.dialog.logsVisible = true
+			},
+			run(task){
+				this.$message.success(`已成功执行计划任务：${task.title}`)
+			},
+			//本地更新数据
+			handleSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.list.push(data)
+				}else if(mode=='edit'){
+					this.list.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.task {height: 210px;}
+	.task-item h2 {font-size: 15px;color: #3c4a54;padding-bottom:15px;}
+	.task-item li {list-style-type:none;margin-bottom: 10px;}
+	.task-item li h4 {font-size: 12px;font-weight: normal;color: #999;}
+	.task-item li p {margin-top: 5px;}
+	.task-item .bottom {border-top: 1px solid #EBEEF5;text-align: right;padding-top:10px;display: flex;justify-content: space-between;align-items: center;}
+
+	.task-add {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;cursor: pointer;color: #999;}
+	.task-add:hover {color: #409EFF;}
+	.task-add i {font-size: 30px;}
+	.task-add p {font-size: 12px;margin-top: 20px;}
+</style>
diff --git a/ui/src/views/setting/task/logs.vue b/ui/src/views/setting/task/logs.vue
new file mode 100644
index 0000000..2697983
--- /dev/null
+++ b/ui/src/views/setting/task/logs.vue
@@ -0,0 +1,108 @@
+<!--
+ * @Descripttion: 系统计划任务配置
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月7日09:28:32
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-container>
+		<el-main  style="padding:0 20px;">
+			<scTable ref="table" :data="data" stripe>
+				<el-table-column label="执行时间" prop="time" width="200"></el-table-column>
+				<el-table-column label="执行结果" prop="state" width="100">
+					<template #default="scope">
+						<span v-if="scope.row.state==200" style="color: #67C23A;"><el-icon><el-icon-success-filled /></el-icon></span>
+						<span v-else style="color: #F56C6C;"><el-icon><el-icon-circle-close-filled /></el-icon></span>
+					</template>
+				</el-table-column>
+				<el-table-column label="执行日志" prop="logs" width="100" fixed="right">
+					<template #default="scope">
+						<el-button size="small" @click="show(scope.row)" type="text">日志</el-button>
+					</template>
+				</el-table-column>
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<el-drawer title="日志" v-model="logsVisible" :size="500" direction="rtl" destroy-on-close>
+		<el-main  style="padding:0 20px 20px 20px;">
+			<pre style="font-size: 12px;color: #999;padding:20px;background: #333;font-family: consolas;line-height: 1.5;overflow: auto;">{{demoLog}}</pre>
+		</el-main>
+	</el-drawer>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				logsVisible: false,
+				demoLog: `2021-07-07 12:35:00 [com.xxl.job.core.thread.JobThread#run]-[124]-[Thread-308]
+----------- xxl-job job execute start -----------
+----------- Param:
+2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[31]-[Thread-308] aqshMasterDataSendHandler start
+2021-07-07 12:35:00 [com.heronshn.reservation.data.service.impl.AqshVehicleServiceImpl#send]-[42]-[Thread-308] send 45
+2021-07-07 12:35:00 [com.heronshn.reservation.data.service.impl.AqshVehicleServiceImpl#send]-[45]-[Thread-308] webapi http://127.0.0.1:48080
+2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[33]-[Thread-308] aqshMasterDataSendHandler vehicle end
+2021-07-07 12:35:00 [com.heronshn.reservation.jobhandler.AqshMasterDataSendHandler#execute]-[35]-[Thread-308] aqshMasterDataSendHandler stop
+2021-07-07 12:35:00 [com.xxl.job.core.thread.JobThread#run]-[158]-[Thread-308]
+----------- xxl-job job execute end(finish) -----------
+----------- ReturnT:ReturnT [code=200, msg=null, content=null]
+2021-07-07 12:35:00 [com.xxl.job.core.thread.TriggerCallbackThread#callbackLog]-[176]-[Thread-10]
+----------- xxl-job job callback finish.
+
+[Load Log Finish]`,
+				data: [
+					{
+						time: "2021-07-07 00:00:00",
+						state: "500",
+						logs: ""
+					},
+					{
+						time: "2021-07-06 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-05 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-04 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-03 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-02 00:00:00",
+						state: "200",
+						logs: ""
+					},
+					{
+						time: "2021-07-01 00:00:00",
+						state: "200",
+						logs: ""
+					}
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			show(){
+				this.logsVisible = true;
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/task/save.vue b/ui/src/views/setting/task/save.vue
new file mode 100644
index 0000000..260ab94
--- /dev/null
+++ b/ui/src/views/setting/task/save.vue
@@ -0,0 +1,113 @@
+<!--
+ * @Descripttion: 系统计划任务配置
+ * @version: 1.2
+ * @Author: sakuya
+ * @Date: 2021年7月7日09:28:32
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年7月10日20:56:47
+-->
+
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="400" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
+			<el-form-item label="描述" prop="title">
+				<el-input v-model="form.title" placeholder="计划任务标题" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="执行类" prop="handler">
+				<el-input v-model="form.handler" placeholder="计划任务执行类名称" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="定时规则" prop="cron">
+				<sc-cron v-model="form.cron" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></sc-cron>
+			</el-form-item>
+			<el-form-item label="是否启用" prop="state">
+				<el-switch v-model="form.state" active-value="1" inactive-value="-1"></el-switch>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	import scCron from '@/components/scCron';
+	
+	export default {
+		components: {
+			scCron
+		},
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				mode: "add",
+				titleMap: {
+					add: '新增计划任务',
+					edit: '编辑计划任务'
+				},
+				form: {
+					id:"",
+					title: "",
+					handler: "",
+					cron: "",
+					state: "1"
+				},
+				rules: {
+					title:[
+						{required: true, message: '请填写标题'}
+					],
+					handler:[
+						{required: true, message: '请填写执行类'}
+					],
+					cron:[
+						{required: true, message: '请填写定时规则'}
+					]
+				},
+				visible: false,
+				isSaveing: false,
+				shortcuts: [
+					{
+						text: "每天8点和12点 (自定义追加)",
+						value: "0 0 8,12 * * ?"
+					}
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate((valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						setTimeout(()=>{
+							this.isSaveing = false;
+							this.visible = false;
+							this.$message.success("操作成功")
+							this.$emit('success', this.form, this.mode)
+						},1000)
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.title = data.title
+				this.form.handler = data.handler
+				this.form.cron = data.cron
+				this.form.state = data.state
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/user/index.vue b/ui/src/views/setting/user/index.vue
new file mode 100644
index 0000000..49842e4
--- /dev/null
+++ b/ui/src/views/setting/user/index.vue
@@ -0,0 +1,191 @@
+<template>
+	<el-container>
+		<el-aside width="200px" v-loading="showGrouploading">
+			<el-container>
+				<el-header>
+					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
+				</el-header>
+				<el-main class="nopadding">
+					<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-container>
+				<el-header>
+					<div class="left-panel">
+						<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+						<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0" @click="batch_del"></el-button>
+						<el-button type="primary" plain :disabled="selection.length==0">分配角色</el-button>
+						<el-button type="primary" plain :disabled="selection.length==0">密码重置</el-button>
+					</div>
+					<div class="right-panel">
+						<div class="right-panel-search">
+							<el-input v-model="search.name" placeholder="登录账号 / 姓名" clearable></el-input>
+							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
+						</div>
+					</div>
+				</el-header>
+				<el-main class="nopadding">
+					<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter>
+						<el-table-column type="selection" width="50"></el-table-column>
+						<el-table-column label="ID" prop="id" width="80" sortable='custom'></el-table-column>
+						<el-table-column label="头像" width="80" column-key="filterAvatar" :filters="[{text: '已上传', value: '1'}, {text: '未上传', value: '0'}]">
+							<template #default="scope">
+								<el-avatar :src="scope.row.avatar" size="small"></el-avatar>
+							</template>
+						</el-table-column>
+						<el-table-column label="登录账号" prop="userName" width="150" sortable='custom' column-key="filterUserName" :filters="[{text: '系统账号', value: '1'}, {text: '普通账号', value: '0'}]"></el-table-column>
+						<el-table-column label="姓名" prop="name" width="150" sortable='custom'></el-table-column>
+						<el-table-column label="所属角色" prop="groupName" width="200" sortable='custom'></el-table-column>
+						<el-table-column label="加入时间" prop="date" width="170" sortable='custom'></el-table-column>
+						<el-table-column label="操作" fixed="right" align="right" width="140">
+							<template #default="scope">
+								<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
+								<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
+								<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
+									<template #reference>
+										<el-button type="text" size="small">删除</el-button>
+									</template>
+								</el-popconfirm>
+							</template>
+						</el-table-column>
+
+					</scTable>
+				</el-main>
+		</el-container>
+	</el-container>
+
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save=false"></save-dialog>
+
+</template>
+
+<script>
+	import saveDialog from './save'
+
+	export default {
+		name: 'user',
+		components: {
+			saveDialog
+		},
+		data() {
+			return {
+				dialog: {
+					save: false
+				},
+				showGrouploading: false,
+				groupFilterText: '',
+				group: [],
+				apiObj: this.$API.system.user.list,
+				selection: [],
+				search: {
+					name: null
+				}
+			}
+		},
+		watch: {
+			groupFilterText(val) {
+				this.$refs.group.filter(val);
+			}
+		},
+		mounted() {
+			this.getGroup()
+		},
+		methods: {
+			//添加
+			add(){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open()
+				})
+			},
+			//编辑
+			table_edit(row){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('edit').setData(row)
+				})
+			},
+			//查看
+			table_show(row){
+				this.dialog.save = true
+				this.$nextTick(() => {
+					this.$refs.saveDialog.open('show').setData(row)
+				})
+			},
+			//删除
+			async table_del(row, index){
+				var reqData = {id: row.id}
+				var res = await this.$API.demo.post.post(reqData);
+				if(res.code == 200){
+					//这里选择刷新整个表格 OR 插入/编辑现有表格数据
+					this.$refs.table.tableData.splice(index, 1);
+					this.$message.success("删除成功")
+				}else{
+					this.$alert(res.message, "提示", {type: 'error'})
+				}
+			},
+			//批量删除
+			async batch_del(){
+				this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
+					type: 'warning'
+				}).then(() => {
+					const loading = this.$loading();
+					this.selection.forEach(item => {
+						this.$refs.table.tableData.forEach((itemI, indexI) => {
+							if (item.id === itemI.id) {
+								this.$refs.table.tableData.splice(indexI, 1)
+							}
+						})
+					})
+					loading.close();
+					this.$message.success("操作成功")
+				}).catch(() => {
+
+				})
+			},
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			//加载树数据
+			async getGroup(){
+				this.showGrouploading = true;
+				var res = await this.$API.system.role.list.get();
+				this.showGrouploading = false;
+				var allNode ={id: '', label: '所有'}
+				res.data.unshift(allNode);
+				this.group = res.data;
+			},
+			//树过滤
+			groupFilterNode(value, data){
+				if (!value) return true;
+				return data.label.indexOf(value) !== -1;
+			},
+			//树点击事件
+			groupClick(data){
+				var params = {
+					groupId: data.id
+				}
+				this.$refs.table.reload(params)
+			},
+			//搜索
+			upsearch(){
+				this.$refs.table.upData(this.search)
+			},
+			//本地更新数据
+			handleSuccess(data, mode){
+				if(mode=='add'){
+					data.id = new Date().getTime()
+					this.$refs.table.tableData.unshift(data)
+				}else if(mode=='edit'){
+					this.$refs.table.tableData.filter(item => item.id===data.id ).forEach(item => {
+						Object.assign(item, data)
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/setting/user/save.vue b/ui/src/views/setting/user/save.vue
new file mode 100644
index 0000000..6c0397f
--- /dev/null
+++ b/ui/src/views/setting/user/save.vue
@@ -0,0 +1,146 @@
+<template>
+	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
+		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
+			<el-form-item label="头像" prop="avatar">
+				<sc-upload v-model="form.avatar" title="上传头像"></sc-upload>
+			</el-form-item>
+			<el-form-item label="登录账号" prop="userName">
+				<el-input v-model="form.userName" placeholder="用于登录系统" clearable></el-input>
+			</el-form-item>
+			<el-form-item label="姓名" prop="name">
+				<el-input v-model="form.name" placeholder="请输入完整的真实姓名" clearable></el-input>
+			</el-form-item>
+			<template v-if="mode=='add'">
+				<el-form-item label="登录密码" prop="password">
+					<el-input type="password" v-model="form.password" clearable show-password></el-input>
+				</el-form-item>
+				<el-form-item label="确认密码" prop="password2">
+					<el-input type="password" v-model="form.password2" clearable show-password></el-input>
+				</el-form-item>
+			</template>
+			<el-form-item label="所属角色" prop="group">
+				<el-cascader v-model="form.group" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<el-button @click="visible=false" >取 消</el-button>
+			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		emits: ['success', 'closed'],
+		data() {
+			return {
+				mode: "add",
+				titleMap: {
+					add: '新增用户',
+					edit: '编辑用户',
+					show: '查看'
+				},
+				visible: false,
+				isSaveing: false,
+				//表单数据
+				form: {
+					id:"",
+					userName: "",
+					avatar: "",
+					name: "",
+					group: ""
+				},
+				//验证规则
+				rules: {
+					avatar:[
+						{required: true, message: '请上传头像'}
+					],
+					userName: [
+						{required: true, message: '请输入登录账号'}
+					],
+					name: [
+						{required: true, message: '请输入真实姓名'}
+					],
+					password: [
+						{required: true, message: '请输入登录密码'},
+						{validator: (rule, value, callback) => {
+							if (this.form.password2 !== '') {
+								this.$refs.dialogForm.validateField('password2');
+							}
+							callback();
+						}}
+					],
+					password2: [
+						{required: true, message: '请再次输入密码'},
+						{validator: (rule, value, callback) => {
+							if (value !== this.form.password) {
+								callback(new Error('两次输入密码不一致!'));
+							}else{
+								callback();
+							}
+						}}
+					],
+					group: [
+						{required: true, message: '请选择所属角色'}
+					]
+				},
+				//所需数据选项
+				groups: [],
+				groupsProps: {
+					value: "id",
+					multiple: true,
+					checkStrictly: true
+				}
+			}
+		},
+		mounted() {
+			this.getGroup()
+		},
+		methods: {
+			//显示
+			open(mode='add'){
+				this.mode = mode;
+				this.visible = true;
+				return this
+			},
+			//加载树数据
+			async getGroup(){
+				var res = await this.$API.system.role.list.get();
+				this.groups = res.data;
+			},
+			//表单提交方法
+			submit(){
+				this.$refs.dialogForm.validate(async (valid) => {
+					if (valid) {
+						this.isSaveing = true;
+						var res = await this.$API.demo.post.post(this.form);
+						this.isSaveing = false;
+						if(res.code == 200){
+							this.$emit('success', this.form, this.mode)
+							this.visible = false;
+							this.$message.success("操作成功")
+						}else{
+							this.$alert(res.message, "提示", {type: 'error'})
+						}
+					}else{
+						return false;
+					}
+				})
+			},
+			//表单注入数据
+			setData(data){
+				this.form.id = data.id
+				this.form.userName = data.userName
+				this.form.avatar = data.avatar
+				this.form.name = data.name
+				this.form.group = data.group
+
+				//可以和上面一样单个注入，也可以像下面一样直接合并进去
+				//Object.assign(this.form, data)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/template/blank.vue b/ui/src/views/template/blank.vue
new file mode 100644
index 0000000..6d2f86d
--- /dev/null
+++ b/ui/src/views/template/blank.vue
@@ -0,0 +1,17 @@
+<template>
+	<el-empty :image-size="200" :description="title"></el-empty>
+</template>
+
+<script>
+	export default {
+		name: 'blank',
+		data() {
+			return {
+				title: "BLANK PAGE :)"
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/template/calendar.vue b/ui/src/views/template/calendar.vue
new file mode 100644
index 0000000..f7f4d8d
--- /dev/null
+++ b/ui/src/views/template/calendar.vue
@@ -0,0 +1,154 @@
+<template>
+	<el-container>
+		<el-main class="nopadding">
+			<el-calendar v-model="toDay">
+				<template #dateCell="{data}">
+					<div class="calendar-item">
+						<h2>{{ data.day.split('-')[2] }}</h2>
+						<div v-if="getData(data.day) && data.type=='current-month'" class="calendar-item-info">
+							<p><el-progress :percentage="getData(data.day).plan" :show-text="false"></el-progress></p>
+							<p><el-progress :percentage="getData(data.day).complete" status="success" :show-text="false"></el-progress></p>
+						</div>
+					</div>
+				</template>
+			</el-calendar>
+		</el-main>
+		<el-aside style="width: 400px;border-left: 1px solid #e6e6e6;">
+			<el-container>
+				<el-header>
+					<h2 class="dayTitle"><el-icon><el-icon-calendar /></el-icon>{{day}}</h2>
+				</el-header>
+				<el-main>
+					<div class="task-list">
+						<template v-if="dayItem">
+							<el-card shadow="hover" v-for="task in dayItem.tasks" :key="task.id" :class="stateMap[task.state]">
+								<h2>{{task.title}}</h2>
+								<div class="task-bottom">
+									<div class="tags">
+										<el-tag type="info" size="small">#{{task.id}}</el-tag>
+										<el-tag v-if="task.state=='open'" type="info" size="small">{{task.state}}</el-tag>
+										<el-tag v-if="task.state=='complete'" type="success" size="small">{{task.state}}</el-tag>
+										<el-tag v-if="task.state=='timeout'" type="danger" size="small">{{task.state}}</el-tag>
+									</div>
+									<el-avatar :size="20" :src="task.avatar"></el-avatar>
+								</div>
+							</el-card>
+						</template>
+						<template v-else>
+							<el-empty description="无工作任务" :image-size="100"></el-empty>
+						</template>
+					</div>
+				</el-main>
+			</el-container>
+		</el-aside>
+	</el-container>
+</template>
+
+<script>
+	export default {
+		name: 'calendar',
+		data(){
+			return {
+				stateMap: {
+					open: "open",
+					complete: "complete",
+					timeout: "timeout"
+				},
+				toDay: new Date(this.demoDay()),
+				data: {
+					[this.demoDay()]: {
+						plan: 80,
+						complete: 66,
+						tasks: [
+							{
+								id: "3601",
+								title: "vite2 on demand loading popconfirm style missing",
+								avatar: "img/avatar.jpg",
+								state: "complete"
+							},
+							{
+								id: "3602",
+								title: "Switch prevent switching invalid",
+								avatar: "img/avatar.jpg",
+								state: "complete"
+							},
+							{
+								id: "3603",
+								title: "The use of paging in vue3 is inconsistent with the official UI display",
+								avatar: "img/avatar.jpg",
+								state: "timeout"
+							}
+						]
+					},
+					[this.demoDay(1)]: {
+						plan: 80,
+						complete: 0,
+						tasks: [
+							{
+								id: "3604",
+								title: "el-switch @change is auto triggered when page load",
+								avatar: "img/avatar.jpg",
+								state: "open"
+							}
+						]
+					},
+					[this.demoDay(2)]: {
+						plan: 80,
+						complete: 0,
+						tasks: [
+							{
+								id: "3605",
+								title: "locale plugin problem happen in production mode when install element-plus on demand",
+								avatar: "img/avatar.jpg",
+								state: "open"
+							},
+							{
+								id: "3606",
+								title: "table uses fixed=right, which leads to the dislocation of hover style",
+								avatar: "img/avatar.jpg",
+								state: "open"
+							}
+						]
+					}
+				}
+			}
+		},
+		computed: {
+			day(){
+				return this.$TOOL.dateFormat(this.toDay,"yyyy-MM-dd");
+			},
+			dayItem(){
+				return this.getData(this.day)
+			}
+		},
+		methods: {
+			getData(date){
+				return this.data[date]
+			},
+			demoDay(n=0){
+				var curDate = new Date()
+				var oneDayTime = 24*60*60*1000
+				var rDate = new Date(curDate.getTime() + (oneDayTime*n) )
+				return this.$TOOL.dateFormat(rDate, "yyyy-MM-dd");
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.calendar-item h2 {font-size: 14px;}
+	.calendar-item-info {margin-top: 15px;}
+	.calendar-item-info p {margin-top: 5px;}
+
+	.task-list .el-card {margin-bottom: 15px;border-left: 5px solid #ddd;cursor: pointer;}
+
+	.task-list .el-card.open {border-color: #ddd;}
+	.task-list .el-card.complete {border-color: #67C23A;}
+	.task-list .el-card.timeout {border-color: #f56c6c;}
+
+	.task-list h2 {font-size: 14px;font-weight: normal;}
+	.task-bottom {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;}
+	.task-bottom .tags .el-tag {margin-right: 5px;}
+	.dayTitle {font-size: 14px;display: flex;align-items: center;}
+	.dayTitle i {color: #999;margin-right: 10px;}
+</style>
diff --git a/ui/src/views/template/chartlist.vue b/ui/src/views/template/chartlist.vue
new file mode 100644
index 0000000..f3304a4
--- /dev/null
+++ b/ui/src/views/template/chartlist.vue
@@ -0,0 +1,222 @@
+<template>
+	<el-container>
+		<el-header>
+			<div class="left-panel">
+				<el-radio-group v-model="dateType" style="margin-right: 15px;">
+					<el-radio-button label="今天"></el-radio-button>
+					<el-radio-button label="昨天"></el-radio-button>
+					<el-radio-button label="最近7天"></el-radio-button>
+					<el-radio-button label="最近30天"></el-radio-button>
+				</el-radio-group>
+				<el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+			</div>
+		</el-header>
+		<el-main>
+			<el-card shadow="never">
+				<div class="number-data">
+					<div class="item">
+						<h2>浏览量(PV)
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										即通常说的Page View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>65,715</p>
+					</div>
+					<div class="item">
+						<h2>访客数(UV)
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>8,936</p>
+					</div>
+					<div class="item">
+						<h2>IP数
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										一天之内您网站的独立访问ip数。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>10,279</p>
+					</div>
+					<div class="item">
+						<h2>跳出率
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>27.92%</p>
+					</div>
+					<div class="item">
+						<h2>平均访问时长
+							<el-tooltip effect="light">
+								<template #content>
+									<div style="width: 200px;line-height: 2;">
+										访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。
+									</div>
+								</template>
+								<el-icon><el-icon-question-filled /></el-icon>
+							</el-tooltip>
+						</h2>
+						<p>00:19:05</p>
+					</div>
+				</div>
+				<div class="chart">
+					<el-row>
+						<el-col :span="8">
+							<scEcharts height="250px" :option="pie"></scEcharts>
+						</el-col>
+						<el-col :span="16">
+							<scEcharts height="250px" :option="option"></scEcharts>
+						</el-col>
+					</el-row>
+				</div>
+			</el-card>
+			<el-card shadow="never">
+				<scTable ref="table" :data="data" show-summary height="auto">
+					<el-table-column label="来源类型" prop="type"></el-table-column>
+					<el-table-column label="网站基础指标" align="center">
+						<el-table-column label="访客数(UV)" prop="uv" width="150"></el-table-column>
+						<el-table-column label="IP数" prop="ip" width="150"></el-table-column>
+					</el-table-column>
+					<el-table-column label="流量质量指标" align="center">
+						<el-table-column label="跳出率" prop="out" width="150"></el-table-column>
+						<el-table-column label="平均访问时长" prop="time" width="150"></el-table-column>
+					</el-table-column>
+				</scTable>
+			</el-card>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	export default {
+		name: 'chartlist',
+		components: {
+			scEcharts
+		},
+		data(){
+			return {
+				dateType: "今天",
+				date: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+				data: [
+					{
+						type: "直接访问",
+						pv: "57,847",
+						uv: "7,129",
+						ip: "8,330",
+						out: "26.38%",
+						time: "00:20:35"
+					},
+					{
+						type: "搜索引擎",
+						pv: "5,942",
+						uv: "1,338",
+						ip: "1,449",
+						out: "33.49%",
+						time: "00:11:31"
+					},
+					{
+						type: "外部链接",
+						pv: "1,926",
+						uv: "469",
+						ip: "500",
+						out: "44.53%",
+						time: "00:08:49"
+					}
+				],
+				pie: {
+					tooltip: {
+						trigger: 'item'
+					},
+					series: [
+						{
+							name: '访问来源',
+							type: 'pie',
+							radius: ['55%', '70%'],
+							itemStyle: {
+								borderRadius: 5,
+								borderColor: '#fff',
+								borderWidth: 1
+							},
+							data: [
+								{value: 1048, name: '搜索引擎'},
+								{value: 235, name: '直接访问'},
+								{value: 180, name: '外部链接'}
+							]
+						}
+					]
+				},
+				option: {
+					legend: {
+						data: ['直接访问', '搜索引擎', '外部链接']
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: {
+						type: 'category',
+						data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
+						boundaryGap: false,
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+						name: '直接访问',
+						data: [120, 210, 150, 80, 70, 110, 130],
+						type: 'line',
+					},
+					{
+						name: '搜索引擎',
+						data: [110, 180, 120, 120, 60, 90, 110],
+						type: 'line',
+					},
+					{
+						name: '外部链接',
+						data: [50, 90, 60, 60, 30, 40, 50],
+						type: 'line',
+					}]
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+
+	.number-data {display: flex;}
+	.number-data .item {flex:1;border-right: 1px solid #f0f0f0;padding:0 20px;}
+	.number-data .item:last-child {border: 0;}
+	.number-data .item h2 {font-size: 12px;color: #787a7d;font-weight: normal;display: flex;align-items: center;}
+	.number-data .item h2 i {margin-left: 5px;color: #8cc5ff;cursor: pointer;}
+	.number-data .item p {font-size: 20px;color: #121315;margin-top: 10px;}
+
+	.chart {border-top: 1px solid #f0f0f0;margin-top: 20px;padding-top: 20px;}
+
+	[data-theme='dark'] .number-data .item {border-color: var(--el-border-color-base);}
+	[data-theme='dark'] .number-data .item p {color: #d0d0d0;}
+	[data-theme='dark'] .chart {border-color: var(--el-border-color-base);}
+</style>
diff --git a/ui/src/views/template/list/index.vue b/ui/src/views/template/list/index.vue
new file mode 100644
index 0000000..bdd001a
--- /dev/null
+++ b/ui/src/views/template/list/index.vue
@@ -0,0 +1,249 @@
+<!--
+ * @Descripttion: 详情列表模板
+ * @version: 1.1
+ * @Author: sakuya
+ * @Date: 2021年6月16日15:05:15
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年7月22日12:18:50
+-->
+
+<template>
+	<el-container>
+		<el-header style="display: block;height:auto;">
+			<el-row :gutter="15">
+				<el-col :lg="6">
+					<sc-statistic title="数量" value="12"  suffix="项"></sc-statistic>
+				</el-col>
+				<el-col :lg="6">
+					<sc-statistic title="总进度" value="70.0" suffix="%"></sc-statistic>
+				</el-col>
+				<el-col :lg="6">
+					<sc-statistic title="收入" value="0.0" prefix="¥" groupSeparator></sc-statistic>
+				</el-col>
+				<el-col :lg="6">
+					<sc-statistic title="支出" value="200" prefix="¥" groupSeparator></sc-statistic>
+				</el-col>
+			</el-row>
+		</el-header>
+		<el-header class="header-tabs">
+			<el-tabs type="border-card">
+				<el-tab-pane label="所有"></el-tab-pane>
+				<el-tab-pane label="未完成 (2)"></el-tab-pane>
+				<el-tab-pane label="弃坑"></el-tab-pane>
+				<el-tab-pane label="其他"></el-tab-pane>
+			</el-tabs>
+		</el-header>
+		<el-header>
+			<div class="left-panel">
+				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
+				<el-button v-if="selection.length>0" type="danger" plain icon="el-icon-delete"></el-button>
+				<el-button v-if="selection.length>0">变更状态</el-button>
+				<el-button v-if="selection.length>0">推送至队列</el-button>
+			</div>
+			<div class="right-panel">
+				<div class="right-panel-search">
+					<scFilterBar :options="options" @change="change"></scFilterBar>
+				</div>
+			</div>
+		</el-header>
+		<el-main class="nopadding">
+			<scTable tableName="templateList" ref="table" :data="list" :column="column" @selection-change="selectionChange" stripe>
+
+				<!-- 各列自定义template -->
+				<template #state="scope">
+					<sc-status-indicator v-if="scope.row.state=='1'" type="primary"></sc-status-indicator>
+					<sc-status-indicator v-if="scope.row.state=='2'" pulse type="danger"></sc-status-indicator>
+				</template>
+				<template #name="scope">
+					<h4>{{scope.row.name}}</h4>
+					<p>{{scope.row.subtitle}}</p>
+				</template>
+				<template #type="scope">
+					<el-tag>{{scope.row.type}}</el-tag>
+				</template>
+				<template #progress="scope">
+					<el-progress v-if="scope.row.state=='1'" :percentage="scope.row.progress"></el-progress>
+					<el-progress v-if="scope.row.state=='2'" :percentage="scope.row.progress" status="exception"></el-progress>
+				</template>
+
+				<!-- 固定列-选择列 -->
+				<el-table-column type="selection" width="50" fixed></el-table-column>
+
+				<!-- 固定列-操作列 -->
+				<el-table-column label="操作" fixed="right" align="right" width="120">
+					<template #default="scope">
+						<el-button type="text" size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
+						<el-divider direction="vertical"></el-divider>
+						<el-dropdown>
+							<el-button  type="text" size="small">更多<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon></el-button>
+							<template #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item @click="table_edit(scope.row, scope.$index)">编辑</el-dropdown-item>
+									<el-dropdown-item>推送至队列</el-dropdown-item>
+									<el-dropdown-item divided>删除</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</template>
+				</el-table-column>
+
+			</scTable>
+		</el-main>
+	</el-container>
+
+	<el-drawer v-model="info" :size="800" custom-class="drawerBG" direction="rtl" destroy-on-close>
+		<info></info>
+	</el-drawer>
+
+</template>
+
+<script>
+	import scStatistic from '@/components/scStatistic';
+	import scFilterBar from '@/components/scFilterBar';
+	import info from './info'
+
+	export default {
+		name: 'list',
+		components: {
+			scStatistic,
+			scFilterBar,
+			info
+		},
+		data() {
+			return {
+				options: [
+					{
+						label: '名称',
+						value: 'name',
+						type: 'text'
+					},
+					{
+						label: '类型',
+						value: 'type',
+						type: 'select',
+						extend: {
+							multiple: true,
+							data:[
+								{
+									label: "数据",
+									value: "1"
+								},
+								{
+									label: "表单",
+									value: "2"
+								}
+							]
+						}
+					},
+					{
+						label: '创建时间',
+						value: 'date',
+						type: 'daterange',
+					}
+				],
+				column: [
+					{
+						label: "ID",
+						prop: "id",
+						width: "100",
+						sortable: true,
+						hide: true,
+					},
+					{
+						label: "名称",
+						prop: "name",
+						width: "300"
+					},
+					{
+						label: "状态",
+						prop: "state",
+						width: "100",
+						filters: [{text: '正常', value: '1'}, {text: '异常', value: '2'}]
+					},
+					{
+						label: "类型",
+						prop: "type",
+						width: "100",
+						filters: [{text: '数据', value: '数据'}, {text: '表单', value: '表单'}]
+					},
+					{
+						label: "负责人",
+						prop: "user",
+						width: "100"
+					},
+					{
+						label: "进度",
+						prop: "progress",
+						width: "250"
+					},
+					{
+						label: "创建时间",
+						prop: "time",
+						width: "150",
+						sortable: true
+					},
+				],
+				group: "0",
+				selection: [],
+				list: [],
+				info: false
+			}
+		},
+		mounted() {
+			this.list = [
+				{
+					id: "5001",
+					name: "scEcharts",
+					subtitle: "重新封装的Echarts，暴露源对象",
+					state: "1",
+					type: "数据",
+					progress: 70,
+					user: "Sakuya",
+					time: "2010-10-10"
+				},
+				{
+					id: "5002",
+					name: "scEditor",
+					subtitle: "Tinymce封装的富文本编辑器",
+					state: "2",
+					type: "表单",
+					progress: 40,
+					user: "Sakuya",
+					time: "2010-10-10"
+				}
+			]
+		},
+		methods: {
+			//表格选择后回调事件
+			selectionChange(selection){
+				this.selection = selection;
+			},
+			add(){
+				this.$router.push({
+					path: `/template/list/save`
+				});
+			},
+			table_show(row, index){
+				console.log(row, index);
+				this.info = true;
+			},
+			table_edit(row){
+				this.$router.push({
+					path: `/template/list/save`,
+					query: {
+						id: row.id
+					}
+				});
+			},
+			filterHandler(value, row, column){
+				const property = column.property;
+				return row[property] === value;
+			},
+			change(data){
+				console.log(data);
+			}
+		}
+	}
+</script>
+
+<style></style>
diff --git a/ui/src/views/template/list/info.vue b/ui/src/views/template/list/info.vue
new file mode 100644
index 0000000..0e26b2d
--- /dev/null
+++ b/ui/src/views/template/list/info.vue
@@ -0,0 +1,153 @@
+<template>
+	<el-main style="padding:0 20px;">
+
+		<el-steps :active="3" finish-status="success" align-center style="margin-bottom:40px;">
+			<el-step title="立项"></el-step>
+			<el-step title="调研"></el-step>
+			<el-step title="设计"></el-step>
+			<el-step title="开发"></el-step>
+			<el-step title="完成"></el-step>
+		</el-steps>
+
+		<div class="make">
+			<div class="make-left">
+				<el-button type="primary">主要操作</el-button>
+				<el-button>次要操作</el-button>
+				<el-button>次要操作</el-button>
+				<el-dropdown>
+					<el-button icon="el-icon-arrow-down"></el-button>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item>更改状态</el-dropdown-item>
+							<el-dropdown-item>发送队列</el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
+			</div>
+			<div class="make-right">
+				<el-button type="danger" plain icon="el-icon-delete"></el-button>
+			</div>
+		</div>
+
+		<el-card shadow="never" header="统计">
+			<sc-echarts ref="chart" height="150px" :option="option"></sc-echarts>
+		</el-card>
+
+		<el-card shadow="never">
+			<el-tabs>
+				<el-tab-pane label="基础信息">
+					<el-descriptions :column="2" border>
+					    <el-descriptions-item label="ID">5001</el-descriptions-item>
+					    <el-descriptions-item label="名称">scEcharts</el-descriptions-item>
+						<el-descriptions-item label="参与者">
+							<el-tag size="small">Sakuya</el-tag>
+							<el-tag size="small">Lolowan</el-tag>
+						</el-descriptions-item>
+					    <el-descriptions-item label="类型">数据</el-descriptions-item>
+					    <el-descriptions-item label="创建时间">2010-10-10</el-descriptions-item>
+						<el-descriptions-item label="进度">70%</el-descriptions-item>
+					</el-descriptions>
+				</el-tab-pane>
+				<el-tab-pane label="详细信息">
+					<el-empty description="没有详细信息" :image-size="80"></el-empty>
+				</el-tab-pane>
+			</el-tabs>
+		</el-card>
+
+		<el-card shadow="never" header="日志">
+			<el-timeline style="padding-left: 10px;padding-top: 10px;">
+				<el-timeline-item v-for="(item, index) in logs" :key="index" :timestamp="item.timestamp" :color="index==0?'#409EFF':''">
+					<div class="log-item">
+						<el-avatar class="avatar" :size="24" :src="item.icon"></el-avatar>
+						<span class="user">{{item.user}}</span>
+						<p>{{item.content}}</p>
+					</div>
+					<div v-if="item.msg" class="log-msg">
+						<el-alert :title="item.msg" :closable="false"></el-alert>
+					</div>
+				</el-timeline-item>
+			</el-timeline>
+		</el-card>
+
+	</el-main>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	export default {
+		components: {
+			scEcharts
+		},
+		data() {
+			return {
+				option: {
+					grid: {
+						top: '10px'
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: {
+						type: 'category',
+						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+						data: [120, 200, 150, 80, 70, 110, 130],
+						type: 'bar',
+						barWidth: '15px',
+						itemStyle: {
+							borderRadius:[15, 15, 0, 0]
+						}
+					},
+					{
+						data: [110, 180, 120, 120, 60, 90, 110],
+						type: 'line',
+						smooth: true
+					}]
+				},
+				logs: [
+					{
+						user: 'Lolowan',
+						icon: 'img/avatar2.gif',
+						content: '完成设计',
+						msg: '@Sakuya 设计完成了，赶紧开发吧',
+						timestamp: '2021-10-13 13:41:19'
+					},
+					{
+						user: 'Sakuya',
+						icon: 'img/avatar.jpg',
+						content: '完成调研',
+						msg: '',
+						timestamp: '2021-10-11 22:08:30'
+					},
+					{
+						user: 'Sakuya',
+						icon: 'img/avatar.jpg',
+						content: '创建立项',
+						msg: '',
+						timestamp: '2021-10-10 08:31:23'
+					},
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.make {margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;}
+	.log-item {display: flex;align-items: center;font-size: 13px;}
+	.log-item .user {color: #333;margin: 0 10px;display: inline-block;}
+	.log-item p {color: #666;}
+	.log-msg {margin-top: 10px;}
+</style>
diff --git a/ui/src/views/template/list/save.vue b/ui/src/views/template/list/save.vue
new file mode 100644
index 0000000..9628cf3
--- /dev/null
+++ b/ui/src/views/template/list/save.vue
@@ -0,0 +1,73 @@
+<!--
+ * @Descripttion: 多路由复用一个路由组件DEMO文件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月20日09:28:19
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<sc-page-header :title="id?'ID:'+id:'页面标题'" description="可用于非常复杂的表单提交，如一些较为简单的表单提交应使用dialog或者drawer更合适" icon="el-icon-burger"></sc-page-header>
+	<el-main>
+		<el-alert title="因为keep-alive只接受组件name,导致多路由共用组件时,关闭或刷新一个标签导致其他同一组件的页面缓存失效,后续还在寻找完美的解决方案." type="error" style="margin-bottom: 15px;"></el-alert>
+		<el-card shadow="never">
+			<el-form :model="form" :rules="rules" ref="form" label-width="100px">
+				<el-form-item label="名称" prop="name">
+					<el-input v-model="form.name" placeholder="请输入名称" clearable></el-input>
+					<div class="el-form-item-msg" data-v-b33b3cf8="">组件名字以sc开头，并坚持以“小驼峰”命名规则</div>
+				</el-form-item>
+				<el-form-item label="缩略图" prop="img">
+					<sc-upload v-model="form.img" title="上传缩略图"></sc-upload>
+				</el-form-item>
+				<el-form-item label="类型" prop="type">
+					<el-radio-group v-model="form.type">
+						<el-radio-button label="1">数据</el-radio-button>
+						<el-radio-button label="2">表单</el-radio-button>
+						<el-radio-button label="3">样式</el-radio-button>
+						<el-radio-button label="4">其他</el-radio-button>
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item label="负责人" prop="name">
+					<el-input v-model="form.name" placeholder="请输入名称" clearable></el-input>
+				</el-form-item>
+				<el-form-item label="进度" prop="img">
+					<el-input v-model="form.name" placeholder="请输入名称" clearable></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="save">保 存</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'list-save',
+		data() {
+			return {
+				id: this.$route.query.id,
+				form: {
+					name: "",
+					type: "1"
+				},
+				rules: {
+
+				}
+			}
+		},
+		mounted() {
+			if(this.id){
+				//更改tag标签
+				this.$store.commit("updateViewTagsTitle", `详情ID:${this.id}`)
+			}
+		},
+		methods: {
+			save(){
+				console.log(this.$store);
+			}
+		}
+	}
+</script>
diff --git a/ui/src/views/template/server.vue b/ui/src/views/template/server.vue
new file mode 100644
index 0000000..2e9ecf5
--- /dev/null
+++ b/ui/src/views/template/server.vue
@@ -0,0 +1,615 @@
+<template>
+	<el-container>
+		<el-aside width="220px">
+			<el-container>
+				<el-header>
+					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
+				</el-header>
+				<el-main class="nopadding">
+					<el-tree ref="group" class="menu" :data="group" node-key="code" :current-node-key="group[0].code" highlight-current :filter-node-method="groupFilterNode"></el-tree>
+				</el-main>
+			</el-container>
+		</el-aside>
+		<el-main style="padding:0;">
+
+			<el-tabs class="tabs-pages" stretch>
+				<el-tab-pane label="服务器概况" lazy>
+					<el-main>
+						<el-card shadow="never" header="SQL Server">
+							<el-row>
+								<el-col :span="8">
+									<div class="server-top-item">
+										<el-progress type="dashboard" :percentage="25" :stroke-width="8" :width="150"
+											:color="colors">
+											<template #default="{ percentage }">
+												<span class="percentage-value">{{ percentage }}<em>%</em></span>
+												<span class="percentage-label">CPU</span>
+											</template>
+										</el-progress>
+									</div>
+								</el-col>
+								<el-col :span="8">
+									<div class="server-top-item">
+										<el-progress type="dashboard" :percentage="33.2" :stroke-width="8" :width="150"
+											:color="colors">
+											<template #default="{ percentage }">
+												<span class="percentage-value">{{ percentage }}<em>%</em></span>
+												<span class="percentage-label">Memory</span>
+											</template>
+										</el-progress>
+									</div>
+								</el-col>
+								<el-col :span="8">
+									<div class="server-top-item">
+										<el-progress type="dashboard" :percentage="81.0" :stroke-width="8" :width="150"
+											:color="colors">
+											<template #default="{ percentage }">
+												<span class="percentage-value">{{ percentage }}<em>%</em></span>
+												<span class="percentage-label">Disk</span>
+											</template>
+										</el-progress>
+									</div>
+								</el-col>
+							</el-row>
+							<el-tabs style="margin-top: 20px;" @tab-click="tabClick">
+								<el-tab-pane label="CPU" lazy>
+									<div class="server-item-info">
+										<div class="title">
+											<label>CPU</label>
+											<span>Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz</span>
+										</div>
+										<div class="chart" style="border-color: #409EFF;background: rgba(64,158,255,0.05);">
+											<scEcharts ref="cpu" height="100%" :option="option.cpu"></scEcharts>
+										</div>
+										<div class="data">
+											<el-descriptions :column="2" size="small" border title="Information">
+												<el-descriptions-item label="利用率">35%</el-descriptions-item>
+												<el-descriptions-item label="速度">2.67 GHz</el-descriptions-item>
+												<el-descriptions-item label="内核">4</el-descriptions-item>
+												<el-descriptions-item label="逻辑处理器">8</el-descriptions-item>
+												<el-descriptions-item label="正常运行时间">0:06:06:04</el-descriptions-item>
+											</el-descriptions>
+										</div>
+									</div>
+								</el-tab-pane>
+								<el-tab-pane label="Memory" lazy>
+									<div class="server-item-info">
+										<div class="title">
+											<label>Memory</label>
+											<span>16.0 GB</span>
+										</div>
+										<div class="chart" style="border-color: #8b12ae;background: rgba(139,18,174,0.05);">
+											<scEcharts ref="memory" height="100%" :option="option.memory"></scEcharts>
+										</div>
+									</div>
+								</el-tab-pane>
+								<el-tab-pane label="Disk" lazy>
+									<div class="server-item-info">
+										<div class="title">
+											<label>Disk</label>
+											<span>SAMSUNG MZVLB512HBJQ-000L7</span>
+										</div>
+										<div class="disk-list">
+											<el-row :gutter="20">
+												<el-col :span="6">
+													<div class="disk-list-item">
+														<h2>本地磁盘(C)</h2>
+														<el-progress :stroke-width="10" :percentage="50" :color="colors" />
+														<p>66.2 GB 可用，共 175 GB</p>
+													</div>
+												</el-col>
+												<el-col :span="6">
+													<div class="disk-list-item">
+														<h2>本地磁盘(D)</h2>
+														<el-progress :stroke-width="10" :percentage="60" :color="colors" />
+														<p>66.2 GB 可用，共 175 GB</p>
+													</div>
+												</el-col>
+												<el-col :span="6">
+													<div class="disk-list-item">
+														<h2>本地磁盘(E)</h2>
+														<el-progress :stroke-width="10" :percentage="81" :color="colors" />
+														<p>66.2 GB 可用，共 175 GB</p>
+													</div>
+												</el-col>
+												<el-col :span="6">
+													<div class="disk-list-item">
+														<h2>本地磁盘(F)</h2>
+														<el-progress :stroke-width="10" :percentage="15.5" :color="colors" />
+														<p>66.2 GB 可用，共 175 GB</p>
+													</div>
+												</el-col>
+											</el-row>
+										</div>
+									</div>
+								</el-tab-pane>
+								<el-tab-pane label="Network" lazy>
+									<div class="server-item-info">
+										<div class="title">
+											<label>Network</label>
+											<span>Intel(R) Ethernet Connection (6) 1219-V</span>
+										</div>
+										<div class="chart" style="border-color: #a74f01;background: rgba(167,79,1,0.05);">
+											<scEcharts ref="network" height="100%" :option="option.network"></scEcharts>
+										</div>
+									</div>
+								</el-tab-pane>
+							</el-tabs>
+						</el-card>
+					</el-main>
+				</el-tab-pane>
+				<el-tab-pane label="报警管理" lazy>
+					<el-main>
+						<el-card shadow="never" header="Event">
+							<scTable ref="table" :data="event" stripe height="auto">
+								<el-table-column label="#" type="index" width="50"></el-table-column>
+								<el-table-column label="事件" prop="title" width="150"></el-table-column>
+								<el-table-column label="等级" prop="type" width="150"></el-table-column>
+								<el-table-column label="通知" prop="push" ></el-table-column>
+								<el-table-column label="触发时间" prop="time" width="180"></el-table-column>
+							</scTable>
+						</el-card>
+						<el-card shadow="never" header="Rule" style="margin-top: 15px;">
+							<el-table :data="rule" stripe>
+								<el-table-column label="规则名称" prop="name" width="150"></el-table-column>
+								<el-table-column label="描述" prop="title" width="150"></el-table-column>
+								<el-table-column label="告警类型" prop="type" width="150"></el-table-column>
+								<el-table-column label="通知" prop="push" width="150"></el-table-column>
+								<el-table-column></el-table-column>
+								<el-table-column label="操作" width="150" align="right">
+									<el-dropdown>
+										<el-button type="text" size="small" icon="el-icon-more"></el-button>
+										<template #dropdown>
+											<el-dropdown-menu>
+												<el-dropdown-item>编辑</el-dropdown-item>
+												<el-dropdown-item divided>删除</el-dropdown-item>
+											</el-dropdown-menu>
+										</template>
+									</el-dropdown>
+								</el-table-column>
+							</el-table>
+							<el-button type="primary" icon="el-icon-plus" style="margin-top: 20px;"></el-button>
+						</el-card>
+					</el-main>
+				</el-tab-pane>
+			</el-tabs>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	export default {
+		name: 'server',
+		components: {
+			scEcharts
+		},
+		data() {
+			return {
+				groupFilterText: '',
+				group: [
+					{
+						label: "SQL Server",
+						icon: "el-icon-coin",
+						code: "1",
+
+					}, {
+						label: "Web Server",
+						icon: "el-icon-monitor",
+						code: "2",
+					}, {
+						label: "Api Server",
+						icon: "el-icon-monitor",
+						code: "3",
+					}, {
+						label: "Nginx Server",
+						icon: "el-icon-guide",
+						code: "4",
+					}
+				],
+				colors: [{
+						color: '#409EFF',
+						percentage: 60
+					},
+					{
+						color: '#E6A23C',
+						percentage: 80
+					},
+					{
+						color: '#F56C6C',
+						percentage: 100
+					}
+				],
+				event: [
+					{
+						title: 'Disk 大于 90%',
+						type: '告警事件',
+						push: '短信',
+						time: '2021-10-09 21:25:19'
+					},
+					{
+						title: 'Disk 大于 90%',
+						type: '致命事件',
+						push: '短信',
+						time: '2021-10-09 21:25:19'
+					}
+				],
+				rule: [
+					{
+						name: 'test_cpu',
+						title: '测试CPU报警',
+						type: 'CPU',
+						push: '短信'
+					},
+					{
+						name: 'test_cpu',
+						title: '测试CPU报警',
+						type: 'CPU',
+						push: '短信'
+					}
+				],
+				option: {
+					cpu: {
+						tooltip: {
+							trigger: 'axis'
+						},
+						grid: {
+							top: '0',
+							bottom: '0',
+							left: '0',
+							right: '0'
+						},
+						animation: false,
+						xAxis: {
+							type: 'category',
+							boundaryGap: false,
+							data: (function() {
+								var now = new Date();
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+									now = new Date(now - 2000);
+								}
+								return res;
+							})(),
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						yAxis: {
+							type: 'value',
+							min: 0,
+							max: 100,
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						series: [{
+							data: (function() {
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.push(Math.round(Math.random() * 0));
+								}
+								return res;
+							})(),
+							type: 'line',
+							symbol: 'none',
+							lineStyle: {
+								width: 1,
+								color: '#409EFF'
+							},
+							areaStyle: {
+								opacity: 0.1,
+								color: '#409EFF'
+							},
+						}]
+					},
+					memory: {
+						tooltip: {
+							trigger: 'axis'
+						},
+						grid: {
+							top: '0',
+							bottom: '0',
+							left: '0',
+							right: '0'
+						},
+						animation: false,
+						xAxis: {
+							type: 'category',
+							boundaryGap: false,
+							data: (function() {
+								var now = new Date();
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+									now = new Date(now - 2000);
+								}
+								return res;
+							})(),
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						yAxis: {
+							type: 'value',
+							min: 0,
+							max: 100,
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						series: [{
+							data: (function() {
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.push(Math.round(Math.random() * 0));
+								}
+								return res;
+							})(),
+							type: 'line',
+							symbol: 'none',
+							lineStyle: {
+								width: 1,
+								color: '#8b12ae'
+							},
+							areaStyle: {
+								opacity: 0.1,
+								color: '#8b12ae'
+							},
+						}]
+					},
+					network: {
+						tooltip: {
+							trigger: 'axis'
+						},
+						grid: {
+							top: '0',
+							bottom: '0',
+							left: '0',
+							right: '0'
+						},
+						animation: false,
+						legend: {
+							data: ['接收 Kbps', '发送 Kbps'],
+							top: '10px',
+							right: '10px',
+							itemStyle: {
+								opacity: 0
+							}
+						},
+						xAxis: {
+							type: 'category',
+							boundaryGap: false,
+							data: (function() {
+								var now = new Date();
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+									now = new Date(now - 2000);
+								}
+								return res;
+							})(),
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						yAxis: {
+							type: 'value',
+							min: 0,
+							max: 100,
+							splitLine: {
+								show: false
+							},
+							axisTick: {
+								show: false
+							},
+							axisLabel: {
+								show: false
+							}
+						},
+						series: [{
+							name: '接收 Kbps',
+							data: (function() {
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.push(Math.round(Math.random() * 0));
+								}
+								return res;
+							})(),
+							type: 'line',
+							symbol: 'none',
+							lineStyle: {
+								width: 1,
+								color: '#a74f01'
+							},
+							areaStyle: {
+								opacity: 0.1,
+								color: '#a74f01'
+							},
+						}, {
+							name: '发送 Kbps',
+							data: (function() {
+								var res = [];
+								var len = 60;
+								while (len--) {
+									res.push(Math.round(Math.random() * 0));
+								}
+								return res;
+							})(),
+							type: 'line',
+							smooth: false,
+							symbol: 'none',
+							lineStyle: {
+								width: 1,
+								type: 'dashed',
+								color: '#a74f01'
+							}
+						}]
+					}
+				}
+			}
+		},
+		watch: {
+			groupFilterText(val) {
+				this.$refs.group.filter(val);
+			}
+		},
+		mounted() {
+			setInterval(() => {
+				this.option.cpu.series[0].data.shift()
+				this.option.cpu.series[0].data.push(Math.round(Math.random() * 100));
+				this.option.cpu.xAxis.data.shift();
+				this.option.cpu.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
+
+				this.option.memory.series[0].data.shift()
+				this.option.memory.series[0].data.push(Math.round(Math.random() * 50));
+				this.option.memory.xAxis.data.shift();
+				this.option.memory.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
+
+				this.option.network.series[0].data.shift()
+				this.option.network.series[0].data.push(Math.round(Math.random() * 20));
+				this.option.network.series[1].data.shift()
+				this.option.network.series[1].data.push(Math.round(Math.random() * 10));
+				this.option.network.xAxis.data.shift();
+				this.option.network.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
+			}, 1000)
+		},
+		methods: {
+			//树过滤
+			groupFilterNode(value, data){
+				if (!value) return true;
+				return data.label.indexOf(value) !== -1;
+			},
+			tabClick(tab) {
+				this.$nextTick(() => {
+					if(tab.props.label == 'CPU' && this.$refs.cpu.myChart){
+						this.$refs.cpu.myChart.resize()
+					}
+					if(tab.props.label == 'Memory' && this.$refs.memory.myChart){
+						this.$refs.memory.myChart.resize()
+					}
+					if(tab.props.label == 'Network' && this.$refs.network.myChart){
+						this.$refs.network.myChart.resize()
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	.tabs-pages {display: flex;flex-flow: column;flex-shrink: 0;height: 100%;}
+	.tabs-pages > .el-tabs__header {background: #fff;margin: 0;}
+	.tabs-pages > .el-tabs__header .el-tabs__nav-wrap {display: flex;justify-content:center;}
+	.tabs-pages > .el-tabs__header .el-tabs__item {height:60px;line-height: 60px;font-size: 14px;}
+	.tabs-pages > .el-tabs__content {overflow-x: hidden;overflow: auto;}
+	[data-theme="dark"] .tabs-pages > .el-tabs__header {background: #2b2b2b;}
+</style>
+
+<style scoped>
+
+	.server-top-item {
+		text-align: center;
+	}
+
+	.server-top-item .percentage-value {
+		display: block;
+		font-size: 24px;
+		font-weight: bold;
+	}
+
+	.server-top-item .percentage-value em {
+		font-size: 14px;
+		font-style: normal;
+		margin-left: 5px;
+		font-weight: normal;
+	}
+
+	.server-top-item .percentage-label {
+		display: block;
+		font-size: 12px;
+		margin-top: 10px;
+	}
+
+	.server-item-info {}
+
+	.server-item-info .title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 15px;
+	}
+
+	.server-item-info .title label {
+		font-size: 26px;
+	}
+
+	.server-item-info .title span {
+		font-size: 14px;
+	}
+
+	.server-item-info .chart {
+		height: 250px;
+		border: 1px solid #eee;
+	}
+
+	.server-item-info .data {
+		margin-top: 20px;
+	}
+
+	.disk-list-item {
+		margin: 10px 0;
+	}
+
+	.disk-list-item h2 {
+		font-weight: normal;
+		font-size: 12px;
+	}
+
+	.disk-list-item .el-progress {
+		margin: 5px 0;
+	}
+
+	.disk-list-item p {
+		color: #999;
+		font-size: 12px;
+	}
+</style>
diff --git a/ui/src/views/template/stepform.vue b/ui/src/views/template/stepform.vue
new file mode 100644
index 0000000..df1c635
--- /dev/null
+++ b/ui/src/views/template/stepform.vue
@@ -0,0 +1,150 @@
+<template>
+	<el-main>
+		<el-card shadow="never" header="分步表单">
+			<el-steps :active="active" align-center style="margin-bottom: 20px;">
+				<el-step title="填写转账信息"></el-step>
+				<el-step title="确认转账信息"></el-step>
+				<el-step title="完成"></el-step>
+			</el-steps>
+			<el-row>
+				<el-col :lg="{span: 8, offset: 8}">
+					<el-form v-if="active==0" ref="stepForm_0" :model="form" :rules="rules" label-position="top">
+						<el-form-item label="付款账户" prop="paymentAccount">
+							<el-select v-model="form.paymentAccount" clearable>
+								<el-option label="sakuya@scui.com" value="sakuya@scui.com"></el-option>
+								<el-option label="lolicode@scui.com" value="lolicode@scui.com"></el-option>
+							</el-select>
+						</el-form-item>
+						<el-form-item label="收款账户" prop="collectionAccount">
+							<el-input v-model="form.collectionAccount" clearable></el-input>
+						</el-form-item>
+						<el-form-item label="收款人姓名" prop="collectionName">
+							<el-input v-model="form.collectionName" clearable></el-input>
+						</el-form-item>
+						<el-form-item label="转账金额" prop="amount">
+							<el-input v-model="form.amount"></el-input>
+						</el-form-item>
+					</el-form>
+					<el-form v-if="active==1" ref="stepForm_1" :model="form" :rules="rules" label-position="top">
+						<el-alert title="确认转账后，资金将直接打入对方账户，无法退回。" type="warning" show-icon style="margin-bottom: 15px;"/>
+						<el-descriptions :column="1" border>
+							<el-descriptions-item label="付款账户">{{form.paymentAccount}}</el-descriptions-item>
+							<el-descriptions-item label="收款账户">{{form.collectionAccount}}</el-descriptions-item>
+							<el-descriptions-item label="收款人姓名">{{form.collectionName}}</el-descriptions-item>
+							<el-descriptions-item label="转账金额">{{form.amount}} 元</el-descriptions-item>
+						</el-descriptions>
+						<el-divider></el-divider>
+						<el-form-item label="支付密码" prop="payPassword">
+							<el-input v-model="form.payPassword" show-password placeholder="请输入"></el-input>
+						</el-form-item>
+					</el-form>
+					<div v-if="active==2">
+						<el-result icon="success" title="操作成功" sub-title="预计两小时内到账">
+							<template #extra>
+								<el-button type="primary" @click="again">再转一笔</el-button>
+								<el-button>查看账单</el-button>
+							</template>
+						</el-result>
+					</div>
+					<el-button v-if="active>0 && active<2" @click="pre" :disabled="submitLoading">上一步</el-button>
+					<el-button v-if="active<1" type="primary" @click="next">下一步</el-button>
+					<el-button v-if="active==1" type="primary" @click="submit" :loading="submitLoading">提交</el-button>
+				</el-col>
+			</el-row>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'stepform',
+		data() {
+			return {
+				active: 0,
+				submitLoading: false,
+				form: {
+					paymentAccount: 'lolicode@scui.com',
+					collectionAccount: 'test@example.com',
+					collectionName: 'Lolowan',
+					amount: '100',
+					payPassword: ''
+				},
+				rules: {
+					paymentAccount: [
+						{
+							required: true,
+							message: '请选择付款账户',
+						}
+					],
+					collectionAccount: [
+						{
+							required: true,
+							message: '请输入收款账户',
+						}
+					],
+					collectionName: [
+						{
+							required: true,
+							message: '请输入收款人姓名',
+						}
+					],
+					amount: [
+						{
+							required: true,
+							message: '请输入转账金额',
+						}
+					],
+					payPassword: [
+						{
+							required: true,
+							message: '需要支付密码才能进行支付',
+						}
+					]
+				}
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			//下一步
+			next(){
+				const formName = `stepForm_${this.active}`
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+						this.active += 1
+					}else{
+						return false
+					}
+				})
+			},
+			//上一步
+			pre(){
+				this.active -= 1
+			},
+			//提交
+			submit(){
+				const formName = `stepForm_${this.active}`
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+						this.submitLoading = true
+						setTimeout(()=>{
+							this.submitLoading = false
+							this.active += 1
+						},1000)
+					}else{
+						return false
+					}
+				})
+			},
+			//再来一次
+			again(){
+				this.active = 0
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-steps:deep(.is-finish) .el-step__line {background: var(--el-color-primary);}
+</style>
diff --git a/ui/src/views/template/svgmap/index.vue b/ui/src/views/template/svgmap/index.vue
new file mode 100644
index 0000000..1b3acea
--- /dev/null
+++ b/ui/src/views/template/svgmap/index.vue
@@ -0,0 +1,148 @@
+<!--
+ * @Descripttion: SVG MAP
+ * @version: 2.0
+ * @Author: sakuya
+ * @Date: 2021年6月16日15:05:15
+ * @LastEditors: sakuya
+ * @LastEditTime: 2021年8月23日13:42:58
+-->
+
+<template>
+	<el-container>
+
+		<el-main class="nopadding" style="background: #f6f8f9;" v-loading="mapLoading">
+			<scEcharts ref="map" :option="option"></scEcharts>
+		</el-main>
+		<el-aside width="340px" style="border-left: 1px solid #e6e6e6;border-right: 0;padding:15px;">
+			<el-descriptions title="Shanghai China" :column="1" border>
+				<el-descriptions-item label="region">Shanghai</el-descriptions-item>
+				<el-descriptions-item label="area">6340.5 km2</el-descriptions-item>
+				<el-descriptions-item label="state"><em class="state state-1 status-processing"></em></el-descriptions-item>
+			</el-descriptions>
+			<el-collapse style="margin-top: 15px;">
+				<el-collapse-item title="video monitor" name="1">
+					<div class="screen" style="background: #000;height:180px;color: #999;text-align: center;">
+						<el-icon style="font-size: 40px;margin-top: 50px;"><el-icon-video-play /></el-icon>
+						<p>camera</p>
+					</div>
+				</el-collapse-item>
+			</el-collapse>
+			<el-alert title="地图数据来自阿里项目 DATAV.GeoAtlas" type="info" style="margin-top: 15px;"></el-alert>
+		</el-aside>
+	</el-container>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	export default {
+		name: 'svgmap',
+		components: {
+			scEcharts
+		},
+		data() {
+			return {
+				mapLoading: false,
+				option: {}
+			}
+		},
+		mounted() {
+			this.getSvg()
+		},
+		methods: {
+			async getSvg(){
+				this.mapLoading = true;
+				var map = await this.$HTTP.get('img/shanghai.json')
+				this.mapLoading = false;
+				scEcharts.registerMap('shanghai', map);
+
+				this.option = {
+					title: {
+						text: 'Map Demo',
+						subtext: '可用于展示GeoJson/SVG的地图或者其它图形',
+						left: '20',
+						top: '20'
+					},
+					tooltip: {
+					},
+					geo: {
+						map: 'shanghai',
+						zoom: 1,
+						roam: true,
+						selectedMode: 'single',
+						itemStyle: {
+							areaColor: 'rgba(128, 128, 128, 0.1)',
+							borderColor: 'rgba(0, 0, 0, 0.2)',
+							borderWidth: 1
+						},
+						select: {
+							itemStyle: {
+								color: 'rgba(0, 153, 255, 0.8)'
+							},
+							label: {
+								show: false,
+							}
+						},
+						emphasis: {
+							itemStyle: {
+								color: null
+							},
+							label: {
+								show: false
+							}
+						}
+					},
+					series: {
+						name: '告警',
+						type: 'effectScatter',
+						symbolSize: 20,
+						coordinateSystem: 'geo',
+						geoIndex: 0,
+						encode: {
+							tooltip: 2
+						},
+						data: [
+							[121.3154759073276, 30.819428360452587]
+						]
+					}
+				}
+
+				var myChart = this.$refs.map.myChart
+				myChart.on('geoselectchanged', function (params) {
+					var selectedNames = params.allSelected[0].name;
+					console.log('selected', selectedNames);
+				});
+				myChart.getZr().on('click', function (params) {
+					var pixelPoint = [params.offsetX, params.offsetY];
+					    var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
+					    // 在 SVG 上点击时，坐标会被打印。
+					    // 这些坐标可以在 `series.data` 里使用。
+					    console.log(dataPoint);
+
+				});
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	.state {width:8px;height:8px;background: #ddd;display: inline-block;border-radius: 50%;vertical-align: middle;}
+	.state-1 {background: #409EFF;}
+	.state-2 {background: #F56C6C;}
+	.status-processing {position: relative;}
+	.status-processing:after {position: absolute;top:0px;left:0px;width: 100%;height: 100%;border-radius: 50%;background: inherit;content: '';animation: warn 1.2s ease-in-out infinite;}
+
+	@keyframes warn {
+		0% {
+			transform: scale(0.5);
+			opacity: 1;
+		}
+		30% {
+			opacity: 1;
+		}
+		100% {
+			transform: scale(2);
+			opacity: 0;
+		}
+	}
+</style>
diff --git a/ui/src/views/template/tabinfo.vue b/ui/src/views/template/tabinfo.vue
new file mode 100644
index 0000000..a7c2605
--- /dev/null
+++ b/ui/src/views/template/tabinfo.vue
@@ -0,0 +1,214 @@
+<!--
+ * @Descripttion: 分栏明细模板
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月26日08:59:14
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-container>
+		<el-main ref="printMain">
+			<div class="innerPage">
+				<el-row :gutter="15">
+					<el-col :lg="8">
+						<el-card shadow="never" class="top-state">
+							<h2>OID<b>2000832</b><span>复制</span></h2>
+							<p>当前状态：物流配送中</p>
+						</el-card>
+					</el-col>
+					<el-col :lg="16">
+						<el-card shadow="never">
+							<el-row :gutter="15">
+								<el-col :lg="8">
+									<sc-statistic title="订单量" value="6400" suffix="Kg" groupSeparator></sc-statistic>
+								</el-col>
+								<el-col :lg="8">
+									<sc-statistic title="发货量" value="1568.873" suffix="Kg" groupSeparator></sc-statistic>
+								</el-col>
+								<el-col :lg="8">
+									<sc-statistic title="订单金额" value="1920000" prefix="¥" groupSeparator></sc-statistic>
+								</el-col>
+							</el-row>
+						</el-card>
+					</el-col>
+				</el-row>
+				<el-card shadow="never" header="进程">
+					<el-steps :active="2" finish-status="success">
+						<el-step title="创建" description="创建人 Sakuya"></el-step>
+						<el-step title="分配" description="承运商 SCUI logistics"></el-step>
+						<el-step title="配送" description="3 条物流记录"></el-step>
+						<el-step title="完成"></el-step>
+					</el-steps>
+				</el-card>
+				<el-card shadow="never" style="margin-top: 15px;">
+					<el-tabs>
+						<el-tab-pane label="基础信息">
+							<el-descriptions :column="3" border size="small">
+								<el-descriptions-item label="订单号">2000832</el-descriptions-item>
+								<el-descriptions-item label="创建人">sakuya</el-descriptions-item>
+								<el-descriptions-item label="创建时间">2021-07-21 13:10:00</el-descriptions-item>
+								<el-descriptions-item label="客户编号">0000017</el-descriptions-item>
+								<el-descriptions-item label="客户名称">上海红谷物流有限公司</el-descriptions-item>
+								<el-descriptions-item label="客户评级">
+									<el-rate v-model="rate" disabled>
+									</el-rate>
+								</el-descriptions-item>
+							</el-descriptions>
+						</el-tab-pane>
+						<el-tab-pane label="物流记录" lazy>
+							<scTable ref="table" :data="list" stripe hideDo>
+								<el-table-column label="ID" prop="id" width="80" sortable></el-table-column>
+								<el-table-column label="载具" prop="vehicle" width="120"></el-table-column>
+								<el-table-column label="驾驶员" prop="driver" width="120"></el-table-column>
+								<el-table-column label="状态" prop="state" width="120"></el-table-column>
+								<el-table-column label="载量" prop="quantity" width="120" sortable></el-table-column>
+							</scTable>
+						</el-tab-pane>
+						<el-tab-pane label="操作日志" lazy>
+							<el-timeline style="padding:15px;">
+								<el-timeline-item v-for="(item, index) in logs" :key="index" :timestamp="item.timestamp">
+									{{item.content}}
+								</el-timeline-item>
+							  </el-timeline>
+						</el-tab-pane>
+					</el-tabs>
+				</el-card>
+			</div>
+		</el-main>
+		<el-aside width="300px" style="border-left: 1px solid #e6e6e6;border-right: 0;padding:15px;">
+			<div class="side-item">
+				<div class="header">操作</div>
+				<div class="content">
+					<el-button type="primary" size="small" @click="print">打印</el-button>
+					<el-button size="small">次要操作</el-button>
+				</div>
+			</div>
+			<div class="side-item">
+				<div class="header">状态</div>
+				<div class="content">
+					<p>进行中</p>
+				</div>
+			</div>
+			<div class="side-item">
+				<div class="header">标记</div>
+				<div class="content">
+					<el-tag>重要</el-tag>
+					<el-tag type="danger">紧急</el-tag>
+				</div>
+			</div>
+			<div class="side-item">
+				<div class="header">指数</div>
+				<div class="content">
+					<scEcharts height="200px" :option="radarsOption"></scEcharts>
+				</div>
+			</div>
+		</el-aside>
+	</el-container>
+</template>
+
+<script>
+	import scStatistic from '@/components/scStatistic'
+	import scEcharts from '@/components/scEcharts'
+	import print from '@/utils/print'
+
+	export default {
+		name: 'tabinfo',
+		components: {
+			scStatistic,
+			scEcharts
+		},
+		data() {
+			return {
+				rate: 3.7,
+				logs: [
+					{
+						content: 'sakuya 创建了物流记录 1',
+						timestamp: '2018-04-17'
+					},
+					{
+						content: 'sakuya 维护了客户信息',
+						timestamp: '2018-04-15'
+					},
+					{
+						content: 'sakuya 创建订单',
+						timestamp: '2018-04-15'
+					}
+				],
+				list: [
+					{
+						id: 1,
+						vehicle: '沪A88808',
+						driver: '刘翔',
+						state: '0',
+						quantity: '29.654'
+					},
+					{
+						id: 2,
+						vehicle: '沪A88808',
+						driver: '刘翔',
+						state: '0',
+						quantity: '28.850'
+					},
+					{
+						id: 3,
+						vehicle: '沪A3B88D',
+						driver: '刘翔',
+						state: '0',
+						quantity: '28.159'
+					}
+				],
+				radarsOption: {
+					radar: {
+						radius: 60,
+						center: ['50%', '50%'],
+						indicator: [
+							{ name: '人员', max: 100},
+							{ name: '设备', max: 100},
+							{ name: '产品', max: 100},
+							{ name: '服务', max: 100},
+							{ name: '耗时', max: 100}
+						]
+					},
+					series: [{
+						name: "SCUI",
+						type: 'radar',
+						areaStyle: {},
+						data: [
+							{
+								value: [50, 28, 89, 70, 10],
+							}
+						]
+					}]
+				}
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			print(){
+				print(this.$refs.printMain)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.innerPage {width: 1000px;margin:0 auto;}
+	.top-state {background: #409EFF;color: #fff;}
+	.top-state h2 {font-size: 17px;font-weight: normal;}
+	.top-state h2 b {margin-left: 10px;}
+	.top-state h2 span {font-size: 12px;margin-left: 15px;}
+	.top-state p {opacity: 0.8;margin-top: 15px;}
+
+	.side-item {border-bottom: 1px solid #eee;margin-bottom: 30px;}
+	.side-item .header {font-size: 14px;margin-bottom: 15px;font-weight: bold;}
+	.side-item .content {padding-bottom:15px;}
+
+	@media (max-width: 1610px){
+	.innerPage {width: 100%;}
+	}
+
+</style>
diff --git a/ui/src/views/test/autocode/index.vue b/ui/src/views/test/autocode/index.vue
new file mode 100644
index 0000000..d5bbf4d
--- /dev/null
+++ b/ui/src/views/test/autocode/index.vue
@@ -0,0 +1,67 @@
+<template>
+	<router-view></router-view>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :xl="6" :lg="6" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.title">
+				<el-card shadow="hover" :body-style="{ padding: '0px' }" @click="click(item.url)">
+					<div class="code-item">
+						<div class="img" :style="{background: item.color}">
+							<el-icon :style="`background-image: -webkit-linear-gradient(top left, #fff, ${item.color} 100px)`"><component :is="item.icon" /></el-icon>
+						</div>
+						<div class="title">
+							<h2>{{item.title}}</h2>
+							<h4>{{item.des}}</h4>
+							<p><el-tag>{{item.ver}}</el-tag></p>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'autocode',
+		data() {
+			return {
+				list: [
+					{
+						title: "CRUD v2",
+						des: "配置型生成经典的增删改查列表",
+						icon: "el-icon-finished",
+						color: "#ccc",
+						ver: "开发中",
+						url: "/test/autocode/list_n"
+					},
+					{
+						title: "FormDesigner",
+						des: "表单设计器",
+						icon: "el-icon-list",
+						color: "#ccc",
+						ver: "开发中",
+						url: "/test/autocode/form"
+					}
+				]
+			}
+		},
+		methods: {
+			click(url){
+				this.$router.push({
+					path: url
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.code-item {cursor: pointer;}
+	.code-item .img {width: 100%;height: 150px;background: #09f;display:flex;align-items: center;justify-content: center;}
+	.code-item .img i {font-size: 100px;color: #fff;background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
+	.code-item .title {padding:15px;}
+	.code-item .title h2 {font-size: 16px;}
+	.code-item .title h4 {font-size: 12px;color: #999;font-weight: normal;margin-top: 5px;}
+	.code-item .title p {margin-top: 15px;}
+</style>
diff --git a/ui/src/views/test/autocode/list.vue b/ui/src/views/test/autocode/list.vue
new file mode 100644
index 0000000..5416879
--- /dev/null
+++ b/ui/src/views/test/autocode/list.vue
@@ -0,0 +1,220 @@
+<template>
+	<el-container>
+		<el-main>
+			<el-card shadow="never">
+				<el-tabs tab-position="top" >
+				    <el-tab-pane label="列配置">
+						<sc-form-table v-model="column" :addTemplate="addTemplate" placeholder="请添加列数据">
+							<el-table-column prop="label" label="显示名称" width="180">
+								<template #default="scope">
+									<el-input v-model="scope.row.label" placeholder="请输入内容"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="prop" label="字段名" width="180">
+								<template #default="scope">
+									<el-input v-model="scope.row.prop" placeholder="请输入内容"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="width" label="宽度" width="180">
+								<template #default="scope">
+									<el-input v-model="scope.row.width" placeholder="请输入内容"></el-input>
+								</template>
+							</el-table-column>
+							<el-table-column prop="isEdit" label="加入编辑" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.isEdit"></el-checkbox>
+								</template>
+							</el-table-column>
+							<el-table-column prop="isSearch" label="加入搜索" width="80" align="center">
+								<template #default="scope">
+									<el-checkbox v-model="scope.row.isSearch"></el-checkbox>
+								</template>
+							</el-table-column>
+						</sc-form-table>
+					</el-tab-pane>
+				    <el-tab-pane label="基础配置">
+						<el-row>
+							<el-col :xl="12" :lg="8">
+								<el-form :model="base" label-width="80px">
+									<el-form-item label="name">
+										<el-input v-model="base.name"></el-input>
+										<div class="el-form-item-msg">系统唯一且与路由别名一致，否则导致缓存失效。</div>
+									</el-form-item>
+									<el-form-item label="rowKey">
+										<el-input v-model="base.rowKey"></el-input>
+										<div class="el-form-item-msg">表格唯一标识，编辑保存和删除将传递rowKey</div>
+									</el-form-item>
+								</el-form>
+							</el-col>
+						</el-row>
+					</el-tab-pane>
+				    <el-tab-pane label="API路径配置">
+						<el-alert title="$API 映射文件: @/api/index.js 统一接口管理器, 所以需提前配置好API对象." type="warning" style="margin:0 0 20px 0;"></el-alert>
+						<el-row>
+							<el-col :xl="12" :lg="8">
+								<el-form :model="api" label-width="80px">
+									<el-form-item label="获取列表">
+										<el-input v-model="api.list">
+											<template #prepend>$API.</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="新增">
+										<el-input v-model="api.add">
+											<template #prepend>$API.</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="保存">
+										<el-input v-model="api.save">
+											<template #prepend>$API.</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="查询详细">
+										<el-input v-model="api.show">
+											<template #prepend>$API.</template>
+										</el-input>
+									</el-form-item>
+									<el-form-item label="删除">
+										<el-input v-model="api.del">
+											<template #prepend>$API.</template>
+										</el-input>
+									</el-form-item>
+								</el-form>
+							</el-col>
+						</el-row>
+					</el-tab-pane>
+				</el-tabs>
+			</el-card>
+			<pre style="margin-top: 50px;display: none;">{{ code }}</pre>
+		</el-main>
+		<el-footer>
+			<el-dropdown style="margin-right: 15px;">
+				<el-button type="primary" icon="el-icon-download" :loading="downloadcodeLoading">下载VUE文件</el-button>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item @click="downloadListCode">下载 index.vue</el-dropdown-item>
+						<el-dropdown-item @click="downloadSaveCode">下载 save.vue</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+			<el-dropdown>
+				<el-button type="primary" plain icon="el-icon-top-right" :loading="showcodeLoading">预览代码</el-button>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item @click="showListCode">预览 index.vue</el-dropdown-item>
+						<el-dropdown-item @click="showSaveCode">预览 save.vue</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+		</el-footer>
+	</el-container>
+
+
+	<el-dialog title="代码预览" v-model="codeVisible" width="60%" append-to-body destroy-on-close>
+		<el-alert title="需将VUE文件放置views文件夹,路由匹配组件的路径下,如文件名为index.vue可不需要写文件名" type="success" show-icon style="margin-bottom: 20px;"></el-alert>
+		<pre contenteditable class="code">{{ code }}</pre>
+		<template #footer>
+			<el-button type="primary" @click="codeVisible = false">确 定</el-button>
+		</template>
+	</el-dialog>
+
+</template>
+
+<script>
+	import template from '@/utils/template.js'
+
+	export default {
+		name: 'autocode-list',
+		data() {
+			return {
+				codeVisible: false,
+				showcodeLoading: false,
+				downloadcodeLoading: false,
+				code: '',
+				base: {
+					name: "",
+					rowKey: "id"
+				},
+				api: {
+					list: '',
+					add: '',
+					save: '',
+					show: '',
+					del: ''
+				},
+				column: [],
+				addTemplate: {
+					label: "",
+					prop: "",
+					width: "100",
+					isSearch: false,
+					isEdit: false
+				}
+			}
+		},
+		mounted(){
+
+		},
+		methods: {
+			//列表预览
+			async showListCode(){
+				this.showcodeLoading = true;
+				await this.getListTpl()
+				this.showcodeLoading = false;
+				this.codeVisible=true;
+			},
+			//获取列表模板文件
+			async getListTpl(){
+				var data = {
+					createDate:new Date().toLocaleString(),
+					base: this.base,
+					column: this.column,
+					api: this.api
+				}
+				var tpl = await this.$HTTP.get('code/list/index.vue')
+				this.code = template(tpl, data)
+			},
+			//详细预览
+			async showSaveCode(){
+				this.showcodeLoading = true;
+				await this.getSaveTpl()
+				this.showcodeLoading = false;
+				this.codeVisible=true;
+			},
+			//获取详细模板文件
+			async getSaveTpl(){
+				var data = {
+					createDate:new Date().toLocaleString(),
+					base: this.base,
+					column: this.column.filter(item => item.isEdit===true),
+					api: this.api
+				}
+				var tpl = await this.$HTTP.get('code/list/save.vue')
+				this.code = template(tpl, data)
+			},
+			async downloadListCode(){
+				this.downloadcodeLoading = true;
+				await this.getListTpl()
+				this.downloadcodeLoading = false;
+				this.createFile(this.code, 'index.vue')
+			},
+			async downloadSaveCode(){
+				this.downloadcodeLoading = true;
+				await this.getSaveTpl()
+				this.downloadcodeLoading = false;
+				this.createFile(this.code, 'save.vue')
+			},
+			//创建文件并下载
+			createFile(row, name){
+				const element = document.createElement('a')
+				element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(row))
+				element.setAttribute('download', name)
+				element.style.display = 'none'
+				element.click()
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.code {height:400px;overflow: auto;background: #333;color: #999;padding:20px;font-size: 14px;font-family: "consolas";line-height: 1.5;}
+</style>
diff --git a/ui/src/views/test/codebug/index.vue b/ui/src/views/test/codebug/index.vue
new file mode 100644
index 0000000..83ad6a6
--- /dev/null
+++ b/ui/src/views/test/codebug/index.vue
@@ -0,0 +1,64 @@
+<!--
+ * @Descripttion: 模拟触发错误
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年6月25日08:53:13
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-alert title="通过VUE开放的errorHandler可以很方便的捕捉到处理异常, SCUI收集后可上报日志收集系统, 相关代码:@/utils/errorHandler.js" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never" header="ReferenceError">
+					<el-button type="danger" @click="ReferenceError">模拟触发</el-button>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="TypeError">
+					<el-button type="danger" @click="TypeError">模拟触发</el-button>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="RangeError">
+					<el-button type="danger" @click="RangeError">模拟触发</el-button>
+				</el-card>
+			</el-col>
+		</el-row>
+		<el-alert title=":) 尝试模拟SyntaxError语法错误时,发现VUE编译失败,所以这不作模拟了" type="info" style="margin-top:20px;"></el-alert>
+	</el-main>
+</template>
+
+<script>
+	/* eslint-disable */
+	//为了演示异常，跳过eslint
+	export default {
+		name: 'codebug',
+		data() {
+			return {
+
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			ReferenceError(){
+				console.log(obj);
+			},
+			TypeError(){
+				const obj = null
+				console.log(obj.a);
+			},
+			RangeError(){
+				const n = 1
+				n.toFixed(101)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/userCenter/index.vue b/ui/src/views/userCenter/index.vue
new file mode 100644
index 0000000..5e87d85
--- /dev/null
+++ b/ui/src/views/userCenter/index.vue
@@ -0,0 +1,212 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<div class="user-info">
+						<div class="user-info-top">
+							<el-avatar :size="80" src="img/avatar.jpg"></el-avatar>
+							<h2>{{ form.name||'-' }}</h2>
+							<p>{{ form.about||'无签名' }}</p>
+							<el-button type="primary" round icon="el-icon-collection-tag" size="large">Administrator</el-button>
+						</div>
+						<div class="user-info-main">
+							<ul>
+								<li><label><el-icon><el-icon-user /></el-icon></label><span>81883387@qq.com</span></li>
+								<li><label><el-icon><el-icon-present /></el-icon></label><span>1988-05-07</span></li>
+								<li><label><el-icon><el-icon-male /></el-icon></label><span>男</span></li>
+								<li><label><el-icon><el-icon-location /></el-icon></label><span>中国/上海/金山</span></li>
+								<li><label><el-icon><el-icon-office-building /></el-icon></label><span>集团/上海分公司/软件研发部/摸鱼组</span></li>
+								<li><label><el-icon><el-icon-coin /></el-icon></label><span>超级管理员</span></li>
+							</ul>
+						</div>
+						<div class="user-info-bottom">
+							<h2>当前账号权限</h2>
+							<el-space wrap>
+								<el-tag v-auth="'user.add'">user.add</el-tag>
+								<el-tag v-auth="'user.edit'">user.edit</el-tag>
+								<el-tag v-if="$AUTH('user.delete')">user.delete</el-tag>
+								<el-tag v-if="$AUTH('list.add')">list.add</el-tag>
+								<el-tag v-if="$AUTH('list.edit')">list.edit</el-tag>
+								<el-tag v-if="$AUTH('list.delete')">list.delete</el-tag>
+							</el-space>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :lg="16">
+				<el-card shadow="never">
+					<el-tabs tab-position="top">
+						<el-tab-pane :label="$t('user.dynamic')">
+							<el-timeline style="margin-top:20px;padding-left:10px;">
+								<el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp" placement="top">
+									<div class="activity-item">
+										<el-avatar class="avatar" :size="24" src="img/avatar.jpg"></el-avatar>
+										<label>{{activity.operate}}</label><el-tag v-if="activity.mod">{{activity.mod}}</el-tag>{{activity.describe}}
+									</div>
+								</el-timeline-item>
+							</el-timeline>
+						</el-tab-pane>
+						<el-tab-pane :label="$t('user.info')">
+							<el-form ref="form" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
+								<el-form-item label="账号">
+									<el-input v-model="form.user" disabled></el-input>
+									<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
+								</el-form-item>
+								<el-form-item label="姓名">
+									<el-input v-model="form.name"></el-input>
+								</el-form-item>
+								<el-form-item label="性别">
+									<el-select v-model="form.sex" placeholder="请选择">
+										<el-option label="保密" value="0"></el-option>
+										<el-option label="男" value="1"></el-option>
+										<el-option label="女" value="2"></el-option>
+									</el-select>
+								</el-form-item>
+								<el-form-item label="个性签名">
+									<el-input v-model="form.about" type="textarea"></el-input>
+								</el-form-item>
+								<el-form-item>
+									<el-button type="primary">保存</el-button>
+								</el-form-item>
+							</el-form>
+						</el-tab-pane>
+						<el-tab-pane :label="$t('user.settings')">
+							<el-form ref="form" :model="form" label-width="120px" style="margin-top:20px;">
+								<el-form-item :label="$t('user.nightmode')">
+									<el-switch v-model="config.theme" active-value="dark" inactive-value="default" inline-prompt active-icon="el-icon-moon" inactive-icon="el-icon-sunny"></el-switch>
+									<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
+								</el-form-item>
+								<el-form-item label="主题颜色">
+									<el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
+								</el-form-item>
+								<el-form-item :label="$t('user.language')">
+									<el-select v-model="config.lang">
+										<el-option label="简体中文" value="zh-cn"></el-option>
+										<el-option label="English" value="en"></el-option>
+										<el-option label="日本語" value="ja"></el-option>
+									</el-select>
+									<div class="el-form-item-msg">{{ $t('user.language_msg') }}</div>
+								</el-form-item>
+							</el-form>
+						</el-tab-pane>
+					</el-tabs>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import colorTool from '@/utils/color'
+
+	export default {
+		name: 'userCenter',
+		data() {
+			return {
+				activities: [
+					{
+						operate: '更改了',
+						mod: '系统配置',
+						describe: 'systemName 为 SCUI',
+						type: 'edit',
+						timestamp: '刚刚'
+					},
+					{
+						operate: '删除了',
+						mod: '用户',
+						describe: 'USER',
+						type: 'del',
+						timestamp: '5分钟前'
+					},
+					{
+						operate: '禁用了',
+						mod: '用户',
+						describe: 'USER',
+						type: 'del',
+						timestamp: '5分钟前'
+					},
+					{
+						operate: '创建了',
+						mod: '用户',
+						describe: 'USER',
+						type: 'add',
+						timestamp: '5分钟前'
+					},
+					{
+						operate: '审核了',
+						mod: '用户',
+						describe: 'lolowan 为 通过',
+						type: 'add',
+						timestamp: '10分钟前'
+					},
+					{
+						operate: '登录',
+						mod: '',
+						describe: '成功',
+						type: 'do',
+						timestamp: '1小时前'
+					},
+				],
+				form: {
+					user: "81883387@qq.com",
+					name: "Sakuya",
+					sex: "1",
+					about: "正所谓富贵险中求"
+				},
+				colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
+				config: {
+					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
+					theme: this.$TOOL.data.get('APP_THEME') || 'default',
+					colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
+				}
+			}
+		},
+		watch:{
+			'config.theme'(val){
+				document.body.setAttribute('data-theme', val)
+				this.$TOOL.data.set("APP_THEME", val);
+			},
+			'config.lang'(val){
+				this.$i18n.locale = val
+				this.$TOOL.data.set("APP_LANG", val);
+			},
+			'config.colorPrimary'(val){
+				document.documentElement.style.setProperty('--el-color-primary', val);
+				for (let i = 1; i <= 9; i++) {
+					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
+				}
+				document.documentElement.style.setProperty(`--el-color-primary-darken-1`, colorTool.darken(val,0.1));
+				this.$TOOL.data.set("APP_COLOR", val);
+			}
+		},
+		//路由跳转进来 判断from是否有特殊标识做特殊处理
+		beforeRouteEnter (to, from, next){
+			next((vm)=>{
+				if(from.is){
+					//删除特殊标识，防止标签刷新重复执行
+					delete from.is
+					//执行特殊方法
+					vm.$alert('路由跳转过来后含有特殊标识，做特殊处理', '提示', {
+						type: 'success',
+						center: true
+					}).then(() => {}).catch(() => {})
+				}
+			})
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom:15px;}
+	.activity-item {font-size: 13px;color: #999;display: flex;align-items: center;}
+	.activity-item label {color: #333;margin-right:10px;}
+	.activity-item .el-avatar {margin-right:10px;}
+	.activity-item .el-tag {margin-right:10px;}
+
+	[data-theme='dark'] .user-info-bottom {border-color: var(--el-border-color-base);}
+	[data-theme='dark'] .activity-item label {color: #999;}
+</style>
diff --git a/ui/src/views/userCenter/login.vue b/ui/src/views/userCenter/login.vue
new file mode 100644
index 0000000..7829acf
--- /dev/null
+++ b/ui/src/views/userCenter/login.vue
@@ -0,0 +1,249 @@
+<template>
+	<div class="login_bg">
+		<div class="login_adv" style="background-image: url(img/auth_banner.jpg);">
+			<div class="login_adv__title">
+				<h2>SCUI</h2>
+				<h4>{{ $t('login.slogan') }}</h4>
+				<p>{{ $t('login.describe') }}</p>
+				<div>
+					<span>
+						<el-icon><sc-icon-vue /></el-icon>
+					</span>
+					<span>
+						<el-icon class="add"><el-icon-plus /></el-icon>
+					</span>
+					<span>
+						<el-icon><el-icon-eleme-filled /></el-icon>
+					</span>
+				</div>
+			</div>
+			<div class="login_adv__bottom">
+				© {{$CONFIG.APP_NAME}} {{$CONFIG.APP_VER}}
+			</div>
+		</div>
+		<div class="login_main">
+			<div class="login_config">
+				<el-button :icon="config.theme=='dark'?'el-icon-sunny':'el-icon-moon'" circle type="info" @click="configTheme"></el-button>
+				<el-dropdown trigger="click" placement="bottom-end" @command="configLang">
+					<el-button circle>
+						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>
+					</el-button>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item v-for="item in lang" :key="item.value" :command="item" :class="{'selected':config.lang==item.value}">{{item.name}}</el-dropdown-item>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
+			</div>
+			<div class="login-form">
+				<div class="login-header">
+					<div class="logo">
+						<img :alt="$CONFIG.APP_NAME" src="img/logo.png">
+						<label>{{$CONFIG.APP_NAME}}</label>
+					</div>
+					<h2>{{ $t('login.signInTitle') }}</h2>
+				</div>
+				<el-form ref="loginForm" :model="ruleForm" :rules="rules" label-width="0" size="large">
+					<el-form-item prop="user">
+						<el-input v-model="ruleForm.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
+							<template #append>
+								<el-select v-model="userType" style="width: 130px;">
+									<el-option :label="$t('login.admin')" value="admin"></el-option>
+									<el-option :label="$t('login.user')" value="user"></el-option>
+								</el-select>
+							</template>
+						</el-input>
+					</el-form-item>
+					<el-form-item prop="password">
+						<el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
+					</el-form-item>
+					<el-form-item style="margin-bottom: 10px;">
+						<el-row>
+							<el-col :span="12">
+								<el-checkbox :label="$t('login.rememberMe')" v-model="ruleForm.autologin"></el-checkbox>
+							</el-col>
+							<el-col :span="12" style="text-align: right;">
+								<el-button type="text">{{ $t('login.forgetPassword') }}？</el-button>
+							</el-col>
+						</el-row>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}</el-button>
+					</el-form-item>
+				</el-form>
+
+				<el-divider>{{ $t('login.signInOther') }}</el-divider>
+
+				<div class="login-oauth">
+					<el-button size="small" type="success" icon="sc-icon-wechat" circle></el-button>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				userType: 'admin',
+				ruleForm: {
+					user: "admin",
+					password: "admin",
+					autologin: false
+				},
+				rules: {
+					user: [
+						{required: true, message: this.$t('login.userError'), trigger: 'blur'}
+					],
+					password: [
+						{required: true, message: this.$t('login.PWError'), trigger: 'blur'}
+					]
+				},
+				islogin: false,
+				config: {
+					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
+					theme: this.$TOOL.data.get('APP_THEME') || 'default'
+				},
+				lang: [
+					{
+						name: '简体中文',
+						value: 'zh-cn',
+					},
+					{
+						name: 'English',
+						value: 'en',
+					},
+					{
+						name: '日本語',
+						value: 'ja',
+					}
+				]
+			}
+		},
+		watch:{
+			userType(val){
+				if(val == 'admin'){
+					this.ruleForm.user = 'admin'
+					this.ruleForm.password = 'admin'
+				}else if(val == 'user'){
+					this.ruleForm.user = 'user'
+					this.ruleForm.password = 'user'
+				}
+			},
+			'config.theme'(val){
+				document.body.setAttribute('data-theme', val)
+				this.$TOOL.data.set("APP_THEME", val);
+			},
+			'config.lang'(val){
+				this.$i18n.locale = val
+				this.$TOOL.data.set("APP_LANG", val);
+			}
+		},
+		created: function() {
+			this.$TOOL.data.remove("TOKEN")
+			this.$TOOL.data.remove("USER_INFO")
+			this.$TOOL.data.remove("MENU")
+			this.$TOOL.data.remove("PERMISSIONS")
+			this.$TOOL.data.remove("grid")
+			this.$store.commit("clearViewTags")
+			this.$store.commit("clearKeepLive")
+			this.$store.commit("clearIframeList")
+			console.log('%c SCUI %c Gitee: https://gitee.com/lolicode/scui', 'background:#666;color:#fff;border-radius:3px;', '')
+		},
+		methods: {
+			async login(){
+
+				var validate = await this.$refs.loginForm.validate().catch(()=>{})
+				if(!validate){ return false }
+
+				this.islogin = true
+				var data = {
+					username: this.ruleForm.user,
+					password: this.$TOOL.crypto.MD5(this.ruleForm.password)
+				}
+				//获取token
+				var user = await this.$API.auth.token.post(data)
+				if(user.code == 200){
+					this.$TOOL.data.set("TOKEN", user.data.token)
+					this.$TOOL.data.set("USER_INFO", user.data.userInfo)
+				}else{
+					this.islogin = false
+					this.$message.warning(user.message)
+					return false
+				}
+				//获取菜单
+				var menu = null
+				if(this.ruleForm.user == 'admin'){
+					menu = await this.$API.system.menu.myMenus.get()
+				}else{
+					menu = await this.$API.demo.menu.get()
+				}
+				if(menu.code == 200){
+					if(menu.data.menu.length==0){
+						this.islogin = false
+						this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
+							type: 'error',
+							center: true
+						})
+						return false
+					}
+					this.$TOOL.data.set("MENU", menu.data.menu)
+					this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
+				}else{
+					this.islogin = false
+					this.$message.warning(menu.message)
+					return false
+				}
+
+				this.$router.replace({
+					path: '/'
+				})
+				this.$message.success("Login Success 登录成功")
+				this.islogin = false
+			},
+			configTheme(){
+				this.config.theme = this.config.theme=='default'?'dark':'default'
+			},
+			configLang(command){
+				this.config.lang = command.value
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.login_bg {width: 100%;height: 100%;background: #fff;display: flex;}
+	.login_adv {width: 33.33333%;background-color: #555;background-size: cover;background-position: center center;background-repeat: no-repeat;position: relative;}
+	.login_adv__title {color: #fff;padding: 40px;}
+	.login_adv__title h2 {font-size: 40px;}
+	.login_adv__title h4 {font-size: 18px;margin-top: 10px;font-weight: normal;}
+	.login_adv__title p {font-size: 14px;margin-top:10px;line-height: 1.8;color: rgba(255,255,255,0.6);}
+	.login_adv__title div {margin-top: 10px;display: flex;align-items: center;}
+	.login_adv__title div span {margin-right: 15px;}
+	.login_adv__title div i {font-size: 40px;}
+	.login_adv__title div i.add {font-size: 20px;color: rgba(255,255,255,0.6);}
+	.login_adv__bottom {position: absolute;left:0px;right: 0px;bottom: 0px;color: #fff;padding: 40px;background-image:linear-gradient(transparent, #000);}
+
+	.login_main {flex: 1;overflow: auto;display:flex;}
+	.login-form {width: 400px;margin: auto;padding:20px 0;}
+	.login-header {margin-bottom: 20px;}
+	.login-header .logo {display: flex;align-items: center;}
+	.login-header .logo img {width: 35px;height: 35px;vertical-align: bottom;margin-right: 10px;}
+	.login-header .logo label {font-size: 24px;}
+	.login-header h2 {font-size: 24px;font-weight: bold;margin-top: 50px;}
+	.login-oauth {display: flex;justify-content:space-around;}
+	.login-form .el-divider {margin-top:40px;}
+
+	.login_config {position: absolute;top:20px;right: 20px;}
+	.el-dropdown-menu__item.selected {color: var(--el-color-primary);}
+
+	@media (max-width: 1200px){
+		.login-form {width: 340px;}
+	}
+	@media (max-width: 1000px){
+		.login_main {display: block;}
+		.login-form {width:100%;padding:20px 40px;}
+		.login_adv {display: none;}
+	}
+</style>
diff --git a/ui/src/views/vab/chart.vue b/ui/src/views/vab/chart.vue
new file mode 100644
index 0000000..c7f79a9
--- /dev/null
+++ b/ui/src/views/vab/chart.vue
@@ -0,0 +1,232 @@
+<template>
+	<el-main>
+		<el-alert title="感谢百度Echarts组件, SCUI经过封装后在VUE里使用更方便而且暴露Echarts所有方法,具体请查看本文件" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<scEcharts height="300px" :option="option"></scEcharts>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<scEcharts height="300px" :option="option2"></scEcharts>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<scEcharts height="300px" :option="option3"></scEcharts>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<scEcharts height="300px" :option="option4"></scEcharts>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<scEcharts height="300px" :option="option5"></scEcharts>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<scEcharts height="300px" :option="option6"></scEcharts>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import scEcharts from '@/components/scEcharts';
+
+	/**
+	 * 引入组件 @/components/scEcharts
+	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
+	 * 支持props包括 height，width，option
+	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
+	 */
+
+	export default {
+		name: 'chart',
+		components: {
+			scEcharts
+		},
+		data() {
+			return {
+				option: {
+					title: {
+						text: 'Bar Demo',
+						subtext: '基础柱状图',
+					},
+					grid: {
+						top: '80px'
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: {
+						type: 'category',
+						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+						data: [120, 200, 150, 80, 70, 110, 130],
+						type: 'bar',
+						barWidth: '15px',
+					},
+					{
+						data: [110, 180, 120, 120, 60, 90, 110],
+						type: 'bar',
+						barWidth: '15px',
+					}]
+				},
+				option2: {
+					title: {
+						text: 'Line Demo',
+						subtext: '基础折线图',
+					},
+					grid: {
+						top: '80px'
+					},
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: {
+						type: 'category',
+						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+					},
+					yAxis: {
+						type: 'value'
+					},
+					series: [{
+						data: [120, 200, 150, 80, 70, 110, 130],
+						type: 'line',
+					},
+					{
+						data: [110, 180, 120, 120, 60, 90, 110],
+						type: 'line',
+					}]
+				},
+				option3: {
+					title: {
+						text: 'Pie Demo',
+						subtext: '基础饼图',
+					},
+					tooltip: {
+						trigger: 'item'
+					},
+					series: [
+						{
+							name: '访问来源',
+							type: 'pie',
+							radius: ['40%', '70%'],
+							center: ['50%', '60%'],
+							label: false,
+							data: [
+								{value: 1048, name: '搜索引擎'},
+								{value: 735, name: '直接访问'},
+								{value: 580, name: '邮件营销'},
+								{value: 484, name: '联盟广告'},
+								{value: 300, name: '视频广告'}
+							]
+						}
+					]
+				},
+				option4: {
+					title: {
+						text: 'Radar Demo',
+						subtext: '基础雷达(属性)图',
+					},
+					tooltip: {
+						trigger: 'item'
+					},
+					radar: {
+						radius: 100,
+						center: ['50%', '55%'],
+						indicator: [
+							{ name: '销售', max: 100},
+							{ name: '管理', max: 100},
+							{ name: '信息技术', max: 100},
+							{ name: '客服', max: 100},
+							{ name: '研发', max: 100},
+							{ name: '市场', max: 100}
+						]
+					},
+					series: [{
+						name: "SCUI",
+						type: 'radar',
+						areaStyle: {},
+						data: [
+							{
+								value: [74, 90, 95, 65, 80, 31],
+							}
+						]
+					}]
+				},
+				option5: {
+					title: {
+						text: 'Kline Demo',
+						subtext: '基础K线图',
+					},
+					grid: {
+						top: '80px'
+					},
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'cross'
+						}
+					},
+					xAxis: {
+						data: ['2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30'],
+					},
+					yAxis: {
+						scale: true,
+					},
+					series: [{
+						type: 'k',
+						data: [
+							[2213.19,2199.31,2191.85,2224.63],
+							[2203.89,2177.91,2173.86,2210.58],
+							[2170.78,2174.12,2161.14,2179.65],
+							[2179.05,2205.5,2179.05,2222.81],
+							[2212.5,2231.17,2212.5,2236.07],
+							[2227.86,2235.57,2219.44,2240.26],
+							[2242.39,2246.3,2235.42,2255.21],
+							[2246.96,2232.97,2221.38,2247.86]
+						]
+					}]
+				},
+				option6: {
+					title: {
+						text: 'Gauge Demo',
+						subtext: '基础仪表盘',
+					},
+					series: [{
+						center: ['50%', '60%'],
+						type: 'gauge',
+						anchor: {
+							show: true,
+							showAbove: true,
+							size: 20,
+							itemStyle: {
+								borderWidth: 5
+							}
+						},
+						progress: {
+							show: true
+						},
+						data: [{
+							value: 70
+						}]
+					}]
+				}
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/contextmenu.vue b/ui/src/views/vab/contextmenu.vue
new file mode 100644
index 0000000..2b13390
--- /dev/null
+++ b/ui/src/views/vab/contextmenu.vue
@@ -0,0 +1,120 @@
+<!--
+ * @Descripttion: 右键简单组件演示文件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月22日16:31:14
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="12">
+				<el-card shadow="never">
+					<el-alert title="试试右键表格行看看. 支持多级菜单, 动态菜单等等等..." type="success" style="margin-bottom:20px;"></el-alert>
+					<el-table ref="table" :data="tableData" highlight-current-row @row-contextmenu="rowContextmenu">
+						<el-table-column type="expand">
+							<template #default="props">
+								<el-empty :description="props.row.id + ' 自定义扩展行'" :image-size="60"></el-empty>
+							</template>
+						</el-table-column>
+						<el-table-column prop="id" label="ID" width="50"></el-table-column>
+						<el-table-column prop="name" label="NAME" width="220"></el-table-column>
+						<el-table-column prop="date" label="DATE"></el-table-column>
+						<el-table-column prop="state" label="STATE"></el-table-column>
+					</el-table>
+				</el-card>
+			</el-col>
+			<el-col :lg="12">
+				<el-card shadow="never" @contextmenu.prevent="openMenu">
+					<div style="height:500px;display: flex;flex-direction: column;align-items: center;justify-content: center;color: #999;">
+						试试看在上下左右四个角落右键，看看边缘位置修正效果
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+
+	<sc-contextmenu ref="contextmenu" @command="handleCommand" @visible-change="visibleChange">
+		<sc-contextmenu-item command="a" title="返回(B)" suffix="Alt+←"></sc-contextmenu-item>
+		<sc-contextmenu-item command="b" title="重新加载(R)" suffix="Ctrl+R" icon="el-icon-refresh"></sc-contextmenu-item>
+		<sc-contextmenu-item title="切换兼容性模式" divided>
+			<sc-contextmenu-item command="c1" title="二级菜单1"></sc-contextmenu-item>
+			<sc-contextmenu-item title="二级菜单2">
+				<sc-contextmenu-item command="c2-1" title="三级菜单1"></sc-contextmenu-item>
+				<sc-contextmenu-item command="c2-2" title="三级菜单2"></sc-contextmenu-item>
+				<sc-contextmenu-item command="c2-3" title="三级菜单3"></sc-contextmenu-item>
+			</sc-contextmenu-item>
+			<sc-contextmenu-item command="c3" title="二级菜单3"></sc-contextmenu-item>
+		</sc-contextmenu-item>
+		<sc-contextmenu-item  command="d" title="属性(P)" divided :disabled="row&&row.state==0"></sc-contextmenu-item>
+		<sc-contextmenu-item  command="e" title="设置state=1" v-if="row&&row.state==0"></sc-contextmenu-item>
+	</sc-contextmenu>
+
+</template>
+
+<script>
+	import scContextmenu from '@/components/scContextmenu'
+	import scContextmenuItem from '@/components/scContextmenu/item'
+	export default {
+		name: 'contextmenu',
+		components: {
+			scContextmenu,
+			scContextmenuItem
+		},
+		data() {
+			return {
+				row: null,
+				tableData: [
+					{
+						id: '1',
+						name: 'Sakuya',
+						date: '2021-10-10',
+						state: 1
+					},
+					{
+						id: '2',
+						name: 'Lolowan(此行右键属性禁用)',
+						date: '2021-10-09',
+						state: 0
+					},
+					{
+						id: '3',
+						name: 'Ali',
+						date: '2021-10-08',
+						state: 1
+					}
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			rowContextmenu(row, column, event){
+				this.row = row
+				this.$refs.table.setCurrentRow(row);
+				this.$refs.contextmenu.openMenu(event)
+			},
+			openMenu(e){
+				this.row = null
+				this.$refs.contextmenu.openMenu(e)
+			},
+			handleCommand(command){
+				this.$message('click on item ' + command)
+				if(command == 'e'){
+					this.row.state = 1
+				}
+			},
+			visibleChange(visible){
+				if(!visible){
+					this.$refs.table.setCurrentRow();
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/views/vab/cron.vue b/ui/src/views/vab/cron.vue
new file mode 100644
index 0000000..023137b
--- /dev/null
+++ b/ui/src/views/vab/cron.vue
@@ -0,0 +1,46 @@
+<template>
+	<el-main>
+		<el-alert title="SCUI独创, 区别于市面上的规则生成器, 对不是很理解Cron的操作员也可以选择设置的快捷录入" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="15">
+			<el-col :lg="12">
+				<el-card shadow="never" header="默认">
+					<sc-cron v-model="v1" placeholder="请输入Cron定时规则" clearable></sc-cron>
+				</el-card>
+			</el-col>
+			<el-col :lg="12">
+				<el-card shadow="never" header="快捷扩展">
+					<sc-cron v-model="v2" placeholder="请输入Cron定时规则" clearable :shortcuts="shortcuts"></sc-cron>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import scCron from '@/components/scCron'
+
+	export default {
+		name: 'cron',
+		components: {
+			scCron
+		},
+		data() {
+			return {
+				v1: "",
+				v2: "",
+				shortcuts: [
+					{
+						text: "每天8点和12点 (自定义追加)",
+						value: "0 0 8,12 * * ?"
+					}
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/ui/src/views/vab/cropper.vue b/ui/src/views/vab/cropper.vue
new file mode 100644
index 0000000..91d994f
--- /dev/null
+++ b/ui/src/views/vab/cropper.vue
@@ -0,0 +1,98 @@
+<!--
+ * @Descripttion: 图像剪裁组件演示文件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月24日20:58:51
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="14">
+				<el-card shadow="never">
+					<sc-cropper :src="cropperImg" :compress="compress" :aspectRatio="aspectRatio" ref="cropper"></sc-cropper>
+				</el-card>
+				<el-card shadow="never" header="参数和方法">
+					<el-form label-width="100px">
+						<el-form-item label="aspectRatio">
+						    <el-select v-model="aspectRatio" placeholder="请选择">
+								<el-option label="自由" :value="0"></el-option>
+								<el-option label="1:1" :value="1/1"></el-option>
+								<el-option label="4:3" :value="4/3"></el-option>
+								<el-option label="16:9" :value="16/9"></el-option>
+							</el-select>
+							<div class="el-form-item-msg">固定选区或者不固定</div>
+						</el-form-item>
+						<el-form-item label="compress">
+						    <el-select v-model="compress" placeholder="请选择">
+								<el-option label="0.1" :value="0.1"></el-option>
+								<el-option label="0.5" :value="0.5"></el-option>
+								<el-option label="1" :value="1"></el-option>
+							</el-select>
+							<div class="el-form-item-msg">图像压缩率，值为：0.1-1</div>
+						</el-form-item>
+					</el-form>
+					<el-button type="primary" plain @click="getBase64">Base64</el-button>
+					<el-button type="primary" plain @click="getBlob">Blob</el-button>
+					<el-button type="primary" plain @click="getFile">File</el-button>
+				</el-card>
+				<el-card shadow="never" header="方法结果">
+					<img :src="imgData" />
+				</el-card>
+			</el-col>
+			<el-col :lg="10">
+				<el-card shadow="never" header="已内置剪裁的上传组件">
+					<el-alert title="设置cropper就可以开启上传前剪裁, 并已封装compress和aspectRatio, 打开F12查看网络请求" type="success" style="margin-bottom:20px;"></el-alert>
+					<sc-upload v-model="uploadImg" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+
+
+</template>
+
+<script>
+	import scCropper from '@/components/scCropper'
+
+	export default {
+		name: 'cropper',
+		components: {
+			scCropper
+		},
+		data() {
+			return {
+				cropperImg: 'img/avatar.jpg',
+				compress: 0.5,
+				aspectRatio: 0,
+				uploadImg: '',
+				imgData: ''
+			}
+		},
+		methods: {
+			getBase64(){
+				this.$refs.cropper.getCropData(data=>{
+					this.imgData = data
+				})
+			},
+			getBlob(){
+				this.$refs.cropper.getCropBlob(blob=>{
+					this.imgData = URL.createObjectURL(blob)
+				})
+			},
+			getFile(){
+				this.$refs.cropper.getCropFile(file=>{
+					let aTag = document.createElement('a')
+					aTag.download = file.name;
+					aTag.href = URL.createObjectURL(file)
+					aTag.click()
+				}, 'fileName.jpg', 'image/jpeg')
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/dialog/dialog1.vue b/ui/src/views/vab/dialog/dialog1.vue
new file mode 100644
index 0000000..c4a66e2
--- /dev/null
+++ b/ui/src/views/vab/dialog/dialog1.vue
@@ -0,0 +1,28 @@
+<template>
+	<sc-dialog v-model="visible" title="提示" @closed="$emit('closed')">
+		内容1
+		<template #footer>
+			<el-button @click="visible = false">取 消</el-button>
+			<el-button type="primary" @click="visible = false">确 定</el-button>
+		</template>
+	</sc-dialog>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				visible: true
+			}
+		},
+		mounted() {
+			console.log("加载./dialog1组件完成")
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/dialog/dialog2.vue b/ui/src/views/vab/dialog/dialog2.vue
new file mode 100644
index 0000000..fe1f8a2
--- /dev/null
+++ b/ui/src/views/vab/dialog/dialog2.vue
@@ -0,0 +1,28 @@
+<template>
+	<sc-dialog v-model="visible" title="提示" @closed="$emit('closed')">
+		内容2
+		<template #footer>
+			<el-button @click="visible = false">取 消</el-button>
+			<el-button type="primary" @click="visible = false">确 定</el-button>
+		</template>
+	</sc-dialog>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				visible: true
+			}
+		},
+		mounted() {
+			console.log("加载./dialog2组件完成")
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/dialog/index.vue b/ui/src/views/vab/dialog/index.vue
new file mode 100644
index 0000000..455b038
--- /dev/null
+++ b/ui/src/views/vab/dialog/index.vue
@@ -0,0 +1,101 @@
+<!--
+ * @Descripttion: scDialog 弹窗扩展演示文件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年8月27日08:56:30
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-alert title="二次封装el-dialog,加入拖拽/加载中/最大化." type="success" style="margin:0 0 20px 0;"></el-alert>
+		<el-card shadow="never" header="内置">
+			<el-button type="primary" @click="open1">默认</el-button>
+			<el-button type="primary" @click="open2">加载</el-button>
+			<el-button type="primary" @click="open3">禁止拖拽最大化和关闭</el-button>
+		</el-card>
+		<el-card shadow="never" header="异步" style="margin-top: 15px;">
+			<el-button type="primary" @click="asyn1">异步加载1</el-button>
+			<el-button type="primary" @click="asyn2">异步加载2</el-button>
+			<el-alert title="适用于页面有很多弹窗操作,利用异步组件按需加载,加快首屏的加载速度和打包体积" style="margin-top: 20px;"></el-alert>
+		</el-card>
+	</el-main>
+
+	<sc-dialog v-model="dialog1" title="提示">
+		内容
+		<template #footer>
+			<el-button @click="dialog1 = false">取 消</el-button>
+			<el-button type="primary" @click="dialog1 = false">确 定</el-button>
+		</template>
+	</sc-dialog>
+
+	<sc-dialog v-model="dialog2" title="模拟加载" :width="400" :loading="dialog2Loading">
+		<el-empty description="NO Data" :image-size="80"></el-empty>
+		<template #footer>
+			<el-button @click="dialog2 = false">取 消</el-button>
+			<el-button type="primary" @click="dialog2 = false" :loading="dialog2Loading">确 定</el-button>
+		</template>
+	</sc-dialog>
+
+	<sc-dialog v-model="dialog3" title="禁用拖拽" :drag="false" :show-fullscreen="false" :show-close="false">
+		内容
+		<template #footer>
+			<el-button @click="dialog3 = false">取 消</el-button>
+			<el-button type="primary" @click="dialog3 = false">确 定</el-button>
+		</template>
+	</sc-dialog>
+
+	<dialog1 v-if="asynDialog1" @closed="asynDialog1 = false"></dialog1>
+	<dialog2 v-if="asynDialog2" @closed="asynDialog2 = false"></dialog2>
+
+</template>
+
+<script>
+	import { defineAsyncComponent } from 'vue'
+
+	export default {
+		name: 'dialogExtend',
+		components: {
+			dialog1: defineAsyncComponent(() => import("./dialog1")),
+			dialog2: defineAsyncComponent(() => import("./dialog2"))
+		},
+		data() {
+			return {
+				dialog1: false,
+				dialog2: false,
+				dialog3: false,
+				dialog2Loading: false,
+				asynDialog1: false,
+				asynDialog2: false,
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			open1(){
+				this.dialog1 = true
+			},
+			open2(){
+				this.dialog2 = true
+				this.dialog2Loading = true
+				setTimeout(()=>{
+					this.dialog2Loading = false
+				}, 1000)
+			},
+			open3(){
+				this.dialog3 = true
+			},
+			asyn1(){
+				this.asynDialog1 = true
+			},
+			asyn2(){
+				this.asynDialog2 = true
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/drag.vue b/ui/src/views/vab/drag.vue
new file mode 100644
index 0000000..7707027
--- /dev/null
+++ b/ui/src/views/vab/drag.vue
@@ -0,0 +1,117 @@
+<template>
+	<el-main>
+		<el-alert title="感谢Vue3.0版本的vue.draggable.next拖拽组件 https://github.com/SortableJS/vue.draggable.next" type="success" style="margin-bottom:20px;"></el-alert>
+		<div class="dragList">
+			<draggable v-model="listA" animation="200" item-key="id" group="people">
+				<template #item="{ element }">
+					<div class="item">{{element.text}}</div>
+				</template>
+			</draggable>
+		</div>
+		<div class="dragList">
+			<draggable v-model="listB" animation="200" item-key="id" group="people">
+				<template #item="{ element }">
+					<div class="item">{{element.text}}</div>
+				</template>
+			</draggable>
+		</div>
+	</el-main>
+</template>
+
+<script>
+	import draggable from 'vuedraggable'
+	export default {
+		name: 'drag',
+		components: {
+			draggable
+		},
+		data() {
+			return {
+				listA: [
+					{
+						id: 1,
+						text: 'A1'
+					},
+					{
+						id: 2,
+						text: 'A2'
+					},
+					{
+						id: 3,
+						text: 'A3'
+					},
+					{
+						id: 4,
+						text: 'A4'
+					},
+					{
+						id: 5,
+						text: 'A5'
+					},
+					{
+						id: 6,
+						text: 'A6'
+					},
+					{
+						id: 7,
+						text: 'A7'
+					},
+					{
+						id: 8,
+						text: 'A8'
+					},
+					{
+						id: 9,
+						text: 'A9'
+					}
+				],
+				listB: [
+					{
+						id: 1,
+						text: 'B1'
+					},
+					{
+						id: 2,
+						text: 'B2'
+					},
+					{
+						id: 3,
+						text: 'B3'
+					},
+					{
+						id: 4,
+						text: 'B4'
+					},
+					{
+						id: 5,
+						text: 'B5'
+					},
+					{
+						id: 6,
+						text: 'B6'
+					},
+					{
+						id: 7,
+						text: 'B7'
+					},
+					{
+						id: 8,
+						text: 'B8'
+					},
+					{
+						id: 9,
+						text: 'B9'
+					}
+				]
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.dragList {overflow: auto;}
+	.item {cursor: move;float: left;background: #fff;width:100px;height: 100px;line-height: 100px;text-align: center;margin:0 15px 15px 0;border: 1px solid #e6e6e6;}
+	.dragList .sortable-ghost {
+		opacity: 0.5;
+	}
+</style>
diff --git a/ui/src/views/vab/editor.vue b/ui/src/views/vab/editor.vue
new file mode 100644
index 0000000..a9f4005
--- /dev/null
+++ b/ui/src/views/vab/editor.vue
@@ -0,0 +1,27 @@
+<template>
+	<el-main>
+		<el-card shadow="never">
+			<sc-editor v-model="html" placeholder="请输入" :height="400"></sc-editor>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import { defineAsyncComponent } from 'vue';
+	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
+
+	export default {
+		name: "editor",
+		components: {
+			scEditor
+		},
+		data(){
+			return {
+				html: ''
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/fileselect.vue b/ui/src/views/vab/fileselect.vue
new file mode 100644
index 0000000..fbfa5ab
--- /dev/null
+++ b/ui/src/views/vab/fileselect.vue
@@ -0,0 +1,62 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="18">
+				<el-card shadow="never">
+					<sc-file-select v-model="file" :multiple="multiple" :hideUpload="hideUpload" :max="99" @submit="submit">
+						<template #do>
+							<el-button>自定义插槽</el-button>
+						</template>
+					</sc-file-select>
+				</el-card>
+				<el-card shadow="never" header="已集成的上传组件">
+					<p>
+						<sc-upload v-model="upload" title="单选" file-select></sc-upload>
+					</p>
+					<p style="margin-top: 15px;">
+						<sc-upload-multiple v-model="upload2" title="多选" file-select></sc-upload-multiple>
+					</p>
+				</el-card>
+			</el-col>
+			<el-col :lg="6">
+				<el-card shadow="never" header="参数和方法">
+					<el-button type="primary" @click="multiple = !multiple">切换multiple</el-button>
+					<el-button type="primary" @click="hideUpload = !hideUpload">切换hideUpload</el-button>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import scFileSelect from '@/components/scFileSelect'
+
+	export default {
+		name: 'fileselect',
+		components: {
+			scFileSelect
+		},
+		data() {
+			return {
+				file: '',
+				multiple: false,
+				hideUpload: false,
+				upload: '',
+				upload2: ''
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			submit(value){
+				console.log(value)
+				this.$message("返回值请查看F12控制台console.log()")
+			}
+		}
+	}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/ui/src/views/vab/filterBar.vue b/ui/src/views/vab/filterBar.vue
new file mode 100644
index 0000000..de4fa27
--- /dev/null
+++ b/ui/src/views/vab/filterBar.vue
@@ -0,0 +1,174 @@
+<template>
+	<el-main>
+		<el-card shadow="never" header="过滤器">
+			<scFilterBar filterName="filterName" :options="options" @filterChange="change">
+				<template #default="{filterLength, openFilter}">
+					<el-badge :value="filterLength" type="danger" :hidden="filterLength<=0">
+						<el-button icon="el-icon-filter" @click="openFilter"></el-button>
+					</el-badge>
+				</template>
+			</scFilterBar>
+		</el-card>
+		<el-alert title="SCUI 独创的过滤条Filterbar,可配置不同类型的过滤字段,以及异步获取数据,在@/config/filterBar.js中可以更改运算符以及其他配置,操作上方过滤条查看下方change事件的回调,在表格查询的场景下非常合适" type="success" style="margin:20px 0;"></el-alert>
+		<el-card shadow="never" header="返回值">
+			<pre>{{ filterData }}</pre>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import scFilterBar from '@/components/scFilterBar';
+
+	export default {
+		name: 'filterBar',
+		components: {
+			scFilterBar
+		},
+		data() {
+			return {
+				filterData : {},
+				defaultFilter : [],
+				options: [
+					{
+						label: '订单号',
+						value: 'id',
+						type: 'text',
+						selected: true,
+						placeholder: '请输入订单号'
+					},
+					{
+						label: '类型',
+						value: 'type',
+						type: 'select',
+						operator: '=',
+						selected: true,
+						placeholder: '请选择类型',
+						extend: {
+							data:[
+								{
+									label: "选项1",
+									value: "1"
+								},
+								{
+									label: "选项2",
+									value: "2"
+								}
+							]
+						}
+					},
+					{
+						label: '类型(多选)',
+						value: 'type2',
+						type: 'select',
+						operator: '=',
+						placeholder: '请选择类型',
+						extend: {
+							multiple: true,
+							data:[
+								{
+									label: "选项1",
+									value: "1"
+								},
+								{
+									label: "选项2",
+									value: "2"
+								}
+							]
+						}
+					},
+					{
+						label: '通知(异步)',
+						value: 'noticeType',
+						type: 'select',
+						operator: '=',
+						placeholder: '请选择通知类型',
+						extend: {
+							request: async () => {
+								var list = await this.$API.system.dic.get.get()
+								return list.data.map(item => {
+									return {
+										label: item.label,
+										value: item.value
+									}
+								})
+							}
+						}
+					},
+					{
+						label: '通知(远程搜索)',
+						value: 'noticeType2',
+						type: 'select',
+						operator: '=',
+						placeholder: '请输入关键词后检索',
+						extend: {
+							remote: true,
+							request: async (query) => {
+								var data = {
+									keyword: query,
+								}
+								var list = await this.$API.system.dic.get.get(data)
+								return list.data.map(item => {
+									return {
+										label: item.label,
+										value: item.value
+									}
+								})
+							}
+						}
+					},
+					{
+						label: '关键词(标签)',
+						value: 'tags',
+						type: 'tags',
+						operator: 'include',
+						operators: [
+							{
+								label: '包含',
+								value: 'include',
+							},
+							{
+								label: '不包含',
+								value: 'notinclude',
+							}
+						]
+					},
+					{
+						label: '开关',
+						value: 'switch',
+						type: 'switch',
+						operator: '='
+					},
+					{
+						label: '日期单选',
+						value: 'date',
+						type: 'date',
+						operator: '=',
+						operators: [
+							{
+								label: '等于',
+								value: '=',
+							},
+							{
+								label: '不等于',
+								value: '!=',
+							}
+						]
+					},
+					{
+						label: '日期范围',
+						value: 'date2',
+						type: 'daterange'
+					}
+				]
+			}
+		},
+		methods: {
+			change(data){
+				this.filterData = data;
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/form.vue b/ui/src/views/vab/form.vue
new file mode 100644
index 0000000..7cd0b0b
--- /dev/null
+++ b/ui/src/views/vab/form.vue
@@ -0,0 +1,410 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="6">
+				<el-card shadow="never" header="处理逻辑说明">
+					<el-timeline>
+						<el-timeline-item timestamp="两者数据并无顺序要求,只是获取表单值时需要自行设置loading">1.远程获取表单配置参数和表单的值</el-timeline-item>
+						<el-timeline-item timestamp="构建form对象, 循环渲染对应组件, 获取远程选项数据. 完成前组件将由骨架代替">2.根据配置构建表单组件</el-timeline-item>
+						<el-timeline-item timestamp="合并form对象和表单值">3.给表单赋值</el-timeline-item>
+					</el-timeline>
+					<el-alert title="当前版本为预览版本,并未在正式项目中实施,请谨慎使用. 更多配置以及图形化编辑器正在路上." type="warning" show-icon></el-alert>
+				</el-card>
+				<el-card shadow="never" header="双向绑定">
+					<el-button type="primary" @click="setName">改变输入框的值</el-button>
+					<el-button type="primary" @click="setConfig">改变指定栅格配置</el-button>
+				</el-card>
+			</el-col>
+			<el-col :lg="12">
+				<el-card shadow="never" header="动态表单渲染器">
+					<sc-form ref="formref" :config="config" v-model="form" :loading="loading">
+						<el-button type="primary" @click="save">保 存</el-button>
+						<el-button @click="reset">重 置</el-button>
+					</sc-form>
+				</el-card>
+			</el-col>
+			<el-col :lg="6">
+				<el-card shadow="never" header="表单输出">
+					<pre>{{form}}</pre>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'formRender',
+		data() {
+			return {
+				loading: false,
+				config: {},
+				form: {}
+			}
+		},
+		mounted() {
+			//模拟请求延迟, 配置参数和form值并无顺序要求，可同时请求
+			const config = {
+				labelWidth: '130px',
+				labelPosition: 'right',
+				size: 'medium',
+				formItems: [
+					{
+						label: "ElementPlus",
+						component: "title",
+					},
+					{
+						label: "输入框",
+						name: "name",
+						value: "",
+						component: "input",
+						options: {
+							maxlength: "20",
+							placeholder: "Activity name",
+						},
+						rules: [
+							{required: true, message: "Please input Activity name", trigger: "blur"}
+						],
+						requiredHandle: "$.required==true",
+					},
+					{
+						label: "栅格(12/24)",
+						name: "name2",
+						value: "",
+						component: "input",
+						span: 12,
+						options: {
+							placeholder: "span: 12",
+						}
+					},
+					{
+						label: "栅格(12/24)",
+						name: "name3",
+						value: "",
+						component: "input",
+						span: 12,
+						options: {
+							placeholder: "span: 12",
+						}
+					},
+					{
+						label: "选择器(多选)",
+						name: "select",
+						value: "",
+						component: "select",
+						span: 24,
+						options: {
+							remote: {
+								api: `${this.$CONFIG.API_URL}/system/dic/get`,
+								data: {name: 'a'}
+							},
+							multiple: true,
+							items:[
+								{
+									label: "选项1",
+									value: "1"
+								},
+								{
+									label: "选项2",
+									value: "2"
+								}
+							]
+						},
+						rules: [
+							{required: true, message: "Please input Activity name", trigger: "change"}
+						],
+						requiredHandle: "$.required==true",
+					},
+					{
+						label: "选择器(单选)",
+						name: "select2",
+						value: "",
+						component: "select",
+						span: 24,
+						options: {
+							remote: {
+								api: `${this.$CONFIG.API_URL}/system/dic/get`,
+								data: {name: 'b'}
+							},
+							items:[
+								{
+									label: "选项1",
+									value: "1"
+								},
+								{
+									label: "选项2",
+									value: "2"
+								}
+							]
+						}
+					},
+					{
+						label: "级联选择器",
+						name: "cascader",
+						value: "",
+						component: "cascader",
+						span: 24,
+						options: {
+							items:[
+								{
+									label: "Guide",
+									value: "guide",
+									children: [
+										{
+											label: "Disciplines",
+											value: "disciplines"
+										},
+										{
+											label: "Consistency",
+											value: "consistency"
+										},
+									]
+								},
+								{
+									label: "Resource",
+									value: "resource",
+									children: [
+										{
+											label: "Axure Components",
+											value: "axure"
+										},
+										{
+											label: "Sketch Templates",
+											value: "sketch"
+										},
+										{
+											label: "Design Documentation",
+											value: "docs"
+										}
+									]
+								},
+								{
+									label: "Component",
+									value: "component"
+								},
+							]
+						}
+					},
+					{
+						label: "多选框",
+						name: "checkbox",
+						component: "checkbox",
+						span: 24,
+						tips: "多选框配置加上 name 表示拥有嵌套关系。否则将值“平铺”在form对象",
+						options: {
+							items:[
+								{
+									label: "选项1",
+									name: "option1",
+									value: false
+								},
+								{
+									label: "选项2",
+									name: "option2",
+									value: false
+								}
+							]
+						},
+						hideHandle: "$.required==true"
+					},
+					{
+						label: "多选框组",
+						name: "checkboxGroup",
+						value: [],
+						component: "checkboxGroup",
+						span: 24,
+						options: {
+							items:[
+								{
+									label: "选项1",
+									value: "option1"
+								},
+								{
+									label: "选项2",
+									value: "option2"
+								}
+							]
+						},
+						hideHandle: "$.required==true"
+					},
+					{
+						label: "单选",
+						name: "radio",
+						value: "1",
+						component: "radio",
+						options: {
+							items:[
+								{
+									label: "选项1",
+									value: "1"
+								},
+								{
+									label: "选项2",
+									value: "2"
+								}
+							]
+						},
+						hideHandle: "$.required==true"
+					},
+					{
+						label: "开关",
+						name: "required",
+						message: "演示如何使用表达式动态显隐和必填，试试打开和关闭开关",
+						value: false,
+						component: "switch",
+					},
+					{
+						label: "日期/时间",
+						name: "date",
+						value: "",
+						component: "date",
+						options: {
+							type: "datetime",
+							valueFormat: "YYYY-MM-DD HH:mm:ss",
+						},
+						rules: [
+							{required: true, message: "Please input Data", trigger: "change"}
+						],
+					},
+					{
+						label: "滑块",
+						name: "slider",
+						value: 0,
+						component: "slider",
+						options: {
+							marks: {
+								0: '0°C',
+								8: '8°C',
+								37: '37°C'
+							}
+						}
+					},
+					{
+						label: "数值",
+						name: "number",
+						value: 0,
+						component: "number",
+					},
+					{
+						label: "颜色",
+						name: "color",
+						value: "",
+						component: "color",
+					},
+					{
+						label: "评分",
+						name: "rate",
+						value: 0,
+						component: "rate",
+					},
+					{
+						label: "SCUI扩展",
+						component: "title",
+					},
+					{
+						label: "表格选择器",
+						name: "tableselect",
+						value: {},
+						component: "tableselect",
+						span: 24,
+						options: {
+							apiObj: '$API.demo.page',
+							column: [
+								{
+									label: "ID",
+									prop: "id",
+									width:150
+								},
+								{
+									label: "姓名",
+									prop: "user"
+								}
+							],
+							props: {
+								label: 'user',
+								value: 'id',
+								keyword: "keyword"
+							}
+						}
+					},
+					{
+						label: "上传",
+						component: "upload",
+						options: {
+							items:[
+								{
+									label: "图像1",
+									name: "img1",
+									value: ""
+								},
+								{
+									label: "图像2",
+									name: "img2",
+									value: ""
+								}
+							]
+						}
+					},
+					{
+						label: "富文本",
+						name: "text",
+						value: "",
+						component: "editor",
+					},
+				]
+			}
+
+			const form = {
+				name: "Activity name",
+				checkbox: {
+					option1: true
+				},
+				checkboxGroup: ["option1"],
+				select: ["1"],
+				select2: "1",
+				cascader: ['resource','docs'],
+				tableselect: {
+					user: "何敏",
+					id: "360000197302144442"
+				},
+				text: "<p><span style=\"font-size: 28px;\">Editor</span></p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Name</td>\n<td style=\"width: 47.4544%;\">SCUI</td>\n</tr>\n<tr>\n<td style=\"width: 47.4544%; background-color: #ecf0f1;\">Describe</td>\n<td style=\"width: 47.4544%;\">Super color UI Admin</td>\n</tr>\n</tbody>\n</table>"
+			}
+
+			setTimeout(()=>{
+				this.config = config
+			},500)
+
+			this.loading = true
+			setTimeout(()=>{
+				this.form = form
+				this.loading = false
+			},100)
+		},
+		methods: {
+			setName(){
+				this.form.name = "New Title"
+			},
+			setConfig(){
+				this.config.formItems[2].span = this.config.formItems[2].span==24?12:24
+				this.config.formItems[3].span = this.config.formItems[3].span==24?12:24
+			},
+			save(){
+				this.$refs.formref.validate((valid, obj) => {
+					if (valid) {
+						console.log(this.form)
+						alert('submit!')
+					}else{
+						this.$refs.formref.scrollToField(Object.keys(obj)[0])
+						return false
+					}
+				})
+			},
+			reset(){
+				this.$refs.formref.resetFields()
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/formtable.vue b/ui/src/views/vab/formtable.vue
new file mode 100644
index 0000000..c35b325
--- /dev/null
+++ b/ui/src/views/vab/formtable.vue
@@ -0,0 +1,114 @@
+<template>
+	<el-main>
+		<el-alert title="来自AVUE的灵感, 业务会有表单里含有对象数组的可能, 进行封装后进行增删改操作, 并且支持联动form表单的禁用属性" type="success" style="margin-bottom:20px;"></el-alert>
+
+		<el-card shadow="never">
+			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
+				<el-form-item label="标题" prop="title">
+					<el-input v-model="form.title"></el-input>
+				</el-form-item>
+				<el-form-item label="表格" prop="list">
+					<sc-form-table v-model="form.list" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
+						<el-table-column prop="time" label="时间" width="180">
+							<template #default="scope">
+								<el-time-select v-model="scope.row.time"></el-time-select>
+							</template>
+						</el-table-column>
+						<el-table-column prop="type" label="类型" width="180">
+							<template #default="scope">
+								<el-select v-model="scope.row.type" placeholder="请选择">
+									<el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
+								</el-select>
+							</template>
+						</el-table-column>
+						<el-table-column prop="val" label="数量" width="180">
+							<template #default="scope">
+								<el-input v-model="scope.row.val" placeholder="请输入内容"></el-input>
+							</template>
+						</el-table-column>
+						<el-table-column prop="open" label="checked" width="85" align="center">
+							<template #default="scope">
+								<el-checkbox v-model="scope.row.checked"></el-checkbox>
+							</template>
+						</el-table-column>
+						<el-table-column prop="open" label="开关" width="80" align="center">
+							<template #default="scope">
+								<el-switch v-model="scope.row.open"></el-switch>
+							</template>
+						</el-table-column>
+					</sc-form-table>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm">保存</el-button>
+				    <el-button @click="resetForm">重置</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'formtable',
+		data(){
+			return {
+				addTemplate: {
+					time: '',
+					type: '',
+					val: '',
+					open: true,
+					checked: false
+				},
+				form: {
+					title: "标题",
+					list: [
+						{
+							time: '09:00',
+							type: '1',
+							val: '100',
+							open: true,
+							checked: true
+						},
+						{
+							time: '10:00',
+							type: '0',
+							val: '50',
+							open: false,
+							checked: true
+						}
+					]
+				},
+				typeDic: [
+					{
+						label: "全局",
+						value: "0"
+					},
+					{
+						label: "局部",
+						value: "1"
+					}
+				],
+				rules: {
+					title: [
+						{required: true, message: '请上传', trigger: 'blur'}
+					]
+				}
+			}
+		},
+		methods: {
+			submitForm(){
+				this.$refs.ruleForm.validate((valid) => {
+					if (valid) {
+						alert('请看控制台输出');
+						console.log(this.form);
+					}else{
+						return false;
+					}
+				})
+			},
+			resetForm(){
+				this.$refs.ruleForm.resetFields();
+			}
+		}
+	}
+</script>
diff --git a/ui/src/views/vab/iconfont.vue b/ui/src/views/vab/iconfont.vue
new file mode 100644
index 0000000..d674709
--- /dev/null
+++ b/ui/src/views/vab/iconfont.vue
@@ -0,0 +1,39 @@
+<template>
+	<el-main>
+		<el-alert title="扩展了Element Plus图标库,可以在@/assets/icons中新增自己的SVG图标组件,记得在@/assets/icons/index.js中引入. 建议前往阿里iconfont复制SVG代码 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=25353" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="0" class="box">
+			<el-col :span="4" v-for="(icon, index) in icons" :key="index" >
+				<div class="icon-box">
+					<el-icon><component :is="icon" /></el-icon>
+					<p>{{ icon }}</p>
+				</div>
+			</el-col>
+		</el-row>
+	</el-main>
+
+</template>
+
+<script>
+	import * as scIcons from '@/assets/icons'
+
+	export default {
+		data() {
+			return {
+				icons: []
+			}
+		},
+		mounted() {
+			for(let icon in scIcons){
+				this.icons.push('sc-icon'+icon.replace(/[A-Z]/g,(match)=>'-'+match.toLowerCase()))
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.box {border-top: 1px solid #eee;border-left: 1px solid #eee;}
+	.icon-box {height:120px;text-align: center;background: #fff;border-bottom: 1px solid #eee;border-right: 1px solid #eee;color: #666;padding:30px 10px;}
+	.icon-box i {font-size: 26px;transition: color .15s linear;}
+	.icon-box p {color: #999;margin-top: 15px;transition: color .15s linear;}
+	.icon-box:hover i, .icon-box:hover p {color: #5cb6ff;}
+</style>
diff --git a/ui/src/views/vab/iconselect.vue b/ui/src/views/vab/iconselect.vue
new file mode 100644
index 0000000..6931639
--- /dev/null
+++ b/ui/src/views/vab/iconselect.vue
@@ -0,0 +1,71 @@
+<!--
+ * @Descripttion: 图标选择器组件演示文件
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年7月27日09:33:06
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-alert title="支持扩展的图标选择器,除了默认的图标组还可以在 @/config/iconSelect 中定义更多的图标组" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-card shadow="never">
+			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
+				<el-form-item label="图标" prop="icon">
+					<sc-icon-select v-model="form.icon" clearable :disabled="disabled"></sc-icon-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm">保存</el-button>
+				    <el-button @click="resetForm">重置</el-button>
+					 <el-button @click="setdisabled">{{disabled?'移除禁用':'设为禁用'}}</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import scIconSelect from '@/components/scIconSelect'
+
+	export default {
+		name: 'iconSelect',
+		components: {
+			scIconSelect
+		},
+		data() {
+			return {
+				form: {
+					icon: ''
+				},
+				rules: {
+					icon: [
+						{required: true, message: '请选择图标', trigger: 'change'}
+					]
+				},
+				disabled: false
+			}
+		},
+		methods: {
+			submitForm(){
+				this.$refs.ruleForm.validate((valid) => {
+					if (valid) {
+						alert('请看控制台输出');
+						console.log(this.form);
+					}else{
+						return false;
+					}
+				})
+			},
+			resetForm(){
+				this.$refs.ruleForm.resetFields();
+			},
+			setdisabled(){
+				this.disabled = !this.disabled
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/mini.vue b/ui/src/views/vab/mini.vue
new file mode 100644
index 0000000..1bf436e
--- /dev/null
+++ b/ui/src/views/vab/mini.vue
@@ -0,0 +1,67 @@
+
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never" header="脉冲圆点">
+					<el-space wrap :size="15">
+						<sc-status-indicator pulse type="primary"></sc-status-indicator>
+						<sc-status-indicator pulse type="success"></sc-status-indicator>
+						<sc-status-indicator pulse type="warning"></sc-status-indicator>
+						<sc-status-indicator pulse type="danger"></sc-status-indicator>
+						<sc-status-indicator type="info"></sc-status-indicator>
+					</el-space>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="趋势">
+					<el-space wrap :size="15">
+						<sc-trend v-model="trendValue" prefix="¥"></sc-trend>
+						<sc-trend v-model="trendValue2"></sc-trend>
+						<sc-trend v-model="trendValue3" suffix="%"></sc-trend>
+					</el-space>
+
+					<p style="margin-top: 15px;color: #999;">设置reverse可反转颜色。</p>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<div class="up">
+						<h2>持续更新中...</h2>
+						<p>非常欢迎提交Issue/PR完善和补充更多好玩的原子组件</p>
+						<p>原子组件库位置：@/components/scMini/*</p>
+						<el-button type="text" @click="goIssue">提交想法</el-button>
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'minivab',
+		data() {
+			return {
+				trendValue: 4.6,
+				trendValue2: 0,
+				trendValue3: -32
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			goIssue(){
+				window.open("https://gitee.com/lolicode/scui/issues")
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.up {text-align: center;}
+	.up h2 {margin-bottom: 10px;}
+	.up p {color: #999;line-height: 1.5;}
+	.el-card {height:150px;}
+</style>
diff --git a/ui/src/views/vab/print.vue b/ui/src/views/vab/print.vue
new file mode 100644
index 0000000..7370895
--- /dev/null
+++ b/ui/src/views/vab/print.vue
@@ -0,0 +1,49 @@
+<template>
+	<el-main>
+		<el-card shadow="never">
+			<el-tabs tab-position="top">
+				<el-tab-pane label="普通打印">
+					<el-alert title="打印当前页面已存在的元素,如包含.no-print样式就忽略,分页打印就需要{page-break-after: always}控制" type="success" style="margin-bottom:20px;"></el-alert>
+					<el-button type="primary" @click="print">普通打印</el-button>
+					<div style="height:20px"></div>
+					<div class="printMain" ref="printMain">
+						<div class="item">打印内容1 <el-icon><el-icon-eleme-filled /></el-icon> <p class="no-print">忽略打印</p></div>
+						<div style="page-break-after: always;"></div>
+						<div class="item">打印内容2</div>
+					</div>
+				</el-tab-pane>
+				<el-tab-pane label="动态打印">
+					<el-alert title="打印创建的DOM结构,适用于远程获取模板后打印" type="success" style="margin-bottom:20px;"></el-alert>
+					<el-button type="primary" @click="print2">动态打印</el-button>
+				</el-tab-pane>
+			</el-tabs>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	import print from '@/utils/print'
+
+	export default {
+		name: 'print',
+		data() {
+			return {}
+		},
+		methods: {
+			print(){
+				//直接传入REF或者querySelector
+				print(this.$refs.printMain)
+			},
+			print2(){
+				//创建虚拟DOM结构后再传入
+				var dom = "<h2>TITLE</h2><p>后创建的DOM结构</p>"
+				print(dom)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.printMain .item{padding:20px;border: 1px solid #409eff;margin-bottom: 20px;background: #ecf5ff;border-radius: 4px;}
+	.printMain p {margin-top: 20px;color: #999;}
+</style>
diff --git a/ui/src/views/vab/qrcode.vue b/ui/src/views/vab/qrcode.vue
new file mode 100644
index 0000000..10c97e7
--- /dev/null
+++ b/ui/src/views/vab/qrcode.vue
@@ -0,0 +1,47 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never" header="常用">
+					<sc-qr-code text="scui"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="带Logo">
+					<sc-qr-code text="scui" logo="img/logo.png"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="自定义颜色大小">
+					<sc-qr-code text="scui" :size="100" colorDark="#088200" colorLight="#fff"></sc-qr-code>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never" header="动态">
+					<sc-qr-code :text="qrcode"></sc-qr-code>
+					<el-input v-model="qrcode" placeholder="Please input"  style="margin-top: 20px;"/>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'qrcode',
+		data() {
+			return {
+				qrcode: "scui"
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/select.vue b/ui/src/views/vab/select.vue
new file mode 100644
index 0000000..bdd099d
--- /dev/null
+++ b/ui/src/views/vab/select.vue
@@ -0,0 +1,65 @@
+<!--
+ * @Descripttion: 字典选择器组件演示
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年8月3日15:51:20
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-alert title="封装el-select支持异步获取数据,以及根据字典名获取数据,继承el-select全部的属性和事件" type="success" style="margin-bottom:20px;"></el-alert>
+
+		<el-row :gutter="15">
+			<el-col :lg="12">
+				<el-card shadow="never" header="异步单选">
+					<sc-select v-model="value" :apiObj="$API.system.dic.get" clearable filterable style="width: 100%;"></sc-select>
+				</el-card>
+			</el-col>
+			<el-col :lg="12">
+				<el-card shadow="never" header="异步多选">
+					<sc-select v-model="value2" :apiObj="$API.system.dic.get" clearable filterable multiple style="width: 100%;"></sc-select>
+				</el-card>
+			</el-col>
+			<el-col :lg="12">
+				<el-card shadow="never" header="字典选择器">
+					<sc-select v-model="value3" dic="notice" clearable filterable style="width: 100%;"></sc-select>
+				</el-card>
+			</el-col>
+			<el-col :lg="12">
+				<el-card shadow="never" header="自定义模板">
+					<sc-select v-model="value4" dic="notice" clearable filterable placeholder="自定义placeholder" style="width: 100%;">
+						<template #option="{data}">
+							<span style="float: left">{{ data.label }}</span>
+							<span style="float: right; color: #999; font-size: 13px">{{ data.value }}</span>
+						</template>
+					</sc-select>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'scselect',
+		data() {
+			return {
+				value: '3',
+				value2: ['1', '3'],
+				value3: '',
+				value4: ''
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/statistic.vue b/ui/src/views/vab/statistic.vue
new file mode 100644
index 0000000..1264f39
--- /dev/null
+++ b/ui/src/views/vab/statistic.vue
@@ -0,0 +1,64 @@
+<!--
+ * @Descripttion: 统计数值组件演示
+ * @version: 1.0
+ * @Author: sakuya
+ * @Date: 2021年6月23日10:28:17
+ * @LastEditors:
+ * @LastEditTime:
+-->
+
+<template>
+	<el-main>
+		<el-alert title="一个非常简单的组件, 目的就是省去重复写样式, 支持千分符/前后缀等." type="success" style="margin-bottom:20px;"></el-alert>
+		<el-row :gutter="15">
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<sc-statistic title="Title" value="112893" description="Description" tips="Tips" groupSeparator></sc-statistic>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<sc-statistic title="今日净利润" value="112893.00" prefix="¥" groupSeparator>
+						<sc-trend v-model="trendValue1"></sc-trend>
+					</sc-statistic>
+				</el-card>
+			</el-col>
+			<el-col :lg="8">
+				<el-card shadow="never">
+					<sc-statistic title="留言" value="112893" suffix="条" groupSeparator>
+						<sc-trend v-model="trendValue2"></sc-trend>
+					</sc-statistic>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import scStatistic from '@/components/scStatistic';
+
+	export default {
+		name: 'statistic',
+		components: {
+			scStatistic
+		},
+		data() {
+			return {
+				trendValue1: 7.7,
+				trendValue2: -18.9
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card {margin-bottom: 15px;}
+	.up {color: #F56C6C;margin-left: 5px;}
+	.down {color: #67C23A;margin-left: 5px;}
+</style>
diff --git a/ui/src/views/vab/tableselect.vue b/ui/src/views/vab/tableselect.vue
new file mode 100644
index 0000000..5deba1d
--- /dev/null
+++ b/ui/src/views/vab/tableselect.vue
@@ -0,0 +1,95 @@
+<!--
+ * @Descripttion: 表格选择器组件演示
+ * @version: 1.0
+ * @Author: sakya
+ * @Date: 2021年6月8日09:29:14
+ * @LastEditors: sakya
+ * @LastEditTime: 2021年6月8日09:29:14
+-->
+
+<template>
+	<el-main>
+		<el-alert title="select深度改造的表格选择器, 非常适用于大量数据选择的场景" type="success" style="margin-bottom:20px;"></el-alert>
+		<el-card shadow="never" header="单选">
+			<sc-table-select v-model="value2" :apiObj="apiObj" :params="params" :table-width="600" :props="props" @change="change">
+				<el-table-column prop="id" label="ID" width="180"></el-table-column>
+				<el-table-column prop="user" label="姓名"></el-table-column>
+			</sc-table-select>
+		</el-card>
+		<div style="height:15px"></div>
+		<el-card shadow="never" header="多选">
+			<sc-table-select v-model="value" :apiObj="apiObj" :table-width="700" multiple :props="props" @change="change">
+				<template #header="{form, submit}">
+					<el-form :inline="true" :model="form">
+						<el-form-item>
+							<el-select v-model="form.sex" placeholder="性别" clearable :teleported="false">
+								<el-option label="男" value="1"></el-option>
+								<el-option label="女" value="2"></el-option>
+							</el-select>
+						</el-form-item>
+						<el-form-item>
+							<el-date-picker v-model="form.date" value-format="YYYY-MM-DD" type="date" placeholder="注册时间" :teleported="false"></el-date-picker>
+						</el-form-item>
+						<el-form-item>
+							<el-button type="primary" @click="submit">查询</el-button>
+						</el-form-item>
+					</el-form>
+					<el-alert title="自定义FORM插糟 传递了form对象和提交方法" type="info" />
+				</template>
+				<el-table-column prop="id" label="ID" width="180"></el-table-column>
+				<el-table-column prop="user" label="姓名" width="100"></el-table-column>
+				<el-table-column prop="cip" label="最后请求IP" width="150"></el-table-column>
+				<el-table-column prop="time" label="注册时间"></el-table-column>
+			</sc-table-select>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'tableselect',
+		data() {
+			return {
+				apiObj: this.$API.demo.page,
+				params: {
+					name: 'demoName'
+				},
+				value: [
+					{
+						id: "410000199512025445",
+						user: "魏磊"
+					},
+					{
+						id: "520000198407304275",
+						user: "史平"
+					}
+				],
+				value2: {
+					id: "520000198407304275",
+					user: "史平"
+				},
+				props: {
+					label: 'user',
+					value: 'id',
+					keyword: "keyword"
+				}
+			}
+		},
+		computed: {
+
+		},
+		mounted() {
+
+		},
+		methods: {
+			//值变化
+			change(val){
+				this.$message('change事件，返回详情查看控制台')
+				console.log(val)
+			}
+		}
+	}
+</script>
+
+<style scoped>
+</style>
diff --git a/ui/src/views/vab/upload.vue b/ui/src/views/vab/upload.vue
new file mode 100644
index 0000000..6584e77
--- /dev/null
+++ b/ui/src/views/vab/upload.vue
@@ -0,0 +1,109 @@
+<template>
+	<el-main>
+
+		<el-card shadow="never" header="基础示例">
+			<sc-upload v-model="imgurl"></sc-upload>
+			<sc-upload v-model="imgurl2" title="自定义标题" icon="el-icon-picture"></sc-upload>
+			<sc-upload v-model="imgurl3" :apiObj="uploadApi" accept=".xls,.xlsx" :on-success="success" :width="220">
+				<div class="custom-empty">
+					<el-icon><el-icon-upload /></el-icon>
+					<p>自定义插槽</p>
+				</div>
+			</sc-upload>
+			<sc-upload v-model="imgurl4" title="开启剪裁" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
+		</el-card>
+
+		<el-card shadow="never" header="在验证表单中使用">
+			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
+				<el-form-item label="身份证" required>
+					<el-space wrap :size="10">
+						<el-form-item prop="img1">
+							<sc-upload v-model="form.img1" title="人像面"></sc-upload>
+						</el-form-item>
+						<el-form-item prop="img2">
+							<sc-upload v-model="form.img2" title="国徽面"></sc-upload>
+						</el-form-item>
+					</el-space>
+				</el-form-item>
+				<el-form-item label="其他凭证" prop="img3">
+					<sc-upload-multiple v-model="form.img3"></sc-upload-multiple>
+				</el-form-item>
+				<el-form-item label="日期" prop="date">
+					<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm">保存</el-button>
+				    <el-button @click="resetForm">重置</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'upload',
+		data() {
+			return {
+				uploadApi: this.$API.common.upload,
+				imgurl: "img/avatar.jpg",
+				imgurl2: "",
+				imgurl3: "",
+				imgurl4: "",
+				form: {
+					img1: "",
+					img2: "",
+					img3: "",
+					date: ""
+				},
+				rules: {
+					img1: [
+						{required: true, message: '请上传', trigger: 'change'}
+					],
+					img2: [
+						{required: true, message: '请上传', trigger: 'change'}
+					],
+					img3: [
+						{required: true, message: '请上传', trigger: 'change'}
+					],
+					date: [
+						{required: true, message: '请选择日期', trigger: 'change'}
+					]
+				}
+			}
+		},
+		methods: {
+			success(response){
+				this.$alert(`success函数钩子，return false后阻止后续执行，回调参数打开控制台查看`, {
+					title: "提示",
+					type: "success"
+				})
+				console.log(response);
+				return false;
+			},
+			submitForm(){
+				this.$refs.ruleForm.validate((valid) => {
+					if (valid) {
+						alert('请看控制台输出');
+						console.log(this.form);
+					}else{
+						return false;
+					}
+				})
+			},
+			resetForm(){
+				this.$refs.ruleForm.resetFields();
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.el-card+.el-card {margin-top: 15px;}
+
+	.imglist .el-col+.el-col {margin-left: 10px;}
+	.custom-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+	.custom-empty i {font-size: 30px;color: #8c939d;}
+	.custom-empty p {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
+</style>
diff --git a/ui/src/views/vab/video.vue b/ui/src/views/vab/video.vue
new file mode 100644
index 0000000..1ea6203
--- /dev/null
+++ b/ui/src/views/vab/video.vue
@@ -0,0 +1,100 @@
+<template>
+	<el-main>
+		<el-row :gutter="15">
+			<el-col :lg="12">
+				<el-card shadow="never" header="MP4点播">
+					<sc-video
+						ref="mp4"
+						src="https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080.mp4"
+						poster="https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080_Moment.jpg"
+						:resource="resource"
+						:danmu="danmu"
+						:progressDot="progressDot"
+						pip
+					></sc-video>
+					<div style="margin-top: 15px;">
+						<el-form inline>
+							<el-form-item>
+								<el-select v-model="mode" placeholder="Select">
+									<el-option label="默认" value="scroll"></el-option>
+									<el-option label="顶部" value="top"></el-option>
+									<el-option label="底部" value="bottom"></el-option>
+								</el-select>
+							</el-form-item>
+							<el-form-item>
+								<el-input v-model="input" placeholder="Please input" />
+							</el-form-item>
+							<el-form-item>
+								<el-button type="primary" @click="sendComment">发送弹幕</el-button>
+							</el-form-item>
+						</el-form>
+					</div>
+				</el-card>
+			</el-col>
+			<el-col :lg="12">
+				<el-card shadow="never" header="HlS(m3u8)直播">
+					<sc-video
+						src="https://hsplay-360.v.btime.com/live_btime/btv_sn_20170706_s4/index.m3u8"
+						isLive
+					></sc-video>
+				</el-card>
+			</el-col>
+		</el-row>
+	</el-main>
+</template>
+
+<script>
+	import scVideo from '@/components/scVideo'
+
+	export default {
+		name: 'scvideo',
+		components: {
+			scVideo
+		},
+		data() {
+			return {
+				input: '',
+				mode: 'scroll',
+				resource: [
+					{name: '720P', url: 'https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-720.mp4'},
+					{name: '1080P', url: 'https://cdn.jsdelivr.net/gh/scuiadmin/CDN/video/scui-player-demo-1080.mp4'}
+				],
+				progressDot: [
+					{time: 3, text: '标记文字'}
+				],
+				danmu: [
+					{
+						id: '1',
+						start: 3000,
+						txt: 'SCUI VIDEO DEMO'
+					},
+					{
+						id: '2',
+						start: 3000,
+						txt: '一键三连，下次一定'
+					}
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			sendComment(){
+				if(this.$refs.mp4.player.danmu && this.input){
+					this.$refs.mp4.player.danmu.sendComment({
+						id: 'newId' + new Date().getTime(),
+						start: this.$refs.mp4.player.currentTime*1000,
+						txt: this.input,
+						mode: this.mode
+					})
+					this.input = ''
+				}
+
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/watermark.vue b/ui/src/views/vab/watermark.vue
new file mode 100644
index 0000000..f2c7235
--- /dev/null
+++ b/ui/src/views/vab/watermark.vue
@@ -0,0 +1,63 @@
+<template>
+	<el-main>
+		<el-card shadow="never">
+			<sc-water-mark ref="wm" text="欢迎体验SCUI" subtext="admin@scui.com">
+				<el-table :data="tableData" border stripe style="width: 100%">
+					<el-table-column prop="date" label="Date" width="180" />
+					<el-table-column prop="name" label="Name" width="180" />
+					<el-table-column prop="address" label="Address" />
+				</el-table>
+			</sc-water-mark>
+		</el-card>
+		<el-card shadow="never" style="margin-top: 15px;">
+			<el-button type="primary" @click="create">创建水印</el-button>
+			<el-button type="primary" @click="clear">移除水印</el-button>
+		</el-card>
+	</el-main>
+</template>
+
+<script>
+	export default {
+		name: 'watermark',
+		data() {
+			return {
+				tableData: [
+					{
+						date: '2016-05-03',
+						name: 'Tom',
+						address: 'No. 189, Grove St, Los Angeles',
+					},
+					{
+						date: '2016-05-02',
+						name: 'Tom',
+						address: 'No. 189, Grove St, Los Angeles',
+					},
+					{
+						date: '2016-05-04',
+						name: 'Tom',
+						address: 'No. 189, Grove St, Los Angeles',
+					},
+					{
+						date: '2016-05-01',
+						name: 'Tom',
+						address: 'No. 189, Grove St, Los Angeles',
+					},
+				]
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			create(){
+				this.$refs.wm.create()
+			},
+			clear(){
+				this.$refs.wm.clear()
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/ui/src/views/vab/workflow.vue b/ui/src/views/vab/workflow.vue
new file mode 100644
index 0000000..4477701
--- /dev/null
+++ b/ui/src/views/vab/workflow.vue
@@ -0,0 +1,114 @@
+<template>
+	<el-container>
+		<el-header>
+			<el-page-header :content="data.name"></el-page-header>
+			<div class="do">
+				<el-button type="primary" @click="exportJson">export JSON</el-button>
+			</div>
+		</el-header>
+		<el-main>
+			<sc-workflow v-model="data.nodeConfig"></sc-workflow>
+		</el-main>
+	</el-container>
+</template>
+
+<script>
+	import scWorkflow from '@/components/scWorkflow'
+
+	export default {
+		name: 'workflow',
+		components: {
+			scWorkflow
+		},
+		data() {
+			return {
+				data: {
+					"id": 1,
+					"name": "请假审批",
+					"nodeConfig": {
+						"nodeName": "发起人",
+						"type": 0,
+						"nodeRoleList": [],
+						"childNode": {
+							"nodeName": "条件路由",
+							"type": 4,
+							"conditionNodes": [{
+									"nodeName": "长期",
+									"type": 3,
+									"priorityLevel": 1,
+									"conditionMode": 1,
+									"conditionList": [{
+										"label": "请假天数",
+										"field": "day",
+										"operator": ">",
+										"value": "7"
+									}],
+									"childNode": {
+										"nodeName": "领导审批",
+										"type": 1,
+										"setType": 1,
+										"nodeUserList": [{
+											"id": "360000197302144442",
+											"name": "何敏"
+										}],
+										"nodeRoleList": [],
+										"examineLevel": 1,
+										"directorLevel": 1,
+										"selectMode": 1,
+										"termAuto": false,
+										"term": 0,
+										"termMode": 1,
+										"examineMode": 1,
+										"directorMode": 0
+									}
+								},
+								{
+									"nodeName": "短期",
+									"type": 3,
+									"priorityLevel": 2,
+									"conditionMode": 1,
+									"conditionList": [],
+									"childNode": {
+										"nodeName": "直接主管审批",
+										"type": 1,
+										"setType": 2,
+										"nodeUserList": [],
+										"nodeRoleList": [],
+										"examineLevel": 1,
+										"directorLevel": 1,
+										"selectMode": 1,
+										"termAuto": false,
+										"term": 0,
+										"termMode": 1,
+										"examineMode": 1,
+										"directorMode": 0
+									}
+								}
+							],
+							"childNode": {
+								"nodeName": "抄送人",
+								"type": 2,
+								"userSelectFlag": true,
+								"nodeUserList": [{
+									"id": "220000200908305857",
+									"name": "何秀英"
+								}]
+							}
+						}
+					}
+				}
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			exportJson() {
+				this.$message("返回值请查看F12控制台console.log()")
+				console.log(this.data)
+			}
+		}
+	}
+</script>
+
+<style></style>
diff --git a/ui/vue.config.js b/ui/vue.config.js
new file mode 100644
index 0000000..c2a56b4
--- /dev/null
+++ b/ui/vue.config.js
@@ -0,0 +1,70 @@
+module.exports = {
+	//设置为空打包后不分更目录还是多级目录
+	publicPath:'',
+	//build编译后存放静态文件的目录
+	//assetsDir: "static",
+
+	// build编译后不生成资源MAP文件
+	productionSourceMap: false,
+
+	//开发服务,build后的生产模式还需nginx代理
+	devServer: {
+		open: false, //运行后自动打开浏览器
+		port: 2800, //挂载端口
+		proxy: {
+			'/api': {
+				target: 'https://www.fastmock.site/mock/5039c4361c39a7e3252c5b55971f1bd3/api',
+				ws: true,
+				pathRewrite: {
+					'^/api': '/'
+				}
+			}
+		}
+	},
+
+	chainWebpack: config => {
+		// 移除 prefetch 插件
+		config.plugins.delete('preload');
+		config.plugins.delete('prefetch');
+		config.resolve.alias.set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js');
+	},
+
+	configureWebpack: config => {
+		//性能提示
+		config.performance = {
+			hints: false
+		}
+		config.optimization = {
+			splitChunks: {
+				chunks: "all",
+				automaticNameDelimiter: '~',
+				name: true,
+				cacheGroups: {
+					//第三方库抽离
+					vendor: {
+						name: "modules",
+						test: /[\\/]node_modules[\\/]/,
+						priority: -10
+					},
+					elicons: {
+						name: "elicons",
+						test: /[\\/]node_modules[\\/]@element-plus[\\/]icons[\\/]/
+					},
+					tinymce: {
+						name: "tinymce",
+						test: /[\\/]node_modules[\\/]tinymce[\\/]/
+					},
+					echarts: {
+						name: "echarts",
+						test: /[\\/]node_modules[\\/]echarts[\\/]/
+					},
+					xgplayer: {
+						name: "xgplayer",
+						test: /[\\/]node_modules[\\/]xgplayer.*[\\/]/
+					}
+				}
+			}
+		}
+	}
+
+}
diff --git a/view/index.html b/view/index.html
new file mode 100644
index 0000000..60924b8
--- /dev/null
+++ b/view/index.html
@@ -0,0 +1,38 @@
+
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>SentOS</title>
+<style>
+html, body {background-color: #fff; color: #3c4042; font-family: 'Raleway', sans-serif; font-weight: 100; height: 80vh; margin: 0;}
+.top{text-align: right; line-height: 35px; padding: 0 20px;}
+.top a{color: #333333; padding: 0 10px}
+.full-height {height: 90vh;}
+.flex-center {align-items: center;display: flex;justify-content: center;}
+.position-ref {position: relative;}
+.top-right {position: absolute;right: 10px;top: 18px;}
+.content {text-align: center;}
+.title {font-size: 84px;}
+.links > a {color: #3c4042;padding: 0 25px;	font-size: 12px;font-weight: 600;letter-spacing: .1rem;text-decoration: none;text-transform: uppercase;}
+.m-b-md {margin-bottom: 30px;}
+</style>
+</head>
+<body>
+	<div class="flex-center position-ref full-height">
+		<div class="content">
+			<div class="title m-b-md">
+				SentOS
+			</div>
+			<div class="links">
+			</div>
+		</div>
+	</div>
+	<div style="text-align: center; font-size: 12px;">
+		<p><a href="https://beian.miit.gov.cn/" target="_blank" style="color: #333333; text-decoration: none;">赣ICP备13006622号-1</a></p>
+		<p>技术支持：<a href="https://www.tensent.cn" target="_blank" style="color: #333333; text-decoration: none;">腾速科技</a></p>
+	</div>
+</body>
+</html>