优化没有网站时的提示

集群节点列表页增加停用/启用操作
Dockerfile版本号修改为1.3.3
2024-01-21 21:17:42 +08:00 · 2024-01-21 17:42:56 +08:00 · 2024-01-21 16:58:01 +08:00 · 2024-01-21 16:55:55 +08:00 · 2024-01-21 16:55:31 +08:00 · 2024-01-21 16:55:22 +08:00
60 changed files with 24088 additions and 176 deletions
--- a/cmd/edge-admin/main.go
+++ b/cmd/edge-admin/main.go
@@ -11,6 +11,7 @@ import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/nodes"
 	"github.com/TeaOSLab/EdgeAdmin/internal/utils"
 	_ "github.com/TeaOSLab/EdgeAdmin/internal/web"
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/clusters/cluster/node/nodeutils"
 	_ "github.com/TeaOSLab/EdgeCommon/pkg/langs/messages"
 	"github.com/iwind/TeaGo/Tea"
 	_ "github.com/iwind/TeaGo/bootstrap"
@@ -40,7 +41,8 @@ func main() {
 		Option("demo", "switch to demo mode").
 		Option("dev", "switch to 'dev' mode").
 		Option("prod", "switch to 'prod' mode").
-		Option("upgrade [--url=URL]", "upgrade from official site or an url")
+		Option("upgrade [--url=URL]", "upgrade from official site or an url").
+		Option("install-local-node", "install a local node")

 	app.On("daemon", func() {
 		nodes.NewAdminNode().Daemon()
@@ -76,7 +78,7 @@ func main() {
 		fmt.Println("done")
 	})
 	app.On("recover", func() {
-		sock := gosock.NewTmpSock(teaconst.ProcessName)
+		var sock = gosock.NewTmpSock(teaconst.ProcessName)
 		if !sock.IsListening() {
 			fmt.Println("[ERROR]the service not started yet, you should start the service first")
 			return
@@ -89,7 +91,7 @@ func main() {
 		fmt.Println("enter recovery mode successfully")
 	})
 	app.On("demo", func() {
-		sock := gosock.NewTmpSock(teaconst.ProcessName)
+		var sock = gosock.NewTmpSock(teaconst.ProcessName)
 		if !sock.IsListening() {
 			fmt.Println("[ERROR]the service not started yet, you should start the service first")
 			return
@@ -178,6 +180,14 @@ func main() {
 		log.Println("restarting ...")
 		app.RunRestart()
 	})
+	app.On("install-local-node", func() {
+		err := nodeutils.InstallLocalNode()
+		if err != nil {
+			fmt.Println("[ERROR]" + err.Error())
+			return
+		}
+		fmt.Println("success")
+	})
 	app.Run(func() {
 		var adminNode = nodes.NewAdminNode()
 		adminNode.Run()
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -1,7 +1,7 @@
 FROM --platform=linux/amd64 alpine:latest
 LABEL maintainer="goedge.cdn@gmail.com"
 ENV TZ "Asia/Shanghai"
-ENV VERSION 1.3.2
+ENV VERSION 1.3.3
 ENV ROOT_DIR /usr/local/goedge
 ENV TAR_FILE edge-admin-linux-amd64-plus-v${VERSION}.zip

--- a/internal/const/const.go
+++ b/internal/const/const.go
@@ -1,9 +1,9 @@
 package teaconst

 const (
-	Version = "1.3.2"
+	Version = "1.3.3"

-	APINodeVersion = "1.3.2"
+	APINodeVersion = "1.3.3"

 	ProductName   = "Edge Admin"
 	ProcessName   = "edge-admin"
--- a/internal/utils/exec/cmd.go
+++ b/internal/utils/exec/cmd.go
@@ -0,0 +1,162 @@
+// Copyright 2022 Liuxiangchao iwind.liu@gmail.com. All rights reserved. Official site: https://goedge.cn .
+
+package executils
+
+import (
+	"bytes"
+	"context"
+	"os"
+	"os/exec"
+	"strings"
+	"time"
+)
+
+type Cmd struct {
+	name string
+	args []string
+	env  []string
+	dir  string
+
+	ctx        context.Context
+	timeout    time.Duration
+	cancelFunc func()
+
+	captureStdout bool
+	captureStderr bool
+
+	stdout *bytes.Buffer
+	stderr *bytes.Buffer
+
+	rawCmd *exec.Cmd
+}
+
+func NewCmd(name string, args ...string) *Cmd {
+	return &Cmd{
+		name: name,
+		args: args,
+	}
+}
+
+func NewTimeoutCmd(timeout time.Duration, name string, args ...string) *Cmd {
+	return (&Cmd{
+		name: name,
+		args: args,
+	}).WithTimeout(timeout)
+}
+
+func (this *Cmd) WithTimeout(timeout time.Duration) *Cmd {
+	this.timeout = timeout
+
+	ctx, cancelFunc := context.WithTimeout(context.Background(), timeout)
+	this.ctx = ctx
+	this.cancelFunc = cancelFunc
+
+	return this
+}
+
+func (this *Cmd) WithStdout() *Cmd {
+	this.captureStdout = true
+	return this
+}
+
+func (this *Cmd) WithStderr() *Cmd {
+	this.captureStderr = true
+	return this
+}
+
+func (this *Cmd) WithEnv(env []string) *Cmd {
+	this.env = env
+	return this
+}
+
+func (this *Cmd) WithDir(dir string) *Cmd {
+	this.dir = dir
+	return this
+}
+
+func (this *Cmd) Start() error {
+	var cmd = this.compose()
+	return cmd.Start()
+}
+
+func (this *Cmd) Wait() error {
+	var cmd = this.compose()
+	return cmd.Wait()
+}
+
+func (this *Cmd) Run() error {
+	if this.cancelFunc != nil {
+		defer this.cancelFunc()
+	}
+
+	var cmd = this.compose()
+	return cmd.Run()
+}
+
+func (this *Cmd) RawStdout() string {
+	if this.stdout != nil {
+		return this.stdout.String()
+	}
+	return ""
+}
+
+func (this *Cmd) Stdout() string {
+	return strings.TrimSpace(this.RawStdout())
+}
+
+func (this *Cmd) RawStderr() string {
+	if this.stderr != nil {
+		return this.stderr.String()
+	}
+	return ""
+}
+
+func (this *Cmd) Stderr() string {
+	return strings.TrimSpace(this.RawStderr())
+}
+
+func (this *Cmd) String() string {
+	if this.rawCmd != nil {
+		return this.rawCmd.String()
+	}
+	var newCmd = exec.Command(this.name, this.args...)
+	return newCmd.String()
+}
+
+func (this *Cmd) Process() *os.Process {
+	if this.rawCmd != nil {
+		return this.rawCmd.Process
+	}
+	return nil
+}
+
+func (this *Cmd) compose() *exec.Cmd {
+	if this.rawCmd != nil {
+		return this.rawCmd
+	}
+
+	if this.ctx != nil {
+		this.rawCmd = exec.CommandContext(this.ctx, this.name, this.args...)
+	} else {
+		this.rawCmd = exec.Command(this.name, this.args...)
+	}
+
+	if this.env != nil {
+		this.rawCmd.Env = this.env
+	}
+
+	if len(this.dir) > 0 {
+		this.rawCmd.Dir = this.dir
+	}
+
+	if this.captureStdout {
+		this.stdout = &bytes.Buffer{}
+		this.rawCmd.Stdout = this.stdout
+	}
+	if this.captureStderr {
+		this.stderr = &bytes.Buffer{}
+		this.rawCmd.Stderr = this.stderr
+	}
+
+	return this.rawCmd
+}
--- a/internal/utils/exec/cmd_test.go
+++ b/internal/utils/exec/cmd_test.go
@@ -0,0 +1,61 @@
+// Copyright 2022 Liuxiangchao iwind.liu@gmail.com. All rights reserved. Official site: https://goedge.cn .
+
+package executils_test
+
+import (
+	executils "github.com/TeaOSLab/EdgeAdmin/internal/utils/exec"
+	"testing"
+	"time"
+)
+
+func TestNewTimeoutCmd_Sleep(t *testing.T) {
+	var cmd = executils.NewTimeoutCmd(1*time.Second, "sleep", "3")
+	cmd.WithStdout()
+	cmd.WithStderr()
+	err := cmd.Run()
+	t.Log("error:", err)
+	t.Log("stdout:", cmd.Stdout())
+	t.Log("stderr:", cmd.Stderr())
+}
+
+func TestNewTimeoutCmd_Echo(t *testing.T) {
+	var cmd = executils.NewTimeoutCmd(10*time.Second, "echo", "-n", "hello")
+	cmd.WithStdout()
+	cmd.WithStderr()
+	err := cmd.Run()
+	t.Log("error:", err)
+	t.Log("stdout:", cmd.Stdout())
+	t.Log("stderr:", cmd.Stderr())
+}
+
+func TestNewTimeoutCmd_Echo2(t *testing.T) {
+	var cmd = executils.NewCmd("echo", "hello")
+	cmd.WithStdout()
+	cmd.WithStderr()
+	err := cmd.Run()
+	t.Log("error:", err)
+	t.Log("stdout:", cmd.Stdout())
+	t.Log("raw stdout:", cmd.RawStdout())
+	t.Log("stderr:", cmd.Stderr())
+	t.Log("raw stderr:", cmd.RawStderr())
+}
+
+func TestNewTimeoutCmd_Echo3(t *testing.T) {
+	var cmd = executils.NewCmd("echo", "-n", "hello")
+	err := cmd.Run()
+	t.Log("error:", err)
+	t.Log("stdout:", cmd.Stdout())
+	t.Log("stderr:", cmd.Stderr())
+}
+
+func TestCmd_Process(t *testing.T) {
+	var cmd = executils.NewCmd("echo", "-n", "hello")
+	err := cmd.Run()
+	t.Log("error:", err)
+	t.Log(cmd.Process())
+}
+
+func TestNewTimeoutCmd_String(t *testing.T) {
+	var cmd = executils.NewCmd("echo", "-n", "hello")
+	t.Log("stdout:", cmd.String())
+}
--- a/internal/utils/exec/look_linux.go
+++ b/internal/utils/exec/look_linux.go
@@ -0,0 +1,58 @@
+// Copyright 2023 GoEdge CDN goedge.cdn@gmail.com. All rights reserved. Official site: https://goedge.cn .
+//go:build linux
+
+package executils
+
+import (
+	"golang.org/x/sys/unix"
+	"io/fs"
+	"os"
+	"os/exec"
+	"syscall"
+)
+
+// LookPath customize our LookPath() function, to work in broken $PATH environment variable
+func LookPath(file string) (string, error) {
+	result, err := exec.LookPath(file)
+	if err == nil && len(result) > 0 {
+		return result, nil
+	}
+
+	// add common dirs contains executable files these may be excluded in $PATH environment variable
+	var binPaths = []string{
+		"/usr/sbin",
+		"/usr/bin",
+		"/usr/local/sbin",
+		"/usr/local/bin",
+	}
+
+	for _, binPath := range binPaths {
+		var fullPath = binPath + string(os.PathSeparator) + file
+
+		stat, err := os.Stat(fullPath)
+		if err != nil {
+			continue
+		}
+		if stat.IsDir() {
+			return "", syscall.EISDIR
+		}
+
+		var mode = stat.Mode()
+		if mode.IsDir() {
+			return "", syscall.EISDIR
+		}
+		err = syscall.Faccessat(unix.AT_FDCWD, fullPath, unix.X_OK, unix.AT_EACCESS)
+		if err == nil || (err != syscall.ENOSYS && err != syscall.EPERM) {
+			return fullPath, err
+		}
+		if mode&0111 != 0 {
+			return fullPath, nil
+		}
+		return "", fs.ErrPermission
+	}
+
+	return "", &exec.Error{
+		Name: file,
+		Err:  exec.ErrNotFound,
+	}
+}
--- a/internal/utils/exec/look_others.go
+++ b/internal/utils/exec/look_others.go
@@ -0,0 +1,10 @@
+// Copyright 2023 GoEdge CDN goedge.cdn@gmail.com. All rights reserved. Official site: https://goedge.cn .
+//go:build !linux
+
+package executils
+
+import "os/exec"
+
+func LookPath(file string) (string, error) {
+	return exec.LookPath(file)
+}
--- a/internal/utils/firewall.go
+++ b/internal/utils/firewall.go
@@ -3,6 +3,7 @@
 package utils

 import (
+	executils "github.com/TeaOSLab/EdgeAdmin/internal/utils/exec"
 	"github.com/iwind/TeaGo/logs"
 	"github.com/iwind/TeaGo/types"
 	"os/exec"
@@ -14,7 +15,7 @@ func AddPortsToFirewall(ports []int) {
 		// Linux
 		if runtime.GOOS == "linux" {
 			// firewalld
-			firewallCmd, _ := exec.LookPath("firewall-cmd")
+			firewallCmd, _ := executils.LookPath("firewall-cmd")
 			if len(firewallCmd) > 0 {
 				err := exec.Command(firewallCmd, "--add-port="+types.String(port)+"/tcp").Run()
 				if err == nil {
--- a/internal/utils/service_linux.go
+++ b/internal/utils/service_linux.go
@@ -5,6 +5,7 @@ package utils
 import (
 	"errors"
 	teaconst "github.com/TeaOSLab/EdgeAdmin/internal/const"
+	executils "github.com/TeaOSLab/EdgeAdmin/internal/utils/exec"
 	"github.com/iwind/TeaGo/Tea"
 	"github.com/iwind/TeaGo/files"
 	"os"
@@ -21,7 +22,7 @@ func (this *ServiceManager) Install(exePath string, args []string) error {
 		return errors.New("only root users can install the service")
 	}

-	systemd, err := exec.LookPath("systemctl")
+	systemd, err := executils.LookPath("systemctl")
 	if err != nil {
 		return this.installInitService(exePath, args)
 	}
@@ -36,7 +37,7 @@ func (this *ServiceManager) Start() error {
 	}

 	if files.NewFile(systemdServiceFile).Exists() {
-		systemd, err := exec.LookPath("systemctl")
+		systemd, err := executils.LookPath("systemctl")
 		if err != nil {
 			return err
 		}
@@ -53,7 +54,7 @@ func (this *ServiceManager) Uninstall() error {
 	}

 	if files.NewFile(systemdServiceFile).Exists() {
-		systemd, err := exec.LookPath("systemctl")
+		systemd, err := executils.LookPath("systemctl")
 		if err != nil {
 			return err
 		}
@@ -93,7 +94,7 @@ func (this *ServiceManager) installInitService(exePath string, args []string) er
 		return err
 	}

-	chkCmd, err := exec.LookPath("chkconfig")
+	chkCmd, err := executils.LookPath("chkconfig")
 	if err != nil {
 		return err
 	}
--- a/internal/utils/upgrade_manager.go
+++ b/internal/utils/upgrade_manager.go
@@ -9,6 +9,7 @@ import (
 	"errors"
 	"fmt"
 	teaconst "github.com/TeaOSLab/EdgeAdmin/internal/const"
+	executils "github.com/TeaOSLab/EdgeAdmin/internal/utils/exec"
 	"github.com/iwind/TeaGo/Tea"
 	"github.com/iwind/TeaGo/maps"
 	"github.com/iwind/TeaGo/types"
@@ -87,10 +88,10 @@ func (this *UpgradeManager) Start() error {
 	}()

 	// 检查unzip
-	unzipExe, _ := exec.LookPath("unzip")
+	unzipExe, _ := executils.LookPath("unzip")

 	// 检查cp
-	cpExe, _ := exec.LookPath("cp")
+	cpExe, _ := executils.LookPath("cp")
 	if len(cpExe) == 0 {
 		return errors.New("can not find 'cp' command")
 	}
--- a/internal/web/actions/default/clusters/cluster/init.go
+++ b/internal/web/actions/default/clusters/cluster/init.go
@@ -49,6 +49,7 @@ func init() {
 			Post("/start", new(node.StartAction)).
 			Post("/stop", new(node.StopAction)).
 			Post("/up", new(node.UpAction)).
+			Post("/updateIsOn", new(node.UpdateIsOnAction)).
 			Get("/detail", new(node.DetailAction)).
 			GetPost("/updateDNSPopup", new(node.UpdateDNSPopupAction)).
 			Post("/syncDomain", new(node.SyncDomainAction)).
--- a/internal/web/actions/default/clusters/cluster/node/nodeutils/utils.go
+++ b/internal/web/actions/default/clusters/cluster/node/nodeutils/utils.go
@@ -4,12 +4,23 @@ package nodeutils

 import (
 	"errors"
+	"fmt"
+	"github.com/TeaOSLab/EdgeAdmin/internal/configs"
+	teaconst "github.com/TeaOSLab/EdgeAdmin/internal/const"
+	"github.com/TeaOSLab/EdgeAdmin/internal/rpc"
+	"github.com/TeaOSLab/EdgeAdmin/internal/utils"
+	executils "github.com/TeaOSLab/EdgeAdmin/internal/utils/exec"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
 	"github.com/TeaOSLab/EdgeCommon/pkg/langs/codes"
 	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/iwind/TeaGo/Tea"
 	"github.com/iwind/TeaGo/maps"
 	"github.com/iwind/TeaGo/types"
+	"gopkg.in/yaml.v3"
+	"os"
+	"runtime"
 	"strconv"
+	"time"
 )

 // InitNodeInfo 初始化节点信息
@@ -104,3 +115,124 @@ func InitNodeInfo(parentAction *actionutils.ParentAction, nodeId int64) (*pb.Nod

 	return nodeResp.Node, nil
 }
+
+// InstallLocalNode 安装本地节点
+func InstallLocalNode() error {
+	var targetDir = Tea.Root
+	var nodeDir = targetDir + "/edge-node"
+	var apiAddr = "http://127.0.0.1:8001" // 先固定
+
+	// 查找节点安装文件
+	var zipFile = Tea.Root + "/edge-api/deploy/edge-node-linux-" + runtime.GOARCH + "-v" + teaconst.Version /** 默认和管理系统一致 **/ + ".zip"
+	{
+		stat, err := os.Stat(zipFile)
+		if err != nil {
+			if os.IsNotExist(err) {
+				return errors.New("installer file not found in '" + zipFile + "'")
+			}
+			return fmt.Errorf("open installer file failed: %w", err)
+		}
+		if stat.IsDir() {
+			return errors.New("invalid installer file '" + zipFile + "'")
+		}
+	}
+
+	// 解压节点
+	var unzip = utils.NewUnzip(zipFile, targetDir)
+	err := unzip.Run()
+	if err != nil {
+		return fmt.Errorf("unzip installer file failed: %w", err)
+	}
+
+	// 创建节点
+	rpcClient, err := rpc.SharedRPC()
+	if err != nil {
+		return fmt.Errorf("create rpc client failed: %w", err)
+	}
+	var ctx = rpcClient.Context(0)
+	nodeClustersResp, err := rpcClient.NodeClusterRPC().ListEnabledNodeClusters(ctx, &pb.ListEnabledNodeClustersRequest{
+		IdDesc: true,
+		Offset: 0,
+		Size:   1,
+	})
+	if err != nil {
+		return err
+	}
+	if len(nodeClustersResp.NodeClusters) == 0 {
+		return errors.New("no clusters yet, please create a cluster at least")
+	}
+	var clusterId = nodeClustersResp.NodeClusters[0].Id
+
+	// 检查节点是否已生成
+	countNodesResp, err := rpcClient.NodeRPC().CountAllEnabledNodesMatch(ctx, &pb.CountAllEnabledNodesMatchRequest{
+		NodeClusterId: clusterId,
+	})
+	if err != nil {
+		return err
+	}
+	if countNodesResp.Count > 0 {
+		// 这里先不判断是否有本地节点，只要有节点，就不允许再次执行
+		return errors.New("there are already nodes in the cluster")
+	}
+
+	createNodeResp, err := rpcClient.NodeRPC().CreateNode(ctx, &pb.CreateNodeRequest{
+		Name:          "本地节点",
+		NodeClusterId: clusterId,
+		NodeLogin:     nil,
+		NodeGroupId:   0,
+		DnsRoutes:     nil,
+		NodeRegionId:  0,
+	})
+	if err != nil {
+		return err
+	}
+	var nodeId = createNodeResp.NodeId
+	nodeResp, err := rpcClient.NodeRPC().FindEnabledNode(ctx, &pb.FindEnabledNodeRequest{NodeId: nodeId})
+	if err != nil {
+		return err
+	}
+	if nodeResp.Node == nil {
+		return errors.New("could not find local node with created id '" + types.String(nodeId) + "'")
+	}
+	var node = nodeResp.Node
+
+	// 生成节点配置
+	var apiConfig = &configs.APIConfig{
+		RPCEndpoints:     []string{apiAddr},
+		RPCDisableUpdate: true,
+		NodeId:           node.UniqueId,
+		Secret:           node.Secret,
+	}
+	apiConfigYAML, err := yaml.Marshal(apiConfig)
+	if err != nil {
+		return fmt.Errorf("encode config failed: %w", err)
+	}
+	err = os.WriteFile(nodeDir+"/configs/api_node.yaml", apiConfigYAML, 0666)
+	if err != nil {
+		return fmt.Errorf("write config file failed: %w", err)
+	}
+
+	// 测试节点
+	{
+		var cmd = executils.NewTimeoutCmd(5*time.Second, nodeDir+"/bin/edge-node", "test")
+		cmd.WithStdout()
+		cmd.WithStderr()
+		err = cmd.Run()
+		if err != nil {
+			return fmt.Errorf("node test failed: %w", err)
+		}
+	}
+
+	// 启动节点
+	{
+		var cmd = executils.NewTimeoutCmd(5*time.Second, nodeDir+"/bin/edge-node", "start")
+		cmd.WithStdout()
+		cmd.WithStderr()
+		err = cmd.Run()
+		if err != nil {
+			return fmt.Errorf("node start failed: %w", err)
+		}
+	}
+
+	return nil
+}
--- a/internal/web/actions/default/clusters/cluster/node/nodeutils/utils_test.go
+++ b/internal/web/actions/default/clusters/cluster/node/nodeutils/utils_test.go
@@ -0,0 +1,16 @@
+// Copyright 2024 GoEdge CDN goedge.cdn@gmail.com. All rights reserved. Official site: https://goedge.cn .
+
+package nodeutils_test
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/clusters/cluster/node/nodeutils"
+	_ "github.com/iwind/TeaGo/bootstrap"
+	"testing"
+)
+
+func TestInstallLocalNode(t *testing.T) {
+	err := nodeutils.InstallLocalNode()
+	if err != nil {
+		t.Fatal(err)
+	}
+}
--- a/internal/web/actions/default/clusters/cluster/node/updateIsOn.go
+++ b/internal/web/actions/default/clusters/cluster/node/updateIsOn.go
@@ -0,0 +1,35 @@
+// Copyright 2024 GoEdge CDN goedge.cdn@gmail.com. All rights reserved. Official site: https://goedge.cn .
+
+package node
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/langs/codes"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+)
+
+type UpdateIsOnAction struct {
+	actionutils.ParentAction
+}
+
+func (this *UpdateIsOnAction) RunPost(params struct {
+	NodeId int64
+	IsOn   bool
+}) {
+	if params.IsOn {
+		defer this.CreateLogInfo(codes.Node_LogUpdateNodeOn, params.NodeId)
+	} else {
+		defer this.CreateLogInfo(codes.Node_LogUpdateNodeOff, params.NodeId)
+	}
+
+	_, err := this.RPC().NodeRPC().UpdateNodeIsOn(this.AdminContext(), &pb.UpdateNodeIsOnRequest{
+		NodeId: params.NodeId,
+		IsOn:   params.IsOn,
+	})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Success()
+}
--- a/internal/web/actions/default/servers/components/waf/createSetPopup.go
+++ b/internal/web/actions/default/servers/components/waf/createSetPopup.go
@@ -54,7 +54,7 @@ func (this *CreateSetPopupAction) RunGet(params struct {
 	}

 	// 所有可选的动作
-	actionMaps := []maps.Map{}
+	var actionMaps = []maps.Map{}
 	for _, action := range firewallconfigs.AllActions {
 		actionMaps = append(actionMaps, maps.Map{
 			"name":        action.Name,
@@ -64,6 +64,9 @@ func (this *CreateSetPopupAction) RunGet(params struct {
 	}
 	this.Data["actions"] = actionMaps

+	// 是否为全局
+	this.Data["isGlobalPolicy"] = firewallPolicy.ServerId == 0
+
 	this.Show()
 }

--- a/internal/web/actions/default/servers/components/waf/policy.go
+++ b/internal/web/actions/default/servers/components/waf/policy.go
@@ -95,6 +95,7 @@ func (this *PolicyAction) RunGet(params struct {
 		"modeInfo":                 firewallconfigs.FindFirewallMode(firewallPolicy.Mode),
 		"groups":                   internalGroups,
 		"blockOptions":             firewallPolicy.BlockOptions,
+		"pageOptions":              firewallPolicy.PageOptions,
 		"captchaOptions":           firewallPolicy.CaptchaOptions,
 		"useLocalFirewall":         firewallPolicy.UseLocalFirewall,
 		"synFlood":                 firewallPolicy.SYNFlood,
--- a/internal/web/actions/default/servers/components/waf/update.go
+++ b/internal/web/actions/default/servers/components/waf/update.go
@@ -34,6 +34,7 @@ func (this *UpdateAction) RunGet(params struct {
 		return
 	}

+	// block options
 	if firewallPolicy.BlockOptions == nil {
 		firewallPolicy.BlockOptions = &firewallconfigs.HTTPFirewallBlockAction{
 			StatusCode: http.StatusForbidden,
@@ -43,6 +44,11 @@ func (this *UpdateAction) RunGet(params struct {
 		}
 	}

+	// page options
+	if firewallPolicy.PageOptions == nil {
+		firewallPolicy.PageOptions = firewallconfigs.DefaultHTTPFirewallPageAction()
+	}
+
 	// mode
 	if len(firewallPolicy.Mode) == 0 {
 		firewallPolicy.Mode = firewallconfigs.FirewallModeDefend
@@ -71,6 +77,7 @@ func (this *UpdateAction) RunGet(params struct {
 		"isOn":               firewallPolicy.IsOn,
 		"mode":               firewallPolicy.Mode,
 		"blockOptions":       firewallPolicy.BlockOptions,
+		"pageOptions":        firewallPolicy.PageOptions,
 		"captchaOptions":     firewallPolicy.CaptchaOptions,
 		"useLocalFirewall":   firewallPolicy.UseLocalFirewall,
 		"synFloodConfig":     firewallPolicy.SYNFlood,
@@ -107,6 +114,7 @@ func (this *UpdateAction) RunPost(params struct {
 	Name               string
 	GroupCodes         []string
 	BlockOptionsJSON   []byte
+	PageOptionsJSON    []byte
 	CaptchaOptionsJSON []byte
 	Description        string
 	IsOn               bool
@@ -132,6 +140,19 @@ func (this *UpdateAction) RunPost(params struct {
 	err := json.Unmarshal(params.BlockOptionsJSON, blockOptions)
 	if err != nil {
 		this.Fail("拦截动作参数校验失败：" + err.Error())
+		return
+	}
+
+	// 校验显示页面选项JSON
+	var pageOptions = &firewallconfigs.HTTPFirewallPageAction{}
+	err = json.Unmarshal(params.PageOptionsJSON, pageOptions)
+	if err != nil {
+		this.Fail("校验显示页面动作配置失败：" + err.Error())
+		return
+	}
+	if pageOptions.Status < 100 && pageOptions.Status > 999 {
+		this.Fail("显示页面动作的状态码配置错误：" + types.String(pageOptions.Status))
+		return
 	}

 	// 校验验证码选项JSON
@@ -139,6 +160,7 @@ func (this *UpdateAction) RunPost(params struct {
 	err = json.Unmarshal(params.CaptchaOptionsJSON, captchaOptions)
 	if err != nil {
 		this.Fail("验证码动作参数校验失败：" + err.Error())
+		return
 	}

 	// 检查极验配置
@@ -170,6 +192,7 @@ func (this *UpdateAction) RunPost(params struct {
 		Description:          params.Description,
 		FirewallGroupCodes:   params.GroupCodes,
 		BlockOptionsJSON:     params.BlockOptionsJSON,
+		PageOptionsJSON:      params.PageOptionsJSON,
 		CaptchaOptionsJSON:   params.CaptchaOptionsJSON,
 		Mode:                 params.Mode,
 		UseLocalFirewall:     params.UseLocalFirewall,
--- a/internal/web/actions/default/servers/deleteServers.go
+++ b/internal/web/actions/default/servers/deleteServers.go
@@ -0,0 +1,28 @@
+// Copyright 2024 GoEdge CDN goedge.cdn@gmail.com. All rights reserved. Official site: https://goedge.cn .
+
+package servers
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/langs/codes"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+)
+
+// DeleteServersAction 删除一组网站
+type DeleteServersAction struct {
+	actionutils.ParentAction
+}
+
+func (this *DeleteServersAction) RunPost(params struct {
+	ServerIds []int64
+}) {
+	defer this.CreateLogInfo(codes.Server_LogDeleteServers)
+
+	_, err := this.RPC().ServerRPC().DeleteServers(this.AdminContext(), &pb.DeleteServersRequest{ServerIds: params.ServerIds})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Success()
+}
--- a/internal/web/actions/default/servers/init.go
+++ b/internal/web/actions/default/servers/init.go
@@ -19,6 +19,7 @@ func init() {
 			GetPost("/create", new(CreateAction)).
 			GetPost("/update", new(UpdateAction)).
 			Post("/nearby", new(NearbyAction)).
+			Post("/deleteServers", new(DeleteServersAction)).

 			//
 			GetPost("/addPortPopup", new(AddPortPopupAction)).
--- a/internal/web/actions/default/servers/server/settings/locations/locationutils/location_helper.go
+++ b/internal/web/actions/default/servers/server/settings/locations/locationutils/location_helper.go
@@ -130,8 +130,6 @@ func (this *LocationHelper) createMenus(serverIdString string, locationIdString
 		"isOn":     locationConfig != nil && locationConfig.Web != nil && locationConfig.Web.Compression != nil && locationConfig.Web.Compression.IsPrior,
 	})

-	menuItems = this.filterMenuItems3(locationConfig, menuItems, serverIdString, locationIdString, secondMenuItem, actionPtr)
-
 	menuItems = append(menuItems, maps.Map{
 		"name":     this.Lang(actionPtr, codes.Server_MenuSettingPages),
 		"url":      "/servers/server/settings/locations/pages?serverId=" + serverIdString + "&locationId=" + locationIdString,
@@ -156,6 +154,9 @@ func (this *LocationHelper) createMenus(serverIdString string, locationIdString
 		"isActive": secondMenuItem == "webp",
 		"isOn":     locationConfig != nil && locationConfig.Web != nil && locationConfig.Web.WebP != nil && locationConfig.Web.WebP.IsPrior,
 	})
+
+	menuItems = this.filterMenuItems3(locationConfig, menuItems, serverIdString, locationIdString, secondMenuItem, actionPtr)
+
 	menuItems = append(menuItems, maps.Map{
 		"name":     this.Lang(actionPtr, codes.Server_MenuSettingStat),
 		"url":      "/servers/server/settings/locations/stat?serverId=" + serverIdString + "&locationId=" + locationIdString,
--- a/internal/web/actions/default/servers/serverutils/server_helper.go
+++ b/internal/web/actions/default/servers/serverutils/server_helper.go
@@ -344,8 +344,6 @@ func (this *ServerHelper) createSettingsMenu(secondMenuItem string, serverIdStri
 			"configCode": serverconfigs.ConfigCodeCompression,
 		})

-		menuItems = this.filterMenuItems3(serverConfig, menuItems, serverIdString, secondMenuItem, actionPtr)
-
 		menuItems = append(menuItems, maps.Map{
 			"name":       this.Lang(actionPtr, codes.Server_MenuSettingPages),
 			"url":        "/servers/server/settings/pages?serverId=" + serverIdString,
@@ -374,6 +372,8 @@ func (this *ServerHelper) createSettingsMenu(secondMenuItem string, serverIdStri
 			"configCode": serverconfigs.ConfigCodeWebp,
 		})

+		menuItems = this.filterMenuItems3(serverConfig, menuItems, serverIdString, secondMenuItem, actionPtr)
+
 		menuItems = append(menuItems, maps.Map{
 			"name":       this.Lang(actionPtr, codes.Server_MenuSettingStat),
 			"url":        "/servers/server/settings/stat?serverId=" + serverIdString,
--- a/internal/web/actions/default/settings/transfer/updateHosts.go
+++ b/internal/web/actions/default/settings/transfer/updateHosts.go
@@ -48,7 +48,7 @@ func (this *UpdateHostsAction) RunPost(params struct {
 	if err != nil {
 		this.FailField("host", "测试API节点时出错，请检查配置，错误信息："+err.Error())
 	}
-	_, err = client.APINodeRPC().FindCurrentAPINodeVersion(client.APIContext(0), &pb.FindCurrentAPINodeVersionRequest{})
+	_, err = client.APINodeRPC().FindCurrentAPINodeVersion(client.Context(0), &pb.FindCurrentAPINodeVersionRequest{})
 	if err != nil {
 		this.FailField("host", "无法连接此API节点，错误信息："+err.Error())
 	}
--- a/internal/web/actions/default/setup/mysql/mysqlinstallers/mysql_installer.go
+++ b/internal/web/actions/default/setup/mysql/mysqlinstallers/mysql_installer.go
@@ -7,6 +7,7 @@ import (
 	"crypto/rand"
 	"errors"
 	"fmt"
+	executils "github.com/TeaOSLab/EdgeAdmin/internal/utils/exec"
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/setup/mysql/mysqlinstallers/utils"
 	stringutil "github.com/iwind/TeaGo/utils/string"
 	timeutil "github.com/iwind/TeaGo/utils/time"
@@ -14,7 +15,6 @@ import (
 	"net"
 	"net/http"
 	"os"
-	"os/exec"
 	"path/filepath"
 	"regexp"
 	"runtime"
@@ -57,7 +57,7 @@ func (this *MySQLInstaller) InstallFromFile(xzFilePath string, targetDir string)

 	// check 'tar' command
 	this.log("checking 'tar' command ...")
-	var tarExe, _ = exec.LookPath("tar")
+	var tarExe, _ = executils.LookPath("tar")
 	if len(tarExe) == 0 {
 		this.log("installing 'tar' command ...")
 		err = this.installTarCommand()
@@ -70,7 +70,7 @@ func (this *MySQLInstaller) InstallFromFile(xzFilePath string, targetDir string)
 	this.log("checking system commands ...")
 	var cmdList = []string{"tar" /** again **/, "chown", "sh"}
 	for _, cmd := range cmdList {
-		cmdPath, err := exec.LookPath(cmd)
+		cmdPath, err := executils.LookPath(cmd)
 		if err != nil || len(cmdPath) == 0 {
 			return errors.New("could not find '" + cmd + "' command in this system")
 		}
@@ -87,7 +87,7 @@ func (this *MySQLInstaller) InstallFromFile(xzFilePath string, targetDir string)
 	}

 	// ubuntu apt
-	aptExe, err := exec.LookPath("apt")
+	aptExe, err := executils.LookPath("apt")
 	if err == nil && len(aptExe) > 0 {
 		for _, lib := range []string{"libaio1", "libncurses5"} {
 			this.log("checking " + lib + " ...")
@@ -100,7 +100,7 @@ func (this *MySQLInstaller) InstallFromFile(xzFilePath string, targetDir string)
 			time.Sleep(1 * time.Second)
 		}
 	} else { // yum
-		yumExe, err := exec.LookPath("yum")
+		yumExe, err := executils.LookPath("yum")
 		if err == nil && len(yumExe) > 0 {
 			for _, lib := range []string{"libaio", "ncurses-libs", "ncurses-compat-libs", "numactl-libs"} {
 				var cmd = utils.NewCmd("yum", "-y", "install", lib)
@@ -562,7 +562,7 @@ func (this *MySQLInstaller) log(message string) {

 // copy file
 func (this *MySQLInstaller) installService(baseDir string) error {
-	_, err := exec.LookPath("systemctl")
+	_, err := executils.LookPath("systemctl")
 	if err != nil {
 		return err
 	}
@@ -618,14 +618,14 @@ WantedBy=multi-user.target`
 // install 'tar' command automatically
 func (this *MySQLInstaller) installTarCommand() error {
 	// yum
-	yumExe, err := exec.LookPath("yum")
+	yumExe, err := executils.LookPath("yum")
 	if err == nil && len(yumExe) > 0 {
 		var cmd = utils.NewTimeoutCmd(10*time.Second, yumExe, "-y", "install", "tar")
 		return cmd.Run()
 	}

 	// apt
-	aptExe, err := exec.LookPath("apt")
+	aptExe, err := executils.LookPath("apt")
 	if err == nil && len(aptExe) > 0 {
 		var cmd = utils.NewTimeoutCmd(10*time.Second, aptExe, "-y", "install", "tar")
 		return cmd.Run()
@@ -636,7 +636,7 @@ func (this *MySQLInstaller) installTarCommand() error {

 func (this *MySQLInstaller) lookupGroupAdd() (string, error) {
 	for _, cmd := range []string{"groupadd", "addgroup"} {
-		path, err := exec.LookPath(cmd)
+		path, err := executils.LookPath(cmd)
 		if err == nil && len(path) > 0 {
 			return path, nil
 		}
@@ -646,7 +646,7 @@ func (this *MySQLInstaller) lookupGroupAdd() (string, error) {

 func (this *MySQLInstaller) lookupUserAdd() (string, error) {
 	for _, cmd := range []string{"useradd", "adduser"} {
-		path, err := exec.LookPath(cmd)
+		path, err := executils.LookPath(cmd)
 		if err == nil && len(path) > 0 {
 			return path, nil
 		}
--- a/web/public/js/components.js
+++ b/web/public/js/components.js
--- a/web/public/js/components.src.js
+++ b/web/public/js/components.src.js
--- a/web/public/js/components/common/bandwidth-size-capacity-box.js
+++ b/web/public/js/components/common/bandwidth-size-capacity-box.js
@@ -0,0 +1,79 @@
+Vue.component("bandwidth-size-capacity-box", {
+	props: ["v-name", "v-value", "v-count", "v-unit", "size", "maxlength", "v-supported-units"],
+	data: function () {
+		let v = this.vValue
+		if (v == null) {
+			v = {
+				count: this.vCount,
+				unit: this.vUnit
+			}
+		}
+		if (v.unit == null || v.unit.length == 0) {
+			v.unit = "mb"
+		}
+
+		if (typeof (v["count"]) != "number") {
+			v["count"] = -1
+		}
+
+		let vSize = this.size
+		if (vSize == null) {
+			vSize = 6
+		}
+
+		let vMaxlength = this.maxlength
+		if (vMaxlength == null) {
+			vMaxlength = 10
+		}
+
+		let supportedUnits = this.vSupportedUnits
+		if (supportedUnits == null) {
+			supportedUnits = []
+		}
+
+		return {
+			capacity: v,
+			countString: (v.count >= 0) ? v.count.toString() : "",
+			vSize: vSize,
+			vMaxlength: vMaxlength,
+			supportedUnits: supportedUnits
+		}
+	},
+	watch: {
+		"countString": function (newValue) {
+			let value = newValue.trim()
+			if (value.length == 0) {
+				this.capacity.count = -1
+				this.change()
+				return
+			}
+			let count = parseInt(value)
+			if (!isNaN(count)) {
+				this.capacity.count = count
+			}
+			this.change()
+		}
+	},
+	methods: {
+		change: function () {
+			this.$emit("change", this.capacity)
+		}
+	},
+	template: `<div class="ui fields inline">
+	<input type="hidden" :name="vName" :value="JSON.stringify(capacity)"/>
+	<div class="ui field">
+		<input type="text" v-model="countString" :maxlength="vMaxlength" :size="vSize"/>
+	</div>
+	<div class="ui field">
+		<select class="ui dropdown" v-model="capacity.unit" @change="change">
+			<option value="b" v-if="supportedUnits.length == 0 || supportedUnits.$contains('b')">Bps</option>
+			<option value="kb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('kb')">Kbps</option>
+			<option value="mb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('mb')">Mbps</option>
+			<option value="gb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('gb')">Gbps</option>
+			<option value="tb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('tb')">Tbps</option>
+			<option value="pb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('pb')">Pbps</option>
+			<option value="eb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('eb')">Ebps</option>
+		</select>
+	</div>
+</div>`
+})
--- a/web/public/js/components/common/bandwidth-size-capacity-view.js
+++ b/web/public/js/components/common/bandwidth-size-capacity-view.js
@@ -0,0 +1,15 @@
+Vue.component("bandwidth-size-capacity-view", {
+	props: ["v-value"],
+	data: function () {
+		let capacity = this.vValue
+		if (capacity != null && capacity.count > 0 && typeof capacity.unit === "string") {
+			capacity.unit = capacity.unit[0].toUpperCase() + capacity.unit.substring(1) + "ps"
+		}
+		return {
+			capacity: capacity
+		}
+	},
+	template: `<span>
+	<span v-if="capacity != null && capacity.count > 0">{{capacity.count}}{{capacity.unit}}</span>
+</span>`
+})
--- a/web/public/js/components/common/size-capacity-view.js
+++ b/web/public/js/components/common/size-capacity-view.js
@@ -1,7 +1,12 @@
 Vue.component("size-capacity-view", {
 	props:["v-default-text", "v-value"],
+	methods: {
+		composeCapacity: function (capacity) {
+			return teaweb.convertSizeCapacityToString(capacity)
+		}
+	},
 	template: `<div>
-	<span v-if="vValue != null && vValue.count > 0">{{vValue.count}}{{vValue.unit.toUpperCase().replace(/(.)B/, "$1iB")}}</span>
+	<span v-if="vValue != null && vValue.count > 0">{{composeCapacity(vValue)}}</span>
 	<span v-else>{{vDefaultText}}</span>
 </div>`
 })
--- a/web/public/js/components/server/http-cache-refs-config-box.js
+++ b/web/public/js/components/server/http-cache-refs-config-box.js
@@ -79,7 +79,17 @@ Vue.component("http-cache-refs-config-box", {
 						that.refs.push(newRef)
 					}

-					that.change()
+					// move to bottom
+					var afterChangeCallback = function () {
+						setTimeout(function () {
+							let rightBox = document.querySelector(".right-box")
+							if (rightBox != null) {
+								rightBox.scrollTo(0, isReverse ? 0 : 100000)
+							}
+						}, 100)
+					}
+
+					that.change(afterChangeCallback)
 				}
 			})
 		},
@@ -140,7 +150,7 @@ Vue.component("http-cache-refs-config-box", {
 			}
 			return unit
 		},
-		change: function () {
+		change: function (callback) {
 			this.$forceUpdate()

 			// 自动保存
@@ -159,7 +169,11 @@ Vue.component("http-cache-refs-config-box", {
 					})
 					.success(function (resp) {
 						if (resp.data.isUpdated) {
-							teaweb.successToast("保存成功")
+							teaweb.successToast("保存成功", null, function () {
+								if (typeof callback == "function") {
+									callback()
+								}
+							})
 						}
 					})
 					.post()
--- a/web/public/js/components/server/http-charsets-box.js
+++ b/web/public/js/components/server/http-charsets-box.js
@@ -7,7 +7,8 @@ Vue.component("http-charsets-box", {
 				isPrior: false,
 				isOn: false,
 				charset: "",
-				isUpper: false
+				isUpper: false,
+				force: false
 			}
 		}
 		return {
@@ -51,13 +52,20 @@ Vue.component("http-charsets-box", {
 		<more-options-tbody @change="changeAdvancedVisible" v-if="((!vIsLocation && !vIsGroup) || charsetConfig.isPrior) && charsetConfig.isOn"></more-options-tbody>
 		<tbody v-show="((!vIsLocation && !vIsGroup) || charsetConfig.isPrior) && charsetConfig.isOn && advancedVisible">
 			<tr>
-				<td>字符编码是否大写</td>
+				<td>强制替换</td>
+				<td>
+					<checkbox v-model="charsetConfig.force"></checkbox>
+					<p class="comment">选中后，表示强制覆盖已经设置的字符集；不选中，表示如果源站已经设置了字符集，则保留不修改。</p>
+				</td>
+			</tr>
+			<tr>
+				<td>字符编码大写</td>
 				<td>
 					<div class="ui checkbox">
 						<input type="checkbox" v-model="charsetConfig.isUpper"/>
 						<label></label>
 					</div>
-					<p class="comment">选中后将指定的字符编码转换为大写，比如默认为<span class="ui label tiny">utf-8</span>，选中后将改为<span class="ui label tiny">UTF-8</span>。</p>
+					<p class="comment">选中后将指定的字符编码转换为大写，比如默认为<code-label>utf-8</code-label>，选中后将改为<code-label>UTF-8</code-label>。</p>
 				</td>
 			</tr>
 		</tbody>
--- a/web/public/js/components/server/http-cond-definitions.js
+++ b/web/public/js/components/server/http-cond-definitions.js
@@ -896,7 +896,7 @@ Vue.component("http-cond-params", {
 		<td>不区分大小写</td>
 		<td>
 		   <div class="ui checkbox">
-				<input type="checkbox" v-model="cond.isCaseInsensitive"/>
+				<input type="checkbox" name="condIsCaseInsensitive" v-model="cond.isCaseInsensitive"/>
 				<label></label>
 			</div>
 			<p class="comment">选中后表示对比时忽略参数值的大小写。</p>
--- a/web/public/js/components/server/http-firewall-actions-box.js
+++ b/web/public/js/components/server/http-firewall-actions-box.js
@@ -55,10 +55,12 @@ Vue.component("http-firewall-actions-box", {

 		var defaultPageBody = `<!DOCTYPE html>
 <html lang="en">
-<title>403 Forbidden</title>
+<head>
+\t<title>403 Forbidden</title>
 \t<style>
 \t\taddress { line-height: 1.8; }
 \t</style>
+</head>
 <body>
 <h1>403 Forbidden</h1>
 <address>Connection: \${remoteAddr} (Client) -&gt; \${serverAddr} (Server)</address>
@@ -83,6 +85,8 @@ Vue.component("http-firewall-actions-box", {
 			ipListLevels: [],

 			// 动作参数
+			allowScope: "global",
+
 			blockTimeout: "",
 			blockTimeoutMax: "",
 			blockScope: "global",
@@ -103,6 +107,7 @@ Vue.component("http-firewall-actions-box", {

 			tagTags: [],

+			pageUseDefault: true,
 			pageStatus: 403,
 			pageBody: defaultPageBody,
 			defaultPageBody: defaultPageBody,
@@ -137,6 +142,9 @@ Vue.component("http-firewall-actions-box", {
 			})
 			this.actionOptions = {}
 		},
+		allowScope: function (v) {
+			this.actionOptions["scope"] = v
+		},
 		blockTimeout: function (v) {
 			v = parseInt(v)
 			if (isNaN(v)) {
@@ -271,11 +279,13 @@ Vue.component("http-firewall-actions-box", {
 	methods: {
 		add: function () {
 			this.action = null
-			this.actionCode = "block"
+			this.actionCode = "page"
 			this.isAdding = true
 			this.actionOptions = {}

 			// 动作参数
+			this.allowScope = "global"
+
 			this.blockTimeout = ""
 			this.blockTimeoutMax = ""
 			this.blockScope = "global"
@@ -300,6 +310,7 @@ Vue.component("http-firewall-actions-box", {

 			this.tagTags = []

+			this.pageUseDefault = true
 			this.pageStatus = 403
 			this.pageBody = this.defaultPageBody

@@ -359,6 +370,11 @@ Vue.component("http-firewall-actions-box", {
 					}
 					break
 				case "allow":
+					if (config.options != null && config.options.scope != null && config.options.scope.length > 0) {
+						this.allowScope = config.options.scope
+					} else {
+						this.allowScope = "global"
+					}
 					break
 				case "log":
 					break
@@ -427,8 +443,14 @@ Vue.component("http-firewall-actions-box", {
 					}
 					break
 				case "page":
+					this.pageUseDefault = true
 					this.pageStatus = 403
 					this.pageBody = this.defaultPageBody
+					if (typeof config.options.useDefault === "boolean") {
+						this.pageUseDefault = config.options.useDefault
+					} else {
+						this.pageUseDefault = false
+					}
 					if (config.options.status != null) {
 						this.pageStatus = config.options.status
 					}
@@ -531,6 +553,7 @@ Vue.component("http-firewall-actions-box", {
 				}

 				this.actionOptions = {
+					useDefault: this.pageUseDefault,
 					status: pageStatus,
 					body: this.pageBody
 				}
@@ -663,6 +686,13 @@ Vue.component("http-firewall-actions-box", {
 		<div v-for="(config, index) in configs" :data-index="index" :key="config.id" class="ui label small basic" :class="{blue: index == editingIndex}" style="margin-bottom: 0.4em">
 			{{config.name}} <span class="small">({{config.code.toUpperCase()}})</span> 
 			
+			<!-- allow -->
+			<span class="small" v-if="config.code == 'allow' && config.options != null && config.options.scope != null && config.options.scope.length > 0">
+				<span v-if="config.options.scope == 'group'">[分组]</span>
+				<span v-if="config.options.scope == 'server'">[网站]</span>
+				<span v-if="config.options.scope == 'global'">[网站和策略]</span>
+			</span>
+			
 			<!-- block -->
 			<span v-if="config.code == 'block' && config.options.timeout > 0">：封禁时长{{config.options.timeout}}<span v-if="config.options.timeoutMax > config.options.timeout">-{{config.options.timeoutMax}}</span>秒</span>
 			
@@ -689,7 +719,7 @@ Vue.component("http-firewall-actions-box", {
 			<span v-if="config.code == 'tag'">：{{config.options.tags.join(", ")}}</span>
 			
 			<!-- page -->
-			<span v-if="config.code == 'page'">：[{{config.options.status}}]</span>
+			<span v-if="config.code == 'page'">：[{{config.options.status}}]<span v-if="config.options.useDefault">&nbsp; [默认页面]</span></span>
 			
 			<!-- redirect -->
 			<span v-if="config.code == 'redirect'">：{{config.options.url}}</span>
@@ -701,7 +731,7 @@ Vue.component("http-firewall-actions-box", {
 			<span v-if="config.code == 'go_set'">：{{config.options.groupName}} / {{config.options.setName}}</span>
 			
 			<!-- 范围 -->
-			<span v-if="config.options.scope != null && config.options.scope.length > 0" class="small grey">
+			<span v-if="config.code != 'allow' && config.options.scope != null && config.options.scope.length > 0" class="small grey">
 				&nbsp; 
 				<span v-if="config.options.scope == 'global'">[所有网站]</span>
 				<span v-if="config.options.scope == 'service'">[当前网站]</span>
@@ -724,6 +754,21 @@ Vue.component("http-firewall-actions-box", {
 				</td>
 			</tr>
 			
+			<!-- allow -->
+			<tr v-if="actionCode == 'allow'">
+				<td>有效范围</td>
+				<td>
+					<select class="ui dropdown auto-width" v-model="allowScope">
+						<option value="group">分组</option>
+						<option value="server">网站</option>
+						<option value="global">网站和策略</option>
+					</select>
+					<p class="comment" v-if="allowScope == 'group'">跳过当前分组其他规则集，继续执行其他分组的规则集。</p>
+					<p class="comment" v-if="allowScope == 'server'">跳过当前网站所有的规则集。</p>
+					<p class="comment" v-if="allowScope =='global'">跳过当前网站和网站对应WAF策略所有的规则集。</p>
+				</td>
+			</tr>
+			
 			<!-- block -->
 			<tr v-if="actionCode == 'block'">
 				<td>封禁范围</td>
@@ -891,11 +936,17 @@ Vue.component("http-firewall-actions-box", {
 			
 			<!-- page -->
 			<tr v-if="actionCode == 'page'">
-				<td>状态码 *</td>
+				<td>使用默认提示</td>
+				<td>
+					<checkbox v-model="pageUseDefault"></checkbox>
+				</td>
+			</tr>
+			<tr v-if="actionCode == 'page' && !pageUseDefault">
+				<td class="color-border">状态码 *</td>
 				<td><input type="text" style="width: 4em" maxlength="3" v-model="pageStatus"/></td>
 			</tr>
-			<tr v-if="actionCode == 'page'">
-				<td>网页内容</td>
+			<tr v-if="actionCode == 'page' && !pageUseDefault">
+				<td class="color-border">网页内容</td>
 				<td>
 					<textarea v-model="pageBody"></textarea>
 				</td>
--- a/web/public/js/components/server/http-firewall-actions-view.js
+++ b/web/public/js/components/server/http-firewall-actions-view.js
@@ -6,6 +6,11 @@ Vue.component("http-firewall-actions-view", {
 			<span :class="{red: action.category == 'block', orange: action.category == 'verify', green: action.category == 'allow'}">{{action.name}} ({{action.code.toUpperCase()}})
 			  	<div v-if="action.options != null">
 			  		<span class="grey small" v-if="action.code.toLowerCase() == 'page'">[{{action.options.status}}]</span>
+			  		<span class="grey small" v-if="action.code.toLowerCase() == 'allow' && action.options != null && action.options.scope != null && action.options.scope.length > 0">
+			  			<span v-if="action.options.scope == 'group'">[分组]</span>
+						<span v-if="action.options.scope == 'server'">[网站]</span>
+						<span v-if="action.options.scope == 'global'">[网站和策略]</span>	
+					</span>
 				</div>	
 			</span>
 		</div>             
--- a/web/public/js/components/server/http-firewall-page-options-viewer.js
+++ b/web/public/js/components/server/http-firewall-page-options-viewer.js
@@ -0,0 +1,15 @@
+Vue.component("http-firewall-page-options-viewer", {
+	props: ["v-page-options"],
+	data: function () {
+		return {
+			options: this.vPageOptions
+		}
+	},
+	template: `<div>
+	<span v-if="options == null">默认设置</span>
+	<div v-else>
+		状态码：{{options.status}} / 提示内容：<span v-if="options.body != null && options.body.length > 0">[{{options.body.length}}字符]</span>
+	</div>
+</div>	
+`
+})
--- a/web/public/js/components/server/http-firewall-page-options.js
+++ b/web/public/js/components/server/http-firewall-page-options.js
@@ -0,0 +1,67 @@
+Vue.component("http-firewall-page-options", {
+	props: ["v-page-options"],
+	data: function () {
+		var defaultPageBody = `<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>403 Forbidden</title>
+	<style>
+		address { line-height: 1.8; }
+	</style>
+</head>
+<body>
+<h1>403 Forbidden By WAF</h1>
+<address>Connection: \${remoteAddr} (Client) -&gt; \${serverAddr} (Server)</address>
+<address>Request ID: \${requestId}</address>
+</body>
+</html>`
+
+		return {
+			pageOptions: this.vPageOptions,
+			status: this.vPageOptions.status,
+			body: this.vPageOptions.body,
+			defaultPageBody: defaultPageBody,
+			isEditing: false
+		}
+	},
+	watch: {
+		status: function (v) {
+			if (typeof v === "string" && v.length != 3) {
+				return
+			}
+			let statusCode = parseInt(v)
+			if (isNaN(statusCode)) {
+				this.pageOptions.status = 403
+			} else {
+				this.pageOptions.status = statusCode
+			}
+		},
+		body: function (v) {
+			this.pageOptions.body = v
+		}
+	},
+	methods: {
+		edit: function () {
+			this.isEditing = !this.isEditing
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="pageOptionsJSON" :value="JSON.stringify(pageOptions)"/>
+	<a href="" @click.prevent="edit">状态码：{{status}} / 提示内容：<span v-if="pageOptions.body != null && pageOptions.body.length > 0">[{{pageOptions.body.length}}字符]</span><span v-else class="disabled">[无]</span>
+	 <i class="icon angle" :class="{up: isEditing, down: !isEditing}"></i></a>
+	<table class="ui table" v-show="isEditing">
+		<tr>
+			<td class="title">状态码 *</td>
+			<td><input type="text" style="width: 4em" maxlength="3" v-model="status"/></td>
+		</tr>
+		<tr>
+			<td>网页内容</td>
+			<td>
+				<textarea v-model="body"></textarea>
+				<p class="comment"><a href="" @click.prevent="body = defaultPageBody">[使用模板]</a> </p>
+			</td>
+		</tr>
+	</table>
+</div>	
+`
+})
--- a/web/public/js/quill/quill.bubble.css
+++ b/web/public/js/quill/quill.bubble.css
@@ -0,0 +1,952 @@
+/*!
+ * Quill Editor v1.3.7
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0px;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+  padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 1.2em;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+  padding-left: 1.5em;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+  background-color: #000;
+}
+.ql-editor .ql-bg-red {
+  background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+  background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+  background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+  background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+  background-color: #93f;
+}
+.ql-editor .ql-color-white {
+  color: #fff;
+}
+.ql-editor .ql-color-red {
+  color: #e60000;
+}
+.ql-editor .ql-color-orange {
+  color: #f90;
+}
+.ql-editor .ql-color-yellow {
+  color: #ff0;
+}
+.ql-editor .ql-color-green {
+  color: #008a00;
+}
+.ql-editor .ql-color-blue {
+  color: #06c;
+}
+.ql-editor .ql-color-purple {
+  color: #93f;
+}
+.ql-editor .ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+  font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+  font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+  font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
+}
+.ql-bubble.ql-toolbar:after,
+.ql-bubble .ql-toolbar:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-bubble.ql-toolbar button,
+.ql-bubble .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 24px;
+  padding: 3px 5px;
+  width: 28px;
+}
+.ql-bubble.ql-toolbar button svg,
+.ql-bubble .ql-toolbar button svg {
+  float: left;
+  height: 100%;
+}
+.ql-bubble.ql-toolbar button:active:hover,
+.ql-bubble .ql-toolbar button:active:hover {
+  outline: none;
+}
+.ql-bubble.ql-toolbar input.ql-image[type=file],
+.ql-bubble .ql-toolbar input.ql-image[type=file] {
+  display: none;
+}
+.ql-bubble.ql-toolbar button:hover,
+.ql-bubble .ql-toolbar button:hover,
+.ql-bubble.ql-toolbar button:focus,
+.ql-bubble .ql-toolbar button:focus,
+.ql-bubble.ql-toolbar button.ql-active,
+.ql-bubble .ql-toolbar button.ql-active,
+.ql-bubble.ql-toolbar .ql-picker-label:hover,
+.ql-bubble .ql-toolbar .ql-picker-label:hover,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active,
+.ql-bubble.ql-toolbar .ql-picker-item:hover,
+.ql-bubble .ql-toolbar .ql-picker-item:hover,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected {
+  color: #fff;
+}
+.ql-bubble.ql-toolbar button:hover .ql-fill,
+.ql-bubble .ql-toolbar button:hover .ql-fill,
+.ql-bubble.ql-toolbar button:focus .ql-fill,
+.ql-bubble .ql-toolbar button:focus .ql-fill,
+.ql-bubble.ql-toolbar button.ql-active .ql-fill,
+.ql-bubble .ql-toolbar button.ql-active .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+  fill: #fff;
+}
+.ql-bubble.ql-toolbar button:hover .ql-stroke,
+.ql-bubble .ql-toolbar button:hover .ql-stroke,
+.ql-bubble.ql-toolbar button:focus .ql-stroke,
+.ql-bubble .ql-toolbar button:focus .ql-stroke,
+.ql-bubble.ql-toolbar button.ql-active .ql-stroke,
+.ql-bubble .ql-toolbar button.ql-active .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
+.ql-bubble .ql-toolbar button:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
+.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
+.ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: #fff;
+}
+@media (pointer: coarse) {
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active),
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
+    color: #ccc;
+  }
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #ccc;
+  }
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #ccc;
+  }
+}
+.ql-bubble {
+  box-sizing: border-box;
+}
+.ql-bubble * {
+  box-sizing: border-box;
+}
+.ql-bubble .ql-hidden {
+  display: none;
+}
+.ql-bubble .ql-out-bottom,
+.ql-bubble .ql-out-top {
+  visibility: hidden;
+}
+.ql-bubble .ql-tooltip {
+  position: absolute;
+  transform: translateY(10px);
+}
+.ql-bubble .ql-tooltip a {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ql-bubble .ql-tooltip.ql-flip {
+  transform: translateY(-10px);
+}
+.ql-bubble .ql-formats {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ql-bubble .ql-formats:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-bubble .ql-stroke {
+  fill: none;
+  stroke: #ccc;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.ql-bubble .ql-stroke-miter {
+  fill: none;
+  stroke: #ccc;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+.ql-bubble .ql-fill,
+.ql-bubble .ql-stroke.ql-fill {
+  fill: #ccc;
+}
+.ql-bubble .ql-empty {
+  fill: none;
+}
+.ql-bubble .ql-even {
+  fill-rule: evenodd;
+}
+.ql-bubble .ql-thin,
+.ql-bubble .ql-stroke.ql-thin {
+  stroke-width: 1;
+}
+.ql-bubble .ql-transparent {
+  opacity: 0.4;
+}
+.ql-bubble .ql-direction svg:last-child {
+  display: none;
+}
+.ql-bubble .ql-direction.ql-active svg:last-child {
+  display: inline;
+}
+.ql-bubble .ql-direction.ql-active svg:first-child {
+  display: none;
+}
+.ql-bubble .ql-editor h1 {
+  font-size: 2em;
+}
+.ql-bubble .ql-editor h2 {
+  font-size: 1.5em;
+}
+.ql-bubble .ql-editor h3 {
+  font-size: 1.17em;
+}
+.ql-bubble .ql-editor h4 {
+  font-size: 1em;
+}
+.ql-bubble .ql-editor h5 {
+  font-size: 0.83em;
+}
+.ql-bubble .ql-editor h6 {
+  font-size: 0.67em;
+}
+.ql-bubble .ql-editor a {
+  text-decoration: underline;
+}
+.ql-bubble .ql-editor blockquote {
+  border-left: 4px solid #ccc;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 16px;
+}
+.ql-bubble .ql-editor code,
+.ql-bubble .ql-editor pre {
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+.ql-bubble .ql-editor pre {
+  white-space: pre-wrap;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+.ql-bubble .ql-editor code {
+  font-size: 85%;
+  padding: 2px 4px;
+}
+.ql-bubble .ql-editor pre.ql-syntax {
+  background-color: #23241f;
+  color: #f8f8f2;
+  overflow: visible;
+}
+.ql-bubble .ql-editor img {
+  max-width: 100%;
+}
+.ql-bubble .ql-picker {
+  color: #ccc;
+  display: inline-block;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+}
+.ql-bubble .ql-picker-label {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+  padding-right: 2px;
+  position: relative;
+  width: 100%;
+}
+.ql-bubble .ql-picker-label::before {
+  display: inline-block;
+  line-height: 22px;
+}
+.ql-bubble .ql-picker-options {
+  background-color: #444;
+  display: none;
+  min-width: 100%;
+  padding: 4px 8px;
+  position: absolute;
+  white-space: nowrap;
+}
+.ql-bubble .ql-picker-options .ql-picker-item {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label {
+  color: #777;
+  z-index: 2;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #777;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #777;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-options {
+  display: block;
+  margin-top: -1px;
+  top: 100%;
+  z-index: 1;
+}
+.ql-bubble .ql-color-picker,
+.ql-bubble .ql-icon-picker {
+  width: 28px;
+}
+.ql-bubble .ql-color-picker .ql-picker-label,
+.ql-bubble .ql-icon-picker .ql-picker-label {
+  padding: 2px 4px;
+}
+.ql-bubble .ql-color-picker .ql-picker-label svg,
+.ql-bubble .ql-icon-picker .ql-picker-label svg {
+  right: 4px;
+}
+.ql-bubble .ql-icon-picker .ql-picker-options {
+  padding: 4px 0px;
+}
+.ql-bubble .ql-icon-picker .ql-picker-item {
+  height: 24px;
+  width: 24px;
+  padding: 2px 4px;
+}
+.ql-bubble .ql-color-picker .ql-picker-options {
+  padding: 3px 5px;
+  width: 152px;
+}
+.ql-bubble .ql-color-picker .ql-picker-item {
+  border: 1px solid transparent;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  padding: 0px;
+  width: 16px;
+}
+.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+  position: absolute;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  width: 18px;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+  content: attr(data-label);
+}
+.ql-bubble .ql-picker.ql-header {
+  width: 98px;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: 'Heading 1';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: 'Heading 2';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: 'Heading 3';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: 'Heading 4';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: 'Heading 5';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: 'Heading 6';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  font-size: 2em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  font-size: 1.5em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  font-size: 1.17em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  font-size: 1em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  font-size: 0.83em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  font-size: 0.67em;
+}
+.ql-bubble .ql-picker.ql-font {
+  width: 108px;
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
+  content: 'Sans Serif';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  content: 'Serif';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  content: 'Monospace';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-bubble .ql-picker.ql-size {
+  width: 98px;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  content: 'Small';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  content: 'Large';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  content: 'Huge';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  font-size: 10px;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  font-size: 18px;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  font-size: 32px;
+}
+.ql-bubble .ql-color-picker.ql-background .ql-picker-item {
+  background-color: #fff;
+}
+.ql-bubble .ql-color-picker.ql-color .ql-picker-item {
+  background-color: #000;
+}
+.ql-bubble .ql-toolbar .ql-formats {
+  margin: 8px 12px 8px 0px;
+}
+.ql-bubble .ql-toolbar .ql-formats:first-child {
+  margin-left: 12px;
+}
+.ql-bubble .ql-color-picker svg {
+  margin: 1px;
+}
+.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
+.ql-bubble .ql-color-picker .ql-picker-item:hover {
+  border-color: #fff;
+}
+.ql-bubble .ql-tooltip {
+  background-color: #444;
+  border-radius: 25px;
+  color: #fff;
+}
+.ql-bubble .ql-tooltip-arrow {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  content: " ";
+  display: block;
+  left: 50%;
+  margin-left: -6px;
+  position: absolute;
+}
+.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
+  border-bottom: 6px solid #444;
+  top: -6px;
+}
+.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
+  border-top: 6px solid #444;
+  bottom: -6px;
+}
+.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
+  display: block;
+}
+.ql-bubble .ql-tooltip.ql-editing .ql-formats {
+  visibility: hidden;
+}
+.ql-bubble .ql-tooltip-editor {
+  display: none;
+}
+.ql-bubble .ql-tooltip-editor input[type=text] {
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 13px;
+  height: 100%;
+  outline: none;
+  padding: 10px 20px;
+  position: absolute;
+  width: 100%;
+}
+.ql-bubble .ql-tooltip-editor a {
+  top: 10px;
+  position: absolute;
+  right: 20px;
+}
+.ql-bubble .ql-tooltip-editor a:before {
+  color: #ccc;
+  content: "\D7";
+  font-size: 16px;
+  font-weight: bold;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a {
+  position: relative;
+  white-space: nowrap;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::before {
+  background-color: #444;
+  border-radius: 15px;
+  top: -5px;
+  font-size: 12px;
+  color: #fff;
+  content: attr(href);
+  font-weight: normal;
+  overflow: hidden;
+  padding: 5px 15px;
+  text-decoration: none;
+  z-index: 1;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::after {
+  border-top: 6px solid #444;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  top: 0;
+  content: " ";
+  height: 0;
+  width: 0;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::before,
+.ql-container.ql-bubble:not(.ql-disabled) a::after {
+  left: 0;
+  margin-left: 50%;
+  position: absolute;
+  transform: translate(-50%, -100%);
+  transition: visibility 0s ease 200ms;
+  visibility: hidden;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a:hover::before,
+.ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
+  visibility: visible;
+}
--- a/web/public/js/quill/quill.core.css
+++ b/web/public/js/quill/quill.core.css
@@ -0,0 +1,397 @@
+/*!
+ * Quill Editor v1.3.7
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0px;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+  padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 1.2em;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+  padding-left: 1.5em;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+  background-color: #000;
+}
+.ql-editor .ql-bg-red {
+  background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+  background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+  background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+  background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+  background-color: #93f;
+}
+.ql-editor .ql-color-white {
+  color: #fff;
+}
+.ql-editor .ql-color-red {
+  color: #e60000;
+}
+.ql-editor .ql-color-orange {
+  color: #f90;
+}
+.ql-editor .ql-color-yellow {
+  color: #ff0;
+}
+.ql-editor .ql-color-green {
+  color: #008a00;
+}
+.ql-editor .ql-color-blue {
+  color: #06c;
+}
+.ql-editor .ql-color-purple {
+  color: #93f;
+}
+.ql-editor .ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+  font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+  font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+  font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
+}
--- a/web/public/js/quill/quill.core.js
+++ b/web/public/js/quill/quill.core.js
--- a/web/public/js/quill/quill.js
+++ b/web/public/js/quill/quill.js
--- a/web/public/js/quill/quill.min.js
+++ b/web/public/js/quill/quill.min.js
--- a/web/public/js/quill/quill.min.js.map
+++ b/web/public/js/quill/quill.min.js.map
--- a/web/public/js/quill/quill.snow.css
+++ b/web/public/js/quill/quill.snow.css
@@ -0,0 +1,945 @@
+/*!
+ * Quill Editor v1.3.7
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0px;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor > * {
+  cursor: text;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+  padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+  pointer-events: all;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.ql-editor li::before {
+  display: inline-block;
+  white-space: nowrap;
+  width: 1.2em;
+}
+.ql-editor li:not(.ql-direction-rtl)::before {
+  margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
+}
+.ql-editor li.ql-direction-rtl::before {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
+  padding-left: 1.5em;
+}
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
+.ql-editor ol li {
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+  counter-increment: list-0;
+}
+.ql-editor ol li:before {
+  content: counter(list-0, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+  background-color: #000;
+}
+.ql-editor .ql-bg-red {
+  background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+  background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+  background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+  background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+  background-color: #93f;
+}
+.ql-editor .ql-color-white {
+  color: #fff;
+}
+.ql-editor .ql-color-red {
+  color: #e60000;
+}
+.ql-editor .ql-color-orange {
+  color: #f90;
+}
+.ql-editor .ql-color-yellow {
+  color: #ff0;
+}
+.ql-editor .ql-color-green {
+  color: #008a00;
+}
+.ql-editor .ql-color-blue {
+  color: #06c;
+}
+.ql-editor .ql-color-purple {
+  color: #93f;
+}
+.ql-editor .ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+  font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+  font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+  font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  left: 15px;
+  pointer-events: none;
+  position: absolute;
+  right: 15px;
+}
+.ql-snow.ql-toolbar:after,
+.ql-snow .ql-toolbar:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-snow.ql-toolbar button,
+.ql-snow .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 24px;
+  padding: 3px 5px;
+  width: 28px;
+}
+.ql-snow.ql-toolbar button svg,
+.ql-snow .ql-toolbar button svg {
+  float: left;
+  height: 100%;
+}
+.ql-snow.ql-toolbar button:active:hover,
+.ql-snow .ql-toolbar button:active:hover {
+  outline: none;
+}
+.ql-snow.ql-toolbar input.ql-image[type=file],
+.ql-snow .ql-toolbar input.ql-image[type=file] {
+  display: none;
+}
+.ql-snow.ql-toolbar button:hover,
+.ql-snow .ql-toolbar button:hover,
+.ql-snow.ql-toolbar button:focus,
+.ql-snow .ql-toolbar button:focus,
+.ql-snow.ql-toolbar button.ql-active,
+.ql-snow .ql-toolbar button.ql-active,
+.ql-snow.ql-toolbar .ql-picker-label:hover,
+.ql-snow .ql-toolbar .ql-picker-label:hover,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active,
+.ql-snow.ql-toolbar .ql-picker-item:hover,
+.ql-snow .ql-toolbar .ql-picker-item:hover,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+  color: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+  fill: #06c;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke,
+.ql-snow .ql-toolbar button:hover .ql-stroke,
+.ql-snow.ql-toolbar button:focus .ql-stroke,
+.ql-snow .ql-toolbar button:focus .ql-stroke,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
+.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: #06c;
+}
+@media (pointer: coarse) {
+  .ql-snow.ql-toolbar button:hover:not(.ql-active),
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
+    color: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #444;
+  }
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #444;
+  }
+}
+.ql-snow {
+  box-sizing: border-box;
+}
+.ql-snow * {
+  box-sizing: border-box;
+}
+.ql-snow .ql-hidden {
+  display: none;
+}
+.ql-snow .ql-out-bottom,
+.ql-snow .ql-out-top {
+  visibility: hidden;
+}
+.ql-snow .ql-tooltip {
+  position: absolute;
+  transform: translateY(10px);
+}
+.ql-snow .ql-tooltip a {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ql-snow .ql-tooltip.ql-flip {
+  transform: translateY(-10px);
+}
+.ql-snow .ql-formats {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ql-snow .ql-formats:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-snow .ql-stroke {
+  fill: none;
+  stroke: #444;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.ql-snow .ql-stroke-miter {
+  fill: none;
+  stroke: #444;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+.ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+  fill: #444;
+}
+.ql-snow .ql-empty {
+  fill: none;
+}
+.ql-snow .ql-even {
+  fill-rule: evenodd;
+}
+.ql-snow .ql-thin,
+.ql-snow .ql-stroke.ql-thin {
+  stroke-width: 1;
+}
+.ql-snow .ql-transparent {
+  opacity: 0.4;
+}
+.ql-snow .ql-direction svg:last-child {
+  display: none;
+}
+.ql-snow .ql-direction.ql-active svg:last-child {
+  display: inline;
+}
+.ql-snow .ql-direction.ql-active svg:first-child {
+  display: none;
+}
+.ql-snow .ql-editor h1 {
+  font-size: 2em;
+}
+.ql-snow .ql-editor h2 {
+  font-size: 1.5em;
+}
+.ql-snow .ql-editor h3 {
+  font-size: 1.17em;
+}
+.ql-snow .ql-editor h4 {
+  font-size: 1em;
+}
+.ql-snow .ql-editor h5 {
+  font-size: 0.83em;
+}
+.ql-snow .ql-editor h6 {
+  font-size: 0.67em;
+}
+.ql-snow .ql-editor a {
+  text-decoration: underline;
+}
+.ql-snow .ql-editor blockquote {
+  border-left: 4px solid #ccc;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 16px;
+}
+.ql-snow .ql-editor code,
+.ql-snow .ql-editor pre {
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+.ql-snow .ql-editor pre {
+  white-space: pre-wrap;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+.ql-snow .ql-editor code {
+  font-size: 85%;
+  padding: 2px 4px;
+}
+.ql-snow .ql-editor pre.ql-syntax {
+  background-color: #23241f;
+  color: #f8f8f2;
+  overflow: visible;
+}
+.ql-snow .ql-editor img {
+  max-width: 100%;
+}
+.ql-snow .ql-picker {
+  color: #444;
+  display: inline-block;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+}
+.ql-snow .ql-picker-label {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+  padding-right: 2px;
+  position: relative;
+  width: 100%;
+}
+.ql-snow .ql-picker-label::before {
+  display: inline-block;
+  line-height: 22px;
+}
+.ql-snow .ql-picker-options {
+  background-color: #fff;
+  display: none;
+  min-width: 100%;
+  padding: 4px 8px;
+  position: absolute;
+  white-space: nowrap;
+}
+.ql-snow .ql-picker-options .ql-picker-item {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  color: #ccc;
+  z-index: 2;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #ccc;
+}
+.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  display: block;
+  margin-top: -1px;
+  top: 100%;
+  z-index: 1;
+}
+.ql-snow .ql-color-picker,
+.ql-snow .ql-icon-picker {
+  width: 28px;
+}
+.ql-snow .ql-color-picker .ql-picker-label,
+.ql-snow .ql-icon-picker .ql-picker-label {
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-label svg,
+.ql-snow .ql-icon-picker .ql-picker-label svg {
+  right: 4px;
+}
+.ql-snow .ql-icon-picker .ql-picker-options {
+  padding: 4px 0px;
+}
+.ql-snow .ql-icon-picker .ql-picker-item {
+  height: 24px;
+  width: 24px;
+  padding: 2px 4px;
+}
+.ql-snow .ql-color-picker .ql-picker-options {
+  padding: 3px 5px;
+  width: 152px;
+}
+.ql-snow .ql-color-picker .ql-picker-item {
+  border: 1px solid transparent;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  padding: 0px;
+  width: 16px;
+}
+.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+  position: absolute;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  width: 18px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+  content: attr(data-label);
+}
+.ql-snow .ql-picker.ql-header {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: 'Heading 1';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: 'Heading 2';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: 'Heading 3';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: 'Heading 4';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: 'Heading 5';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: 'Heading 6';
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  font-size: 2em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  font-size: 1.5em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  font-size: 1.17em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  font-size: 1em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  font-size: 0.83em;
+}
+.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  font-size: 0.67em;
+}
+.ql-snow .ql-picker.ql-font {
+  width: 108px;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item::before {
+  content: 'Sans Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  content: 'Serif';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  content: 'Monospace';
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-snow .ql-picker.ql-size {
+  width: 98px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  content: 'Small';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  content: 'Large';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  content: 'Huge';
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  font-size: 10px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  font-size: 18px;
+}
+.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  font-size: 32px;
+}
+.ql-snow .ql-color-picker.ql-background .ql-picker-item {
+  background-color: #fff;
+}
+.ql-snow .ql-color-picker.ql-color .ql-picker-item {
+  background-color: #000;
+}
+.ql-toolbar.ql-snow {
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  padding: 8px;
+}
+.ql-toolbar.ql-snow .ql-formats {
+  margin-right: 15px;
+}
+.ql-toolbar.ql-snow .ql-picker-label {
+  border: 1px solid transparent;
+}
+.ql-toolbar.ql-snow .ql-picker-options {
+  border: 1px solid transparent;
+  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
+  border-color: #ccc;
+}
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
+.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
+  border-color: #000;
+}
+.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  border-top: 0px;
+}
+.ql-snow .ql-tooltip {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0px 0px 5px #ddd;
+  color: #444;
+  padding: 5px 12px;
+  white-space: nowrap;
+}
+.ql-snow .ql-tooltip::before {
+  content: "Visit URL:";
+  line-height: 26px;
+  margin-right: 8px;
+}
+.ql-snow .ql-tooltip input[type=text] {
+  display: none;
+  border: 1px solid #ccc;
+  font-size: 13px;
+  height: 26px;
+  margin: 0px;
+  padding: 3px 5px;
+  width: 170px;
+}
+.ql-snow .ql-tooltip a.ql-preview {
+  display: inline-block;
+  max-width: 200px;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  vertical-align: top;
+}
+.ql-snow .ql-tooltip a.ql-action::after {
+  border-right: 1px solid #ccc;
+  content: 'Edit';
+  margin-left: 16px;
+  padding-right: 8px;
+}
+.ql-snow .ql-tooltip a.ql-remove::before {
+  content: 'Remove';
+  margin-left: 8px;
+}
+.ql-snow .ql-tooltip a {
+  line-height: 26px;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-preview,
+.ql-snow .ql-tooltip.ql-editing a.ql-remove {
+  display: none;
+}
+.ql-snow .ql-tooltip.ql-editing input[type=text] {
+  display: inline-block;
+}
+.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
+  border-right: 0px;
+  content: 'Save';
+  padding-right: 0px;
+}
+.ql-snow .ql-tooltip[data-mode=link]::before {
+  content: "Enter link:";
+}
+.ql-snow .ql-tooltip[data-mode=formula]::before {
+  content: "Enter formula:";
+}
+.ql-snow .ql-tooltip[data-mode=video]::before {
+  content: "Enter video:";
+}
+.ql-snow a {
+  color: #06c;
+}
+.ql-container.ql-snow {
+  border: 1px solid #ccc;
+}
--- a/web/public/js/utils.js
+++ b/web/public/js/utils.js
@@ -1097,10 +1097,13 @@ window.teaweb = {
 		return -1
 	},
 	convertSizeCapacityToString: function (c) {
-		if (c == null || c.count == null || c.unit == null) {
+		if (c == null || c.count == null || c.unit == null || c.unit.length == 0) {
 			return ""
 		}
-		return c.count + c.unit.toString().toUpperCase()
+		if (c.unit == "byte") {
+			return c.count + "B"
+		}
+		return c.count + c.unit[0].toUpperCase() + "i" + c.unit.substring(1).toUpperCase()
 	}
 }

--- a/web/public/js/utils.min.js
+++ b/web/public/js/utils.min.js
--- a/web/views/@default/clusters/cluster/nodes.html
+++ b/web/views/@default/clusters/cluster/nodes.html
@@ -70,7 +70,7 @@
        <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth4">连接数<sort-arrow name="connectionsOrder"></sort-arrow></th>
        <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">负载<sort-arrow name="loadOrder"></sort-arrow></th>
 		<th class="width6 center">状态</th>
-		<th class="two op">操作</th>
+		<th class="three op">操作</th>
 	</tr>
 	</thead>
 	<tr v-for="(node, nodeIndex) in nodes">
@@ -172,7 +172,7 @@
 			</div>
 		</td>
 		<td>
-			<a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">详情</a> &nbsp; <a href="" @click.prevent="deleteNode(node.id)">删除</a>
+			<a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">详情</a> &nbsp; <a href="" @click.prevent="updateNodeOn(node.id, !node.isOn)"><span v-if="node.isOn">停用</span><span v-else class="red">启用</span></a> &nbsp; <a href="" @click.prevent="deleteNode(node.id)">删除</a>
 		</td>
 	</tr>
 </table>
--- a/web/views/@default/clusters/cluster/nodes.js
+++ b/web/views/@default/clusters/cluster/nodes.js
@@ -49,6 +49,26 @@ Tea.context(function () {
 		})
 	}

+	this.updateNodeOn = function (nodeId, isOn) {
+		let that = this
+		let op
+		if (isOn) {
+			op = "启用"
+		} else {
+			op = "停用"
+		}
+		teaweb.confirm("确定要" + op + "此节点吗？", function () {
+			that.$post(".node.updateIsOn")
+				.params({
+					nodeId: nodeId,
+					isOn: isOn
+				})
+				.success(function () {
+					teaweb.successRefresh(op + "成功")
+				})
+		})
+	}
+
 	/**
 	 * 显示和隐藏IP
 	 */
--- a/web/views/@default/servers/components/cache/createPopup.html
+++ b/web/views/@default/servers/components/cache/createPopup.html
@@ -74,7 +74,7 @@
                <td class="color-border">缓存文件句柄缓存</td>
                <td>
                    <input type="text" name="fileOpenFileCacheMax" maxlength="6" value="0" style="width: 10em"/>
-                    <p class="comment"><pro-warning-label></pro-warning-label>保持在内存中的缓存文件句柄的数量，提升缓存文件打开速度，建议数量不超过缓存文件数量的十分之一。</p>
+                    <p class="comment"><pro-warning-label></pro-warning-label>保持在内存中的缓存文件句柄的数量，提升缓存文件打开速度，同时也会占用系统更多的内存，建议数量不超过缓存文件数量的百分之一；0表示不启用。</p>
                </td>
            </tr>
            <tr v-show="teaIsPlus">
--- a/web/views/@default/servers/components/cache/update.html
+++ b/web/views/@default/servers/components/cache/update.html
@@ -81,7 +81,7 @@
                    <td class="color-border">缓存文件句柄缓存</td>
                    <td>
                        <input type="text" name="fileOpenFileCacheMax" v-model="fileOpenFileCacheMax" maxlength="6" value="0" style="width: 10em"/>
-                        <p class="comment"><pro-warning-label></pro-warning-label>保持在内存中的缓存文件句柄的数量，提升缓存文件打开速度，建议数量不超过缓存文件数量的十分之一。</p>
+                        <p class="comment"><pro-warning-label></pro-warning-label>保持在内存中的缓存文件句柄的数量，提升缓存文件打开速度，同时也会占用系统更多的内存，建议数量不超过缓存文件数量的百分之一；0表示不启用。</p>
                    </td>
                </tr>
                <tr v-show="teaIsPlus">
--- a/web/views/@default/servers/components/waf/createRulePopup.html
+++ b/web/views/@default/servers/components/waf/createRulePopup.html
@@ -83,7 +83,7 @@
        <tr>
            <td>操作符 *</td>
            <td>
-                <select class="ui dropdown" name="operator" style="width:10em" v-model="rule.operator" @change="changeOperator()">
+                <select class="ui dropdown auto-width" name="operator" v-model="rule.operator" @change="changeOperator()">
                    <option v-for="op in operators" :value="op.code">{{op.name}}</option>
                </select>
                <p class="comment" v-if="operator != null" v-html="operator.description"></p>
--- a/web/views/@default/servers/components/waf/createSetPopup.html
+++ b/web/views/@default/servers/components/waf/createSetPopup.html
@@ -2,6 +2,8 @@

 <h3>添加规则集</h3>

+<p class="ui message" v-if="isGlobalPolicy">当前设置的规则集为WAF策略的规则集，将会应用于对应集群已经启用WAF的网站；如果你只是想设置某个网站相关的规则集，请到对应网站WAF功能中设置。</p>
+
 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
 	<input type="hidden" name="groupId" :value="groupId"/>
 	<table class="ui table definition selectable">
--- a/web/views/@default/servers/components/waf/policy.html
+++ b/web/views/@default/servers/components/waf/policy.html
@@ -26,12 +26,22 @@
           </div>
        </td>
    </tr>
+</table>
+
+<h4>动作配置</h4>
+<table class="ui table definition selectable">
    <tr>
-        <td>阻止动作设置</td>
+        <td class="title">阻止动作设置</td>
        <td>
           <http-firewall-block-options-viewer :v-block-options="firewallPolicy.blockOptions"></http-firewall-block-options-viewer>
        </td>
    </tr>
+    <tr>
+        <td class="title">显示页面动作设置</td>
+        <td>
+            <http-firewall-page-options-viewer :v-page-options="firewallPolicy.pageOptions"></http-firewall-page-options-viewer>
+        </td>
+    </tr>
    <tr>
        <td>人机识别动作配置</td>
        <td>
@@ -46,15 +56,12 @@
            <p class="comment" v-if="firewallPolicy.useLocalFirewall">可以在合适的时候自动使用系统自带防火墙进行防御。</p>
        </td>
    </tr>
+</table>
+
+<h4>日志配置</h4>
+<table class="ui table definition selectable">
    <tr>
-        <td>SYN Flood防御</td>
-        <td>
-            <span v-if="firewallPolicy.synFlood == null || !firewallPolicy.synFlood.isOn" class="disabled">未启用</span>
-            <firewall-syn-flood-config-viewer v-else :v-syn-flood-config="firewallPolicy.synFlood"></firewall-syn-flood-config-viewer>
-        </td>
-    </tr>
-    <tr>
-        <td :class="{'color-border':firewallPolicy.log !=null && firewallPolicy.log.isOn}">记录访问日志</td>
+        <td class="title" :class="{'color-border':firewallPolicy.log !=null && firewallPolicy.log.isOn}">记录访问日志</td>
        <td>
            <span v-if="firewallPolicy.log == null || !firewallPolicy.log.isOn">默认</span>
            <span v-else class="green">开启</span>
@@ -74,15 +81,12 @@
            <span v-else>不记录</span>
        </td>
    </tr>
+</table>
+
+<h4>区域封禁设置</h4>
+<table class="ui table definition selectable">
    <tr>
-        <td>最多检查内容尺寸</td>
-        <td>
-            <span v-if="firewallPolicy.maxRequestBodySize == 0" class="disabled">使用默认</span>
-            <span v-else>{{firewallPolicy.maxRequestBodySizeFormat}}</span>
-        </td>
-    </tr>
-    <tr>
-        <td>区域封禁默认提示内容</td>
+        <td class="title">区域封禁默认提示内容</td>
        <td>
            <span v-if="firewallPolicy.denyCountryHTML != null && firewallPolicy.denyCountryHTML.length > 0">自定义</span>
            <span v-else class="disabled">使用默认</span>
@@ -95,6 +99,24 @@
            <span v-else class="disabled">使用默认</span>
        </td>
    </tr>
+</table>
+
+<h4>其他配置</h4>
+<table class="ui table definition selectable">
+    <tr>
+        <td class="title">SYN Flood防御</td>
+        <td>
+            <span v-if="firewallPolicy.synFlood == null || !firewallPolicy.synFlood.isOn" class="disabled">未启用</span>
+            <firewall-syn-flood-config-viewer v-else :v-syn-flood-config="firewallPolicy.synFlood"></firewall-syn-flood-config-viewer>
+        </td>
+    </tr>
+    <tr>
+        <td>最多检查内容尺寸</td>
+        <td>
+            <span v-if="firewallPolicy.maxRequestBodySize == 0" class="disabled">使用默认</span>
+            <span v-else>{{firewallPolicy.maxRequestBodySizeFormat}}</span>
+        </td>
+    </tr>
    <tr>
        <td>描述</td>
        <td>
--- a/web/views/@default/servers/components/waf/update.html
+++ b/web/views/@default/servers/components/waf/update.html
@@ -31,27 +31,84 @@
                <p class="comment">可以启用一些我们预置的规则组。</p>
            </td>
        </tr>
-        <tr>
-            <td colspan="2"><more-options-indicator></more-options-indicator></td>
-        </tr>
-        <tbody v-show="moreOptionsVisible">
+    </table>
+
+    <h4>动作配置</h4>
+    <table class="ui table definition selectable">
+        <tbody>
            <tr>
-                <td>阻止动作配置</td>
+                <td class="title">阻止动作配置</td>
                <td>
                    <http-firewall-block-options :v-block-options="firewallPolicy.blockOptions"></http-firewall-block-options>
                </td>
            </tr>
+            <tr>
+                <td>显示页面动作配置</td>
+                <td>
+                    <http-firewall-page-options :v-page-options="firewallPolicy.pageOptions"></http-firewall-page-options>
+                </td>
+            </tr>
            <tr>
                <td>人机识别动作配置</td>
                <td>
                    <http-firewall-captcha-options :v-captcha-options="firewallPolicy.captchaOptions"></http-firewall-captcha-options>
                </td>
            </tr>
+        </tbody>
+    </table>
+
+    <h4>日志配置</h4>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title" :class="{'color-border':firewallPolicy.log.isOn}">记录访问日志</td>
+            <td>
+                <input type="hidden" name="logJSON" :value="JSON.stringify(firewallPolicy.log)"/>
+                <checkbox name="" v-model="firewallPolicy.log.isOn"></checkbox>
+                <p class="comment">选中后，总是记录WAF相关访问日志，即使服务中没有开启访问日志。</p>
+            </td>
+        </tr>
+        <tr v-show="firewallPolicy.log.isOn">
+            <td class="color-border">记录请求Body</td>
+            <td>
+                <checkbox v-model="firewallPolicy.log.requestBody"></checkbox>
+                <p class="comment">选中后，表示在访问日志中记录匹配的请求内容。注意：此选项会明显增加访问日志占用空间，请谨慎开启。</p>
+            </td>
+        </tr>
+        <tr v-show="firewallPolicy.log.isOn">
+            <td class="color-border">记录区域封禁日志</td>
+            <td>
+                <checkbox v-model="firewallPolicy.log.regionDenying"></checkbox>
+                <p class="comment">选中后，表示在访问日志中记录区域封禁（地区和省份）事件。</p>
+            </td>
+        </tr>
+    </table>
+
+    <h4>区域封禁设置</h4>
+    <table class="ui table definition selectable">
+        <tr>
+            <td class="title">区域封禁默认提示内容</td>
+            <td>
+                <textarea v-model="firewallPolicy.denyCountryHTML" name="denyCountryHTML" rows="3"></textarea>
+                <p class="comment">当客户端所在区域被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
+            </td>
+        </tr>
+        <tr>
+            <td>省份封禁默认提示内容</td>
+            <td>
+                <textarea v-model="firewallPolicy.denyProvinceHTML" name="denyProvinceHTML" rows="3"></textarea>
+                <p class="comment">当客户端所在省份被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
+            </td>
+        </tr>
+    </table>
+
+    <h4>其他配置</h4>
+    <table class="ui table definition selectable">
+        <tbody>
            <tr>
-                <td>使用系统防火墙</td>
+                <td class="title">使用系统防火墙</td>
                <td>
                    <checkbox name="useLocalFirewall" v-model="firewallPolicy.useLocalFirewall"></checkbox>
-                    <p class="comment">开启后，可以在合适的时候自动使用系统自带防火墙进行防御。</p>
+                    <p class="comment">开启后，可以在合适的时候自动使用系统自带防火墙进行防御；建议在每个边缘节点都安装nftables以提升封禁性能。</p>
                </td>
            </tr>
            <tr>
@@ -60,28 +117,6 @@
                    <firewall-syn-flood-config-box :v-syn-flood-config="firewallPolicy.synFloodConfig"></firewall-syn-flood-config-box>
                </td>
            </tr>
-            <tr>
-                <td :class="{'color-border':firewallPolicy.log.isOn}">记录访问日志</td>
-                <td>
-                    <input type="hidden" name="logJSON" :value="JSON.stringify(firewallPolicy.log)"/>
-                    <checkbox name="" v-model="firewallPolicy.log.isOn"></checkbox>
-                    <p class="comment">选中后，总是记录WAF相关访问日志，即使服务中没有开启访问日志。</p>
-                </td>
-            </tr>
-            <tr v-show="firewallPolicy.log.isOn">
-                <td class="color-border">记录请求Body</td>
-                <td>
-                    <checkbox v-model="firewallPolicy.log.requestBody"></checkbox>
-                    <p class="comment">选中后，表示在访问日志中记录匹配的请求内容。注意：此选项会明显增加访问日志占用空间，请谨慎开启。</p>
-                </td>
-            </tr>
-            <tr v-show="firewallPolicy.log.isOn">
-                <td class="color-border">记录区域封禁日志</td>
-                <td>
-                    <checkbox v-model="firewallPolicy.log.regionDenying"></checkbox>
-                    <p class="comment">选中后，表示在访问日志中记录区域封禁（地区和省份）事件。</p>
-                </td>
-            </tr>
            <tr>
                <td>最多检查内容尺寸</td>
                <td>
@@ -93,20 +128,6 @@
                    <p class="comment"><span v-if="maxRequestBodySize > 0">当前：{{maxRequestBodySizeFormat}}。</span>WAF能够分析的最大文件内容尺寸，0表示默认，默认为512K；此值越大，对应使用的系统内存越多，除非特殊情况，否则请谨慎修改。</p>
                </td>
            </tr>
-            <tr>
-                <td>区域封禁默认提示内容</td>
-                <td>
-                    <textarea v-model="firewallPolicy.denyCountryHTML" name="denyCountryHTML" rows="3"></textarea>
-                    <p class="comment">当客户端所在区域被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
-                </td>
-            </tr>
-            <tr>
-                <td>省份封禁默认提示内容</td>
-                <td>
-                    <textarea v-model="firewallPolicy.denyProvinceHTML" name="denyProvinceHTML" rows="3"></textarea>
-                    <p class="comment">当客户端所在省份被封禁时提示页面的HTML内容；不填则表示使用默认的提示内容；支持请求变量。</p>
-                </td>
-            </tr>
            <tr>
                <td>描述</td>
                <td>
@@ -124,5 +145,6 @@
            </tr>
        </tbody>
    </table>
+
    <submit-btn></submit-btn>
 </form>
--- a/web/views/@default/servers/index.css
+++ b/web/views/@default/servers/index.css
@@ -13,6 +13,12 @@
 .node-logs-box::-webkit-scrollbar {
  width: 4px;
 }
+.server-checkbox-td .checkbox {
+  opacity: 50%;
+}
+.server-checkbox-td .checkbox:hover {
+  opacity: 100%;
+}
 .server-name-td {
  position: relative;
 }
--- a/web/views/@default/servers/index.css.map
+++ b/web/views/@default/servers/index.css.map
@@ -1 +1 @@
-{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,UAAA;;AAJF,GAAG,QAOF;EACC,kBAAA;;AAIF;EACC,gBAAA;EACA,gBAAA;;AAGD,cAAc;EACb,UAAA;;AAGD;EACC,kBAAA;;AADD,eAGC,MAAK;EACJ,aAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,gBAAA;;AAIF,eAAe,MACd,MAAK;EACJ,eAAA;;AAIF,eACC;EACC,gBAAA;;AAFF,eACC,IAGC;EACC,gBAAA;;AAKH,MACC,GAAE;EACD,UAAA","file":"index.css"}
+{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,GAAG,QACF,MAAK;EACJ,kBAAA;EACA,UAAA;EACA,UAAA;;AAJF,GAAG,QAOF;EACC,kBAAA;;AAIF;EACC,gBAAA;EACA,gBAAA;;AAGD,cAAc;EACb,UAAA;;AAGD,mBACC;EACC,YAAA;;AAFF,mBAKC,UAAS;EACR,aAAA;;AAIF;EACC,kBAAA;;AADD,eAGC,MAAK;EACJ,aAAA;EACA,kBAAA;EACA,UAAA;EACA,QAAA;EACA,gBAAA;;AAIF,eAAe,MACd,MAAK;EACJ,eAAA;;AAIF,eACC;EACC,gBAAA;;AAFF,eACC,IAGC;EACC,gBAAA;;AAKH,MACC,GAAE;EACD,UAAA","file":"index.css"}
--- a/web/views/@default/servers/index.html
+++ b/web/views/@default/servers/index.html
@@ -39,12 +39,12 @@
        </div>
    </div>
    <div class="ui fields inline" style="margin-top: 1em">
-        <div class="ui field">
-            <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">检查域名解析</checkbox>
-        </div>
        <div class="ui field" v-if="clusterId == 0 && groupId == 0 && keyword.length == 0 && latestServers.length > 0">
            <a href="" @click.prevent="showLatest()">常用<i class="icon angle" :class="{down: !latestVisible, up: latestVisible}"></i> </a>
        </div>
+        <div class="ui field" style="position: absolute; right: 1em">
+            <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">检查域名解析</checkbox>
+        </div>
    </div>
 </form>

@@ -53,11 +53,18 @@
    常用网站：<span v-for="(server, index) in latestServers"><a :href="'/servers/server?serverId=' + server.id">{{server.name}}</a> &nbsp; <span class="disabled" v-if="index != latestServers.length - 1">|</span> &nbsp;</span>
 </div>

-<p class="ui message" v-if="servers.length == 0">暂时还没有网站。</p>
+<p class="ui message" v-if="servers.length == 0">暂时还没有网站，现在去 <a href="/servers/create">[创建网站<i class="ui icon long arrow alternate right"></i> ]</a></p>
+
+<div v-if="checkedServerIds.length > 0">
+    <div class="ui divider"></div>
+    <button class="ui button basic" @click.prevent="resetCheckedServers">取消所选</button> &nbsp; &nbsp;
+    <button class="ui button basic" @click.prevent="deleteServers">删除所选{{checkedServerIds.length}}网站</button>
+</div>

 <table class="ui table selectable celled" v-if="servers.length > 0">
 	<thead>
 		<tr>
+            <th style="width: 1em" class="server-checkbox-td"><checkbox ref="allCheckedCheckboxes" @input="changeAllChecked"></checkbox></th>
 			<th>网站名称</th>
 			<th>所属用户</th>
 			<th>部署集群</th>
@@ -71,6 +78,7 @@
 		</tr>
 	</thead>
 	<tr v-for="server in servers">
+        <td class="server-checkbox-td"><checkbox ref="serverCheckboxes" :v-value="server.id" @input="changeServerChecked"></checkbox></td>
        <td class="server-name-td"><a :href="'/servers/server?serverId=' + server.id"><keyword :v-word="keyword">{{server.name}}</keyword></a>  &nbsp; <a :href="'/servers/server/settings?serverId=' + server.id" title="设置"><i class="icon setting grey"></i></a>
 			<div style="margin-top:0.4em">
 				<grey-label>{{server.serverTypeName}}</grey-label>
--- a/web/views/@default/servers/index.js
+++ b/web/views/@default/servers/index.js
@@ -55,4 +55,54 @@ Tea.context(function () {
 	this.showLatest = function () {
 		this.latestVisible = !this.latestVisible
 	}
+
+	/**
+	 * 全选
+	 */
+	this.checkedServerIds = []
+	this.changeAllChecked = function (checked) {
+		for (let checkbox of this.$refs.serverCheckboxes) {
+			if (checked) {
+				checkbox.check()
+			} else {
+				checkbox.uncheck()
+			}
+		}
+		this.updateCheckedServers()
+	}
+
+	this.changeServerChecked = function () {
+		this.updateCheckedServers()
+	}
+
+	this.updateCheckedServers = function () {
+		let serverIds = []
+		for (let checkbox of this.$refs.serverCheckboxes) {
+			if (checkbox.isChecked()) {
+				serverIds.push(checkbox.vValue)
+			}
+		}
+		this.checkedServerIds = serverIds
+	}
+
+	this.resetCheckedServers = function () {
+		this.$refs.allCheckedCheckboxes.uncheck()
+		for (let checkbox of this.$refs.serverCheckboxes) {
+			checkbox.uncheck()
+		}
+		this.updateCheckedServers()
+	}
+
+	this.deleteServers = function () {
+		let that = this
+		teaweb.confirm("确定要删除所选的" + (this.checkedServerIds.length) + "个网站吗？", function () {
+			that.$post(".deleteServers")
+				.params({
+					serverIds: this.checkedServerIds
+				})
+				.success(function () {
+					teaweb.reload()
+				})
+		})
+	}
 })
--- a/web/views/@default/servers/index.less
+++ b/web/views/@default/servers/index.less
@@ -19,6 +19,16 @@
 	width: 4px;
 }

+.server-checkbox-td {
+	.checkbox {
+		opacity: 50%;
+	}
+
+	.checkbox:hover {
+		opacity: 100%;
+	}
+}
+
 .server-name-td {
 	position: relative;

--- a/web/views/@default/servers/server/settings/pages/createPopup.html
+++ b/web/views/@default/servers/server/settings/pages/createPopup.html
@@ -38,7 +38,7 @@
            <td>跳转到URL *</td>
            <td>
                <input type="text" name="url" maxlength="500" placeholder="类似于 https://example.com/page.html"/>
-                <p class="comment">将会跳转到此URL。</p>
+                <p class="comment">将会跳转到此URL，支持使用变量。</p>
            </td>
        </tr>
        <tr>
--- a/web/views/@default/servers/server/settings/pages/updatePopup.html
+++ b/web/views/@default/servers/server/settings/pages/updatePopup.html
@@ -38,7 +38,7 @@
            <td>跳转到URL *</td>
            <td>
                <input type="text" name="url" maxlength="500" placeholder="类似于 https://example.com/page.html" v-model="pageConfig.url"/>
-                <p class="comment">将会跳转到此URL。</p>
+                <p class="comment">将会跳转到此URL，支持使用变量。</p>
            </td>
        </tr>
        <tr>
--- a/web/views/@default/settings/api/node/update.html
+++ b/web/views/@default/settings/api/node/update.html
@@ -2,7 +2,7 @@

 {$template "menu"}

-<div class="ui warning message"><i class="icon warning circle"></i>如果你修改了GRPC访问地址（包含端口），可能需要手工修改其他节点的配置信息。</div>
+<div class="ui warning message"><i class="icon warning circle"></i>如果你修改了GRPC访问地址、端口、证书相关信息时，需要重启<code-label>edge-api</code-label>进程（<code-label>edge-node restart</code-label>）才能生效，并可能需要手工修改其他节点的配置信息。</div>

 <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
 	<input type="hidden" name="nodeId" :value="node.id"/>
Author	SHA1	Message	Date
刘祥超	7e5802dcd1	优化没有网站时的提示	2024-01-21 21:17:42 +08:00
刘祥超	2b6d1c70a8	集群节点列表页增加停用/启用操作	2024-01-21 17:42:56 +08:00
刘祥超	faaef3b353	Dockerfile版本号修改为1.3.3	2024-01-21 16:58:01 +08:00
刘祥超	6ffa1d4a1d	版本号修改为1.3.3	2024-01-21 16:55:55 +08:00
刘祥超	10f0e0dcca	提交components.js	2024-01-21 16:55:31 +08:00
刘祥超	0afad2e192	增加创建本地节点命令	2024-01-21 16:55:22 +08:00
刘祥超	6a1e7266b9	优化缓存文件句柄缓存的文字提示	2024-01-21 14:31:05 +08:00
刘祥超	6ffc552bd8	WAF允许ALLOW动作增加有效范围	2024-01-20 21:23:59 +08:00
刘祥超	8d8245971a	WAF策略增加显示页面动作默认设置	2024-01-20 16:17:28 +08:00
刘祥超	a2f730d57e	修复部分内置页面没有<head>标签的问题	2024-01-20 10:15:05 +08:00
刘祥超	bf282c41fd	优化创建策略规则集提示	2024-01-19 11:24:02 +08:00
刘祥超	3e3f7b2cc6	WAF动作默认设置为“显示网页（page）”，减少因错误规则导致的IP封禁	2024-01-19 11:13:01 +08:00
刘祥超	0580e063be	优化网站列表批量操作按钮，防止误操作	2024-01-19 10:56:31 +08:00
刘祥超	2924aad25e	修改版本号为1.3.2.2	2024-01-16 20:59:07 +08:00
刘祥超	39907299cd	提交components.js	2024-01-16 20:58:58 +08:00
刘祥超	77705895d5	优化添加规则界面	2024-01-16 20:42:06 +08:00
刘祥超	3fb85edf0b	提交components.js	2024-01-15 08:51:21 +08:00
刘祥超	0e7a968cac	版本号修改为1.3.2.1	2024-01-15 08:40:14 +08:00
刘祥超	195a9dc771	优化网站设置和路由设置中的左侧菜单	2024-01-14 20:33:07 +08:00
刘祥超	ca227a846a	优化代码	2024-01-13 19:31:52 +08:00
刘祥超	e1057fc76e	字符编码设置增加“强制替换”选项	2024-01-13 16:28:37 +08:00
刘祥超	b5168c3174	优化文字	2024-01-13 15:46:26 +08:00
刘祥超	4ced00de50	修改API节点时提示用户需要重启edge-api进程	2024-01-12 16:44:02 +08:00
刘祥超	750c929506	实现批量删除网站功能	2024-01-11 18:40:29 +08:00
刘祥超	8b46a5a5af	自定义页面跳转支持使用变量	2024-01-11 15:37:31 +08:00
刘祥超	10d606a101	增加带宽相关组件	2024-01-11 15:17:52 +08:00
刘祥超	45d36dadcb	修复“迁移”功能中无法远程修改API节点访问地址的问题	2024-01-09 10:39:09 +08:00
刘祥超	61484d5cb8	增加用户系统文章相关管理	2024-01-09 10:21:05 +08:00
刘祥超	b7775a99ef	优化添加缓存条件和不缓存条件交互	2023-12-28 15:50:19 +08:00
刘祥超	c45ba38ffa	修复参数匹配不区分大小写选项无法保存的问题	2023-12-28 15:31:40 +08:00
刘祥超	e97d9fb8a0	优化可执行文件程序	2023-12-26 09:09:21 +08:00