Initial commit (code only without large binaries)

EdgeAdmin/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>`
+})

EdgeAdmin/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>`
+})

EdgeAdmin/web/public/js/components/common/bits-var.js

@@ -0,0 +1,16 @@
+Vue.component("bits-var", {
+	props: ["v-bits"],
+	data: function () {
+		let bits = this.vBits
+		if (typeof bits != "number") {
+			bits = 0
+		}
+		let format = teaweb.splitFormat(teaweb.formatBits(bits))
+		return {
+			format: format
+		}
+	},
+	template:`<var class="normal">
+	<span>{{format[0]}}</span>{{format[1]}}
+</var>`
+})

EdgeAdmin/web/public/js/components/common/bytes-var.js

@@ -0,0 +1,16 @@
+Vue.component("bytes-var", {
+	props: ["v-bytes"],
+	data: function () {
+		let bytes = this.vBytes
+		if (typeof bytes != "number") {
+			bytes = 0
+		}
+		let format = teaweb.splitFormat(teaweb.formatBytes(bytes))
+		return {
+			format: format
+		}
+	},
+	template:`<var class="normal">
+	<span>{{format[0]}}</span>{{format[1]}}
+</var>`
+})

EdgeAdmin/web/public/js/components/common/chart-columns-grid.js

@@ -0,0 +1,80 @@
+Vue.component("chart-columns-grid", {
+	props: [],
+	mounted: function () {
+		this.columns = this.calculateColumns()
+
+		let that = this
+		window.addEventListener("resize", function () {
+			that.columns = that.calculateColumns()
+		})
+	},
+	updated: function () {
+		let totalElements = this.$el.getElementsByClassName("column").length
+		if (totalElements == this.totalElements) {
+			return
+		}
+		this.totalElements = totalElements
+		this.calculateColumns()
+	},
+	data: function () {
+		return {
+			columns: "four",
+			totalElements: 0
+		}
+	},
+	methods: {
+		calculateColumns: function () {
+			let w = window.innerWidth
+			let columns = Math.floor(w / 500)
+			if (columns == 0) {
+				columns = 1
+			}
+
+			let columnElements = this.$el.getElementsByClassName("column")
+			if (columnElements.length == 0) {
+				return "one"
+			}
+			let maxColumns = columnElements.length
+			if (columns > maxColumns) {
+				columns = maxColumns
+			}
+
+			// 添加右侧边框
+			for (let index = 0; index < columnElements.length; index++) {
+				let el = columnElements[index]
+				el.className = el.className.replace("with-border", "")
+				if (index % columns == columns - 1 || index == columnElements.length - 1 /** 最后一个 **/) {
+					el.className += " with-border"
+				}
+			}
+
+			switch (columns) {
+				case 1:
+					return "one"
+				case 2:
+					return "two"
+				case 3:
+					return "three"
+				case 4:
+					return "four"
+				case 5:
+					return "five"
+				case 6:
+					return "six"
+				case 7:
+					return "seven"
+				case 8:
+					return "eight"
+				case 9:
+					return "nine"
+				case 10:
+					return "ten"
+				default:
+					return "ten"
+			}
+		}
+	},
+	template: `<div :class="'ui ' + columns + ' columns grid chart-grid'">
+	<slot></slot>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/checkbox.js

@@ -0,0 +1,52 @@
+let checkboxId = 0
+Vue.component("checkbox", {
+	props: ["name", "value", "v-value", "id", "checked"],
+	data: function () {
+		checkboxId++
+		let elementId = this.id
+		if (elementId == null) {
+			elementId = "checkbox" + checkboxId
+		}
+
+		let elementValue = this.vValue
+		if (elementValue == null) {
+			elementValue = "1"
+		}
+
+		let checkedValue = this.value
+		if (checkedValue == null && this.checked == "checked") {
+			checkedValue = elementValue
+		}
+
+		return {
+			elementId: elementId,
+			elementValue: elementValue,
+			newValue: checkedValue
+		}
+	},
+	methods: {
+		change: function () {
+			this.$emit("input", this.newValue)
+		},
+		check: function () {
+			this.newValue = this.elementValue
+		},
+		uncheck: function () {
+			this.newValue = ""
+		},
+		isChecked: function () {
+			return (typeof (this.newValue) == "boolean" && this.newValue) || this.newValue == this.elementValue
+		}
+	},
+	watch: {
+		value: function (v) {
+			if (typeof v == "boolean") {
+				this.newValue = v
+			}
+		}
+	},
+	template: `<div class="ui checkbox">
+	<input type="checkbox" :name="name" :value="elementValue" :id="elementId" @change="change" v-model="newValue"/>
+	<label :for="elementId"><slot></slot></label>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/columns-grid.js

@@ -0,0 +1,71 @@
+Vue.component("columns-grid", {
+	props: [],
+	mounted: function () {
+		this.columns = this.calculateColumns()
+
+		let that = this
+		window.addEventListener("resize", function () {
+			that.columns = that.calculateColumns()
+		})
+	},
+	data: function () {
+		return {
+			columns: "four"
+		}
+	},
+	methods: {
+		calculateColumns: function () {
+			let w = window.innerWidth
+			let columns = Math.floor(w / 250)
+			if (columns == 0) {
+				columns = 1
+			}
+
+			let columnElements = this.$el.getElementsByClassName("column")
+			if (columnElements.length == 0) {
+				return
+			}
+			let maxColumns = columnElements.length
+			if (columns > maxColumns) {
+				columns = maxColumns
+			}
+
+			// 添加右侧边框
+			for (let index = 0; index < columnElements.length; index++) {
+				let el = columnElements[index]
+				el.className = el.className.replace("with-border", "")
+				if (index % columns == columns - 1 || index == columnElements.length - 1 /** 最后一个 **/) {
+					el.className += " with-border"
+				}
+			}
+
+			switch (columns) {
+				case 1:
+					return "one"
+				case 2:
+					return "two"
+				case 3:
+					return "three"
+				case 4:
+					return "four"
+				case 5:
+					return "five"
+				case 6:
+					return "six"
+				case 7:
+					return "seven"
+				case 8:
+					return "eight"
+				case 9:
+					return "nine"
+				case 10:
+					return "ten"
+				default:
+					return "ten"
+			}
+		}
+	},
+	template: `<div :class="'ui ' + columns + ' columns grid counter-chart'">
+	<slot></slot>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/combo-box.js

@@ -0,0 +1,273 @@
+Vue.component("combo-box", {
+	// data-url 和 data-key 成对出现
+	props: [
+		"name", "title", "placeholder", "size", "v-items", "v-value",
+		"data-url", // 数据源URL
+		"data-key", // 数据源中数据的键名
+		"data-search", // 是否启用动态搜索，如果值为on或true，则表示启用
+		"width"
+	],
+	mounted: function () {
+		if (this.dataURL.length > 0) {
+			this.search("")
+		}
+
+		// 设定菜单宽度
+		let searchBox = this.$refs.searchBox
+		if (searchBox != null) {
+			let inputWidth = searchBox.offsetWidth
+			if (inputWidth != null && inputWidth > 0) {
+				this.$refs.menu.style.width = inputWidth + "px"
+			} else if (this.styleWidth.length > 0) {
+				this.$refs.menu.style.width = this.styleWidth
+			}
+		}
+	},
+	data: function () {
+		let items = this.vItems
+		if (items == null || !(items instanceof Array)) {
+			items = []
+		}
+		items = this.formatItems(items)
+
+		// 当前选中项
+		let selectedItem = null
+		if (this.vValue != null) {
+			let that = this
+			items.forEach(function (v) {
+				if (v.value == that.vValue) {
+					selectedItem = v
+				}
+			})
+		}
+
+		let width = this.width
+		if (width == null || width.length == 0) {
+			width = "11em"
+		} else {
+			if (/\d+$/.test(width)) {
+				width += "em"
+			}
+		}
+
+		// data url
+		let dataURL = ""
+		if (typeof this.dataUrl == "string" && this.dataUrl.length > 0) {
+			dataURL = this.dataUrl
+		}
+
+		return {
+			allItems: items, // 原始的所有的items
+			items: items.$copy(), // 候选的items
+			selectedItem: selectedItem, // 选中的item
+			keyword: "",
+			visible: false,
+			hideTimer: null,
+			hoverIndex: 0,
+			styleWidth: width,
+
+			isInitial: true,
+			dataURL: dataURL,
+			urlRequestId: 0 // 记录URL请求ID，防止并行冲突
+		}
+	},
+	methods: {
+		search: function (keyword) {
+			// 从URL中获取选项数据
+			let dataUrl = this.dataURL
+			let dataKey = this.dataKey
+			let that = this
+
+			let requestId = Math.random()
+			this.urlRequestId = requestId
+
+			Tea.action(dataUrl)
+				.params({
+					keyword: (keyword == null) ? "" : keyword
+				})
+				.post()
+				.success(function (resp) {
+					if (requestId != that.urlRequestId) {
+						return
+					}
+
+					if (resp.data != null) {
+						if (typeof (resp.data[dataKey]) == "object") {
+							let items = that.formatItems(resp.data[dataKey])
+							that.allItems = items
+							that.items = items.$copy()
+
+							if (that.isInitial) {
+								that.isInitial = false
+								if (that.vValue != null) {
+									items.forEach(function (v) {
+										if (v.value == that.vValue) {
+											that.selectedItem = v
+										}
+									})
+								}
+							}
+						}
+					}
+				})
+		},
+		formatItems: function (items) {
+			items.forEach(function (v) {
+				if (v.value == null) {
+					v.value = v.id
+				}
+			})
+			return items
+		},
+		reset: function () {
+			this.selectedItem = null
+			this.change()
+			this.hoverIndex = 0
+
+			let that = this
+			setTimeout(function () {
+				if (that.$refs.searchBox) {
+					that.$refs.searchBox.focus()
+				}
+			})
+		},
+		clear: function () {
+			this.selectedItem = null
+			this.change()
+			this.hoverIndex = 0
+		},
+		changeKeyword: function () {
+			let shouldSearch = this.dataURL.length > 0 && (this.dataSearch == "on" || this.dataSearch == "true")
+
+			this.hoverIndex = 0
+			let keyword = this.keyword
+			if (keyword.length == 0) {
+				if (shouldSearch) {
+					this.search(keyword)
+				} else {
+					this.items = this.allItems.$copy()
+				}
+				return
+			}
+
+
+			if (shouldSearch) {
+				this.search(keyword)
+			} else {
+				this.items = this.allItems.$copy().filter(function (v) {
+					if (v.fullname != null && v.fullname.length > 0 && teaweb.match(v.fullname, keyword)) {
+						return true
+					}
+					return teaweb.match(v.name, keyword)
+				})
+			}
+		},
+		selectItem: function (item) {
+			this.selectedItem = item
+			this.change()
+			this.hoverIndex = 0
+			this.keyword = ""
+			this.changeKeyword()
+		},
+		confirm: function () {
+			if (this.items.length > this.hoverIndex) {
+				this.selectItem(this.items[this.hoverIndex])
+			}
+		},
+		show: function () {
+			this.visible = true
+
+			// 不要重置hoverIndex，以便焦点可以在输入框和可选项之间切换
+		},
+		hide: function () {
+			let that = this
+			this.hideTimer = setTimeout(function () {
+				that.visible = false
+			}, 500)
+		},
+		downItem: function () {
+			this.hoverIndex++
+			if (this.hoverIndex > this.items.length - 1) {
+				this.hoverIndex = 0
+			}
+			this.focusItem()
+		},
+		upItem: function () {
+			this.hoverIndex--
+			if (this.hoverIndex < 0) {
+				this.hoverIndex = 0
+			}
+			this.focusItem()
+		},
+		focusItem: function () {
+			if (this.hoverIndex < this.items.length) {
+				this.$refs.itemRef[this.hoverIndex].focus()
+				let that = this
+				setTimeout(function () {
+					that.$refs.searchBox.focus()
+					if (that.hideTimer != null) {
+						clearTimeout(that.hideTimer)
+						that.hideTimer = null
+					}
+				})
+			}
+		},
+		change: function () {
+			this.$emit("change", this.selectedItem)
+
+			let that = this
+			setTimeout(function () {
+				if (that.$refs.selectedLabel != null) {
+					that.$refs.selectedLabel.focus()
+				}
+			})
+		},
+		submitForm: function (event) {
+			if (event.target.tagName != "A") {
+				return
+			}
+			let parentBox = this.$refs.selectedLabel.parentNode
+			while (true) {
+				parentBox = parentBox.parentNode
+				if (parentBox == null || parentBox.tagName == "BODY") {
+					return
+				}
+				if (parentBox.tagName == "FORM") {
+					parentBox.submit()
+					break
+				}
+			}
+		},
+
+		setDataURL: function (dataURL) {
+			this.dataURL = dataURL
+		},
+		reloadData: function () {
+			this.search("")
+		}
+	},
+	template: `<div style="display: inline; z-index: 10; background: white" class="combo-box">
+	<!-- 搜索框 -->
+	<div v-if="selectedItem == null">
+		<input type="text" v-model="keyword" :placeholder="placeholder" :size="size" :style="{'width': styleWidth}"  @input="changeKeyword" @focus="show" @blur="hide" @keyup.enter="confirm()" @keypress.enter.prevent="1" ref="searchBox" @keydown.down.prevent="downItem" @keydown.up.prevent="upItem"/>
+	</div>
+	
+	<!-- 当前选中 -->
+	<div v-if="selectedItem != null">
+		<input type="hidden" :name="name" :value="selectedItem.value"/>
+		<span class="ui label basic" style="line-height: 1.4; font-weight: normal; font-size: 1em" ref="selectedLabel"><span><span v-if="title != null && title.length > 0">{{title}}：</span>{{selectedItem.name}}</span>
+			<a href="" title="清除" @click.prevent="reset"><i class="icon remove small"></i></a>
+		</span>
+	</div>
+	
+	<!-- 菜单 -->
+	<div v-show="selectedItem == null && items.length > 0 && visible">
+		<div class="ui menu vertical small narrow-scrollbar" ref="menu">
+			<a href="" v-for="(item, index) in items" ref="itemRef" class="item" :class="{active: index == hoverIndex, blue: index == hoverIndex}" @click.prevent="selectItem(item)" style="line-height: 1.4">
+				<span v-if="item.fullname != null && item.fullname.length > 0">{{item.fullname}}</span>
+				<span v-else>{{item.name}}</span>
+			</a>
+		</div>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/copy-to-clipboard.js

@@ -0,0 +1,17 @@
+Vue.component("copy-to-clipboard", {
+	props: ["v-target"],
+	created: function () {
+		if (typeof ClipboardJS == "undefined") {
+			let jsFile = document.createElement("script")
+			jsFile.setAttribute("src", "/js/clipboard.min.js")
+			document.head.appendChild(jsFile)
+		}
+	},
+	methods: {
+		copy: function () {
+			new ClipboardJS('[data-clipboard-target]');
+			teaweb.successToast("已复制到剪切板")
+		}
+	},
+	template: `<a href="" title="拷贝到剪切板" :data-clipboard-target="'#' + vTarget" @click.prevent="copy"><i class="ui icon copy small"></i></em></a>`
+})

EdgeAdmin/web/public/js/components/common/countries-selector.js

@@ -0,0 +1,51 @@
+Vue.component("countries-selector", {
+	props: ["v-countries"],
+	data: function () {
+		let countries = this.vCountries
+		if (countries == null) {
+			countries = []
+		}
+		let countryIds = countries.$map(function (k, v) {
+			return v.id
+		})
+		return {
+			countries: countries,
+			countryIds: countryIds
+		}
+	},
+	methods: {
+		add: function () {
+			let countryStringIds = this.countryIds.map(function (v) {
+				return v.toString()
+			})
+			let that = this
+			teaweb.popup("/ui/selectCountriesPopup?countryIds=" + countryStringIds.join(","), {
+				width: "48em",
+				height: "23em",
+				callback: function (resp) {
+					that.countries = resp.data.countries
+					that.change()
+				}
+			})
+		},
+		remove: function (index) {
+			this.countries.$remove(index)
+			this.change()
+		},
+		change: function () {
+			this.countryIds = this.countries.$map(function (k, v) {
+				return v.id
+			})
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="countryIdsJSON" :value="JSON.stringify(countryIds)"/>
+	<div v-if="countries.length > 0" style="margin-bottom: 0.5em">
+		<div v-for="(country, index) in countries" class="ui label tiny basic">{{country.name}} <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a></div>
+		<div class="ui divider"></div>
+	</div>
+	<div>
+		<button class="ui button tiny" type="button" @click.prevent="add">+</button>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/csrf-token.js

@@ -0,0 +1,32 @@
+Vue.component("csrf-token", {
+	created: function () {
+		this.refreshToken()
+	},
+	mounted: function () {
+		let that = this
+		this.$refs.token.form.addEventListener("submit", function () {
+			that.refreshToken()
+		})
+
+		// 自动刷新
+		setInterval(function () {
+			that.refreshToken()
+		}, 10 * 60 * 1000)
+	},
+	data: function () {
+		return {
+			token: ""
+		}
+	},
+	methods: {
+		refreshToken: function () {
+			let that = this
+			Tea.action("/csrf/token")
+				.get()
+				.success(function (resp) {
+					that.token = resp.data.token
+				})
+		}
+	},
+	template: `<input type="hidden" name="csrfToken" :value="token" ref="token"/>`
+})

EdgeAdmin/web/public/js/components/common/datepicker.js

@@ -0,0 +1,59 @@
+Vue.component("datepicker", {
+	props: ["value", "v-name", "name", "v-value", "v-bottom-left", "placeholder"],
+	mounted: function () {
+		let that = this
+		teaweb.datepicker(this.$refs.dayInput, function (v) {
+			that.day = v
+			that.change()
+		}, !!this.vBottomLeft)
+	},
+	data: function () {
+		let name = this.vName
+		if (name == null) {
+			name = this.name
+		}
+		if (name == null) {
+			name = "day"
+		}
+
+		let day = this.vValue
+		if (day == null) {
+			day = this.value
+			if (day == null) {
+				day = ""
+			}
+		}
+
+		let placeholder = "YYYY-MM-DD"
+		if (this.placeholder != null) {
+			placeholder = this.placeholder
+		}
+
+		return {
+			realName: name,
+			realPlaceholder: placeholder,
+			day: day
+		}
+	},
+	watch: {
+		value: function (v) {
+			this.day = v
+
+			let picker = this.$refs.dayInput.picker
+			if (picker != null) {
+				if (v != null && /^\d+-\d+-\d+$/.test(v)) {
+					picker.setDate(v)
+				}
+			}
+		}
+	},
+	methods: {
+		change: function () {
+			this.$emit("input", this.day) // support v-model，事件触发需要在 change 之前
+			this.$emit("change", this.day)
+		}
+	},
+	template: `<div style="display: inline-block">
+	<input type="text" :name="realName" v-model="day" :placeholder="realPlaceholder" style="width:8.6em" maxlength="10" @input="change" ref="dayInput" autocomplete="off"/>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/datetime-input.js

@@ -0,0 +1,185 @@
+Vue.component("datetime-input", {
+	props: ["v-name", "v-timestamp"],
+	mounted: function () {
+		let that = this
+		teaweb.datepicker(this.$refs.dayInput, function (v) {
+			that.day = v
+			that.hour = "23"
+			that.minute = "59"
+			that.second = "59"
+			that.change()
+		})
+	},
+	data: function () {
+		let timestamp = this.vTimestamp
+		if (timestamp != null) {
+			timestamp = parseInt(timestamp)
+			if (isNaN(timestamp)) {
+				timestamp = 0
+			}
+		} else {
+			timestamp = 0
+		}
+
+		let day = ""
+		let hour = ""
+		let minute = ""
+		let second = ""
+
+		if (timestamp > 0) {
+			let date = new Date()
+			date.setTime(timestamp * 1000)
+
+			let year = date.getFullYear().toString()
+			let month = this.leadingZero((date.getMonth() + 1).toString(), 2)
+			day = year + "-" + month + "-" + this.leadingZero(date.getDate().toString(), 2)
+
+			hour = this.leadingZero(date.getHours().toString(), 2)
+			minute = this.leadingZero(date.getMinutes().toString(), 2)
+			second = this.leadingZero(date.getSeconds().toString(), 2)
+		}
+
+		return {
+			timestamp: timestamp,
+			day: day,
+			hour: hour,
+			minute: minute,
+			second: second,
+
+			hasDayError: false,
+			hasHourError: false,
+			hasMinuteError: false,
+			hasSecondError: false
+		}
+	},
+	methods: {
+		change: function () {
+			// day
+			if (!/^\d{4}-\d{1,2}-\d{1,2}$/.test(this.day)) {
+				this.hasDayError = true
+				return
+			}
+			let pieces = this.day.split("-")
+			let year = parseInt(pieces[0])
+
+			let month = parseInt(pieces[1])
+			if (month < 1 || month > 12) {
+				this.hasDayError = true
+				return
+			}
+
+			let day = parseInt(pieces[2])
+			if (day < 1 || day > 32) {
+				this.hasDayError = true
+				return
+			}
+
+			this.hasDayError = false
+
+			// hour
+			if (!/^\d+$/.test(this.hour)) {
+				this.hasHourError = true
+				return
+			}
+			let hour = parseInt(this.hour)
+			if (isNaN(hour)) {
+				this.hasHourError = true
+				return
+			}
+			if (hour < 0 || hour >= 24) {
+				this.hasHourError = true
+				return
+			}
+			this.hasHourError = false
+
+			// minute
+			if (!/^\d+$/.test(this.minute)) {
+				this.hasMinuteError = true
+				return
+			}
+			let minute = parseInt(this.minute)
+			if (isNaN(minute)) {
+				this.hasMinuteError = true
+				return
+			}
+			if (minute < 0 || minute >= 60) {
+				this.hasMinuteError = true
+				return
+			}
+			this.hasMinuteError = false
+
+			// second
+			if (!/^\d+$/.test(this.second)) {
+				this.hasSecondError = true
+				return
+			}
+			let second = parseInt(this.second)
+			if (isNaN(second)) {
+				this.hasSecondError = true
+				return
+			}
+			if (second < 0 || second >= 60) {
+				this.hasSecondError = true
+				return
+			}
+			this.hasSecondError = false
+
+			let date = new Date(year, month - 1, day, hour, minute, second)
+			this.timestamp = Math.floor(date.getTime() / 1000)
+		},
+		leadingZero: function (s, l) {
+			s = s.toString()
+			if (l <= s.length) {
+				return s
+			}
+			for (let i = 0; i < l - s.length; i++) {
+				s = "0" + s
+			}
+			return s
+		},
+		resultTimestamp: function () {
+			return this.timestamp
+		},
+		nextYear: function () {
+			let date = new Date()
+			date.setFullYear(date.getFullYear()+1)
+			this.day = date.getFullYear() + "-" + this.leadingZero(date.getMonth() + 1, 2) + "-" + this.leadingZero(date.getDate(), 2)
+			this.hour = this.leadingZero(date.getHours(), 2)
+			this.minute = this.leadingZero(date.getMinutes(), 2)
+			this.second = this.leadingZero(date.getSeconds(), 2)
+			this.change()
+		},
+		nextDays: function (days) {
+			let date = new Date()
+			date.setTime(date.getTime() + days * 86400 * 1000)
+			this.day = date.getFullYear() + "-" + this.leadingZero(date.getMonth() + 1, 2) + "-" + this.leadingZero(date.getDate(), 2)
+			this.hour = this.leadingZero(date.getHours(), 2)
+			this.minute = this.leadingZero(date.getMinutes(), 2)
+			this.second = this.leadingZero(date.getSeconds(), 2)
+			this.change()
+		},
+		nextHours: function (hours) {
+			let date = new Date()
+			date.setTime(date.getTime() + hours * 3600 * 1000)
+			this.day = date.getFullYear() + "-" + this.leadingZero(date.getMonth() + 1, 2) + "-" + this.leadingZero(date.getDate(), 2)
+			this.hour = this.leadingZero(date.getHours(), 2)
+			this.minute = this.leadingZero(date.getMinutes(), 2)
+			this.second = this.leadingZero(date.getSeconds(), 2)
+			this.change()
+		}
+	},
+	template: `<div>
+	<input type="hidden" :name="vName" :value="timestamp"/>
+	<div class="ui fields inline" style="padding: 0; margin:0">
+		<div class="ui field" :class="{error: hasDayError}">
+			<input type="text" v-model="day" placeholder="YYYY-MM-DD" style="width:8.6em" maxlength="10" @input="change" ref="dayInput"/>
+		</div>
+		<div class="ui field" :class="{error: hasHourError}"><input type="text" v-model="hour" maxlength="2" style="width:4em" placeholder="时" @input="change"/></div>
+		<div class="ui field">:</div>
+		<div class="ui field" :class="{error: hasMinuteError}"><input type="text" v-model="minute" maxlength="2" style="width:4em" placeholder="分" @input="change"/></div>
+		<div class="ui field">:</div>
+		<div class="ui field" :class="{error: hasSecondError}"><input type="text" v-model="second" maxlength="2" style="width:4em" placeholder="秒" @input="change"/></div>
+	</div>
+	<p class="comment">常用时间：<a href="" @click.prevent="nextHours(1)"> &nbsp;1小时&nbsp; </a> <span class="disabled">|</span> <a href="" @click.prevent="nextDays(1)"> &nbsp;1天&nbsp; </a> <span class="disabled">|</span> <a href="" @click.prevent="nextDays(3)"> &nbsp;3天&nbsp; </a> <span class="disabled">|</span> <a href="" @click.prevent="nextDays(7)"> &nbsp;1周&nbsp; </a> <span class="disabled">|</span> <a href="" @click.prevent="nextDays(30)"> &nbsp;30天&nbsp; </a> <span class="disabled">|</span> <a href="" @click.prevent="nextYear()"> &nbsp;1年&nbsp; </a> </p>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/dot.js

@@ -0,0 +1,3 @@
+Vue.component("dot", {
+	template: '<span style="display: inline-block; padding-bottom: 3px"><i class="icon circle tiny"></i></span>'
+})

EdgeAdmin/web/public/js/components/common/download-link.js

@@ -0,0 +1,42 @@
+Vue.component("download-link", {
+	props: ["v-element", "v-file", "v-value"],
+	created: function () {
+		let that = this
+		setTimeout(function () {
+			that.url = that.composeURL()
+		}, 1000)
+	},
+	data: function () {
+		let filename = this.vFile
+		if (filename == null || filename.length == 0) {
+			filename = "unknown-file"
+		}
+		return {
+			file: filename,
+			url: this.composeURL()
+		}
+	},
+	methods: {
+		composeURL: function () {
+			let text = ""
+			if (this.vValue != null) {
+				text = this.vValue
+			} else {
+				let e = document.getElementById(this.vElement)
+				if (e == null) {
+					// 不提示错误，因为此时可能页面未加载完整
+					return
+				}
+				text = e.innerText
+				if (text == null) {
+					text = e.textContent
+				}
+			}
+			return Tea.url("/ui/download", {
+				file: this.file,
+				text: text
+			})
+		}
+	},
+	template: `<a :href="url" target="_blank" style="font-weight: normal"><slot></slot></a>`,
+})

EdgeAdmin/web/public/js/components/common/file-textarea.js

@@ -0,0 +1,30 @@
+Vue.component("file-textarea", {
+	props: ["value"],
+	data: function () {
+		let value = this.value
+		if (typeof value != "string") {
+			value = ""
+		}
+		return {
+			realValue: value
+		}
+	},
+	mounted: function () {
+	},
+	methods: {
+		dragover: function () {},
+		drop: function (e) {
+			let that = this
+			e.dataTransfer.items[0].getAsFile().text().then(function (data) {
+				that.setValue(data)
+			})
+		},
+		setValue: function (value) {
+			this.realValue = value
+		},
+		focus: function () {
+			this.$refs.textarea.focus()
+		}
+	},
+	template: `<textarea @drop.prevent="drop" @dragover.prevent="dragover" ref="textarea" v-model="realValue"></textarea>`
+})

EdgeAdmin/web/public/js/components/common/first-menu.js

@@ -0,0 +1,13 @@
+/**
+ * 一级菜单
+ */
+Vue.component("first-menu", {
+	props: [],
+	template: ' \
+		<div class="first-menu"> \
+			<div class="ui menu text blue small">\
+				<slot></slot>\
+			</div> \
+			<div class="ui divider"></div> \
+		</div>'
+});

EdgeAdmin/web/public/js/components/common/health-check-config-box.js

@@ -0,0 +1,324 @@
+Vue.component("health-check-config-box", {
+	props: ["v-health-check-config", "v-check-domain-url", "v-is-plus"],
+	data: function () {
+		let healthCheckConfig = this.vHealthCheckConfig
+		let urlProtocol = "http"
+		let urlPort = ""
+		let urlRequestURI = "/"
+		let urlHost = ""
+
+		if (healthCheckConfig == null) {
+			healthCheckConfig = {
+				isOn: false,
+				url: "",
+				interval: {count: 60, unit: "second"},
+				statusCodes: [200],
+				timeout: {count: 10, unit: "second"},
+				countTries: 3,
+				tryDelay: {count: 100, unit: "ms"},
+				autoDown: true,
+				countUp: 1,
+				countDown: 3,
+				userAgent: "",
+				onlyBasicRequest: true,
+				accessLogIsOn: true
+			}
+			let that = this
+			setTimeout(function () {
+				that.changeURL()
+			}, 500)
+		} else {
+			try {
+				let url = new URL(healthCheckConfig.url)
+				urlProtocol = url.protocol.substring(0, url.protocol.length - 1)
+
+				// 域名
+				urlHost = url.host
+				if (urlHost == "%24%7Bhost%7D") {
+					urlHost = "${host}"
+				}
+				let colonIndex = urlHost.indexOf(":")
+				if (colonIndex > 0) {
+					urlHost = urlHost.substring(0, colonIndex)
+				}
+
+				urlPort = url.port
+				urlRequestURI = url.pathname
+				if (url.search.length > 0) {
+					urlRequestURI += url.search
+				}
+			} catch (e) {
+			}
+
+			if (healthCheckConfig.statusCodes == null) {
+				healthCheckConfig.statusCodes = [200]
+			}
+			if (healthCheckConfig.interval == null) {
+				healthCheckConfig.interval = {count: 60, unit: "second"}
+			}
+			if (healthCheckConfig.timeout == null) {
+				healthCheckConfig.timeout = {count: 10, unit: "second"}
+			}
+			if (healthCheckConfig.tryDelay == null) {
+				healthCheckConfig.tryDelay = {count: 100, unit: "ms"}
+			}
+			if (healthCheckConfig.countUp == null || healthCheckConfig.countUp < 1) {
+				healthCheckConfig.countUp = 1
+			}
+			if (healthCheckConfig.countDown == null || healthCheckConfig.countDown < 1) {
+				healthCheckConfig.countDown = 3
+			}
+		}
+
+		return {
+			healthCheck: healthCheckConfig,
+			advancedVisible: false,
+			urlProtocol: urlProtocol,
+			urlHost: urlHost,
+			urlPort: urlPort,
+			urlRequestURI: urlRequestURI,
+			urlIsEditing: healthCheckConfig.url.length == 0,
+
+			hostErr: ""
+		}
+	},
+	watch: {
+		urlRequestURI: function () {
+			if (this.urlRequestURI.length > 0 && this.urlRequestURI[0] != "/") {
+				this.urlRequestURI = "/" + this.urlRequestURI
+			}
+			this.changeURL()
+		},
+		urlPort: function (v) {
+			let port = parseInt(v)
+			if (!isNaN(port)) {
+				this.urlPort = port.toString()
+			} else {
+				this.urlPort = ""
+			}
+			this.changeURL()
+		},
+		urlProtocol: function () {
+			this.changeURL()
+		},
+		urlHost: function () {
+			this.changeURL()
+			this.hostErr = ""
+		},
+		"healthCheck.countTries": function (v) {
+			let count = parseInt(v)
+			if (!isNaN(count)) {
+				this.healthCheck.countTries = count
+			} else {
+				this.healthCheck.countTries = 0
+			}
+		},
+		"healthCheck.countUp": function (v) {
+			let count = parseInt(v)
+			if (!isNaN(count)) {
+				this.healthCheck.countUp = count
+			} else {
+				this.healthCheck.countUp = 0
+			}
+		},
+		"healthCheck.countDown": function (v) {
+			let count = parseInt(v)
+			if (!isNaN(count)) {
+				this.healthCheck.countDown = count
+			} else {
+				this.healthCheck.countDown = 0
+			}
+		}
+	},
+	methods: {
+		showAdvanced: function () {
+			this.advancedVisible = !this.advancedVisible
+		},
+		changeURL: function () {
+			let urlHost = this.urlHost
+			if (urlHost.length == 0) {
+				urlHost = "${host}"
+			}
+			this.healthCheck.url = this.urlProtocol + "://" + urlHost + ((this.urlPort.length > 0) ? ":" + this.urlPort : "") + this.urlRequestURI
+		},
+		changeStatus: function (values) {
+			this.healthCheck.statusCodes = values.$map(function (k, v) {
+				let status = parseInt(v)
+				if (isNaN(status)) {
+					return 0
+				} else {
+					return status
+				}
+			})
+		},
+		onChangeURLHost: function () {
+			let checkDomainURL = this.vCheckDomainUrl
+			if (checkDomainURL == null || checkDomainURL.length == 0) {
+				return
+			}
+
+			let that = this
+			Tea.action(checkDomainURL)
+				.params({host: this.urlHost})
+				.success(function (resp) {
+					if (!resp.data.isOk) {
+						that.hostErr = "在当前集群中找不到此域名，可能会影响健康检查结果。"
+					} else {
+						that.hostErr = ""
+					}
+				})
+				.post()
+		},
+		editURL: function () {
+			this.urlIsEditing = !this.urlIsEditing
+		}
+	},
+	template: `<div>
+<input type="hidden" name="healthCheckJSON" :value="JSON.stringify(healthCheck)"/>
+<table class="ui table definition selectable">
+	<tbody>
+		<tr>
+			<td class="title">启用健康检查</td>
+			<td>
+				<div class="ui checkbox">
+					<input type="checkbox" value="1" v-model="healthCheck.isOn"/>
+					<label></label>
+				</div>
+				<p class="comment">通过访问节点上的网站URL来确定节点是否健康。</p>
+			</td>
+		</tr>
+	</tbody>
+	<tbody v-show="healthCheck.isOn">
+		<tr>
+			<td>检测URL *</td>
+			<td>
+				<div v-if="healthCheck.url.length > 0" style="margin-bottom: 1em"><code-label>{{healthCheck.url}}</code-label> &nbsp; <a href="" @click.prevent="editURL"><span class="small">修改 <i class="icon angle" :class="{down: !urlIsEditing, up: urlIsEditing}"></i></span></a> </div>
+				<div v-show="urlIsEditing">
+					<table class="ui table">
+						 <tr>
+							<td class="title">协议</td> 
+							<td>
+								<select class="ui dropdown auto-width" v-model="urlProtocol">
+								<option value="http">http://</option>
+								<option value="https">https://</option>
+								</select>
+							</td>
+						</tr>
+						<tr>
+							<td>域名</td>
+							<td>
+								<input type="text" v-model="urlHost" @change="onChangeURLHost"/>
+								<p class="comment"><span v-if="hostErr.length > 0" class="red">{{hostErr}}</span>已经部署到当前集群的一个域名；如果为空则使用节点IP作为域名。<span class="red" v-if="urlProtocol == 'https' && urlHost.length == 0">如果协议是https，这里必须填写一个已经设置了SSL证书的域名。</span></p>
+							</td>
+						</tr>
+						<tr>
+							<td>端口</td>
+							<td>
+								<input type="text" maxlength="5" style="width:5.4em" placeholder="端口" v-model="urlPort"/>
+								<p class="comment">域名或者IP的端口，可选项，默认为80/443。</p>
+							</td>
+						</tr>
+						<tr>
+							<td>RequestURI</td>
+							<td><input type="text" v-model="urlRequestURI" placeholder="/" style="width:20em"/>
+								<p class="comment">请求的路径，可以带参数，可选项。</p>
+							</td>
+						</tr>
+					</table>
+					<div class="ui divider"></div>
+					<p class="comment" v-if="healthCheck.url.length > 0">拼接后的检测URL：<code-label>{{healthCheck.url}}</code-label>，其中\${host}指的是域名。</p>
+				</div>
+			</td>
+		</tr>
+		<tr>
+			<td>检测时间间隔</td>
+			<td>
+				<time-duration-box :v-value="healthCheck.interval"></time-duration-box>
+				<p class="comment">两次检查之间的间隔。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>自动上/下线<span v-if="vIsPlus">IP</span></td>
+			<td>
+				<div class="ui checkbox">
+					<input type="checkbox" value="1" v-model="healthCheck.autoDown"/>
+					<label></label>
+				</div>
+				<p class="comment">选中后系统会根据健康检查的结果自动标记<span v-if="vIsPlus">节点IP</span><span v-else>节点</span>的上线/下线状态，并可能自动同步DNS设置。<span v-if="!vIsPlus">注意：免费版的只能整体上下线整个节点，商业版的可以下线单个IP。</span></p>
+			</td>
+		</tr>
+		<tr v-show="healthCheck.autoDown">
+			<td>连续上线次数</td>
+			<td>
+				<input type="text" v-model="healthCheck.countUp" style="width:5em" maxlength="6"/>
+				<p class="comment">连续{{healthCheck.countUp}}次检查成功后自动恢复上线。</p>
+			</td>
+		</tr>
+		<tr v-show="healthCheck.autoDown">
+			<td>连续下线次数</td>
+			<td>
+				<input type="text" v-model="healthCheck.countDown" style="width:5em" maxlength="6"/>
+				<p class="comment">连续{{healthCheck.countDown}}次检查失败后自动下线。</p>
+			</td>
+		</tr>
+	</tbody>
+	<tbody v-show="healthCheck.isOn">
+		<tr>
+			<td colspan="2"><more-options-angle @change="showAdvanced"></more-options-angle></td>
+		</tr>
+	</tbody>
+	<tbody v-show="advancedVisible && healthCheck.isOn">
+		<tr>
+			<td>允许的状态码</td>
+			<td>
+				<values-box :values="healthCheck.statusCodes" maxlength="3" @change="changeStatus"></values-box>
+				<p class="comment">允许检测URL返回的状态码列表。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>超时时间</td>
+			<td>
+				<time-duration-box :v-value="healthCheck.timeout"></time-duration-box>
+				<p class="comment">读取检测URL超时时间。</p>
+			</td>	
+		</tr>
+		<tr>
+			<td>连续尝试次数</td>
+			<td>
+				<input type="text" v-model="healthCheck.countTries" style="width: 5em" maxlength="2"/>
+				<p class="comment">如果读取检测URL失败后需要再次尝试的次数。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>每次尝试间隔</td>
+			<td>
+				<time-duration-box :v-value="healthCheck.tryDelay"></time-duration-box>
+				<p class="comment">如果读取检测URL失败后再次尝试时的间隔时间。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>终端信息<em>（User-Agent）</em></td>
+			<td>
+				<input type="text" v-model="healthCheck.userAgent" maxlength="200"/>
+				<p class="comment">发送到服务器的User-Agent值，不填写表示使用默认值。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>只基础请求</td>
+			<td>
+				<checkbox v-model="healthCheck.onlyBasicRequest"></checkbox>
+				<p class="comment">只做基础的请求，不处理反向代理（不检查源站）、WAF等。</p>
+			</td>
+		</tr>
+		<tr>
+			<td>记录访问日志</td>
+			<td>
+				<checkbox v-model="healthCheck.accessLogIsOn"></checkbox>
+				<p class="comment">记录健康检查的访问日志。</p>
+			</td>
+		</tr>
+	</tbody>
+</table>
+<div class="margin"></div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/inner-menu-item.js

@@ -0,0 +1,23 @@
+/**
+ * 菜单项
+ */
+Vue.component("inner-menu-item", {
+	props: ["href", "active", "code"],
+	data: function () {
+		var active = this.active;
+		if (typeof(active) =="undefined") {
+			var itemCode = "";
+			if (typeof (window.TEA.ACTION.data.firstMenuItem) != "undefined") {
+				itemCode = window.TEA.ACTION.data.firstMenuItem;
+			}
+			active = (itemCode == this.code);
+		}
+		return {
+			vHref: (this.href == null) ? "" : this.href,
+			vActive: active
+		};
+	},
+	template: '\
+		<a :href="vHref" class="item right" style="color:#4183c4" :class="{active:vActive}">[<slot></slot>]</a> \
+		'
+});

EdgeAdmin/web/public/js/components/common/inner-menu.js

@@ -0,0 +1,11 @@
+/**
+ * 二级菜单
+ */
+Vue.component("inner-menu", {
+	template: `
+		<div class="second-menu" style="width:80%;position: absolute;top:-8px;right:1em"> 
+			<div class="ui menu text blue small">
+				<slot></slot>
+			</div> 
+		</div>`
+});

EdgeAdmin/web/public/js/components/common/inputs.js

@@ -0,0 +1,63 @@
+Vue.component("digit-input", {
+	props: ["value", "maxlength", "size", "min", "max", "required", "placeholder"],
+	mounted: function () {
+		let that = this
+		setTimeout(function () {
+			that.check()
+		})
+	},
+	data: function () {
+		let realMaxLength = this.maxlength
+		if (realMaxLength == null) {
+			realMaxLength = 20
+		}
+
+		let realSize = this.size
+		if (realSize == null) {
+			realSize = 6
+		}
+
+		return {
+			realValue: this.value,
+			realMaxLength: realMaxLength,
+			realSize: realSize,
+			isValid: true
+		}
+	},
+	watch: {
+		realValue: function (v) {
+			this.notifyChange()
+		}
+	},
+	methods: {
+		notifyChange: function () {
+			let v = parseInt(this.realValue.toString(), 10)
+			if (isNaN(v)) {
+				v = 0
+			}
+			this.check()
+			this.$emit("input", v)
+		},
+		check: function () {
+			if (this.realValue == null) {
+				return
+			}
+			let s = this.realValue.toString()
+			if (!/^\d+$/.test(s)) {
+				this.isValid = false
+				return
+			}
+			let v = parseInt(s, 10)
+			if (isNaN(v)) {
+				this.isValid = false
+			} else {
+				if (this.required) {
+					this.isValid = (this.min == null || this.min <= v) && (this.max == null || this.max >= v)
+				} else {
+					this.isValid = (v == 0 || (this.min == null || this.min <= v) && (this.max == null || this.max >= v))
+				}
+			}
+		}
+	},
+	template: `<input type="text" v-model="realValue" :maxlength="realMaxLength" :size="realSize" :class="{error: !this.isValid}" :placeholder="placeholder" autocomplete="off"/>`
+})

EdgeAdmin/web/public/js/components/common/js-page.js

@@ -0,0 +1,27 @@
+Vue.component("js-page", {
+	props: ["v-max"],
+	data: function () {
+		let max = this.vMax
+		if (max == null) {
+			max = 0
+		}
+		return {
+			max: max,
+			page: 1
+		}
+	},
+	methods: {
+		updateMax: function (max) {
+			this.max = max
+		},
+		selectPage: function(page) {
+			this.page = page
+			this.$emit("change", page)
+		}
+	},
+	template:`<div>
+	<div class="page" v-if="max > 1">
+		<a href="" v-for="i in max" :class="{active: i == page}" @click.prevent="selectPage(i)">{{i}}</a>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/keyword.js

@@ -0,0 +1,58 @@
+Vue.component("keyword", {
+	props: ["v-word"],
+	data: function () {
+		let word = this.vWord
+		if (word == null) {
+			word = ""
+		} else {
+			word = word.replace(/\)/g, "\\)")
+			word = word.replace(/\(/g, "\\(")
+			word = word.replace(/\+/g, "\\+")
+			word = word.replace(/\^/g, "\\^")
+			word = word.replace(/\$/g, "\\$")
+			word = word.replace(/\?/g, "\\?")
+			word = word.replace(/\*/g, "\\*")
+			word = word.replace(/\[/g, "\\[")
+			word = word.replace(/{/g, "\\{")
+			word = word.replace(/\./g, "\\.")
+		}
+
+		let slot = this.$slots["default"][0]
+		let text = slot.text
+		if (word.length > 0) {
+			let that = this
+			let m = []  // replacement => tmp
+			let tmpIndex = 0
+			text = text.replaceAll(new RegExp("(" + word + ")", "ig"), function (replacement) {
+				tmpIndex++
+				let s = "<span style=\"border: 1px #ccc dashed; color: #ef4d58\">" + that.encodeHTML(replacement) + "</span>"
+				let tmpKey = "$TMP__KEY__" + tmpIndex.toString() + "$"
+				m.push([tmpKey, s])
+				return tmpKey
+			})
+			text = this.encodeHTML(text)
+
+			m.forEach(function (r) {
+				text = text.replace(r[0], r[1])
+			})
+
+		} else {
+			text = this.encodeHTML(text)
+		}
+
+		return {
+			word: word,
+			text: text
+		}
+	},
+	methods: {
+		encodeHTML: function (s) {
+			s = s.replace(/&/g, "&amp;")
+			s = s.replace(/</g, "&lt;")
+			s = s.replace(/>/g, "&gt;")
+			s = s.replace(/"/g, "&quot;")
+			return s
+		}
+	},
+	template: `<span><span style="display: none"><slot></slot></span><span v-html="text"></span></span>`
+})

EdgeAdmin/web/public/js/components/common/labeled-input.js

@@ -0,0 +1,7 @@
+Vue.component("labeled-input", {
+	props: ["name", "size", "maxlength", "label", "value"],
+	template: '<div class="ui input right labeled"> \
+	<input type="text" :name="name" :size="size" :maxlength="maxlength" :value="value"/>\
+	<span class="ui label">{{label}}</span>\
+</div>'
+});

EdgeAdmin/web/public/js/components/common/labels.js

@@ -0,0 +1,65 @@
+// 启用状态标签
+Vue.component("label-on", {
+	props: ["v-is-on"],
+	template: '<div><span v-if="vIsOn" class="green">已启用</span><span v-if="!vIsOn" class="red">已停用</span></div>'
+})
+
+// 文字代码标签
+Vue.component("code-label", {
+	methods: {
+		click: function (args) {
+			this.$emit("click", args)
+		}
+	},
+	template: `<span class="ui label basic small" style="padding: 3px;margin-left:2px;margin-right:2px" @click.prevent="click"><slot></slot></span>`
+})
+
+Vue.component("code-label-plain", {
+	template: `<span class="ui label basic tiny" style="padding: 3px;margin-left:2px;margin-right:2px"><slot></slot></span>`
+})
+
+
+// tiny标签
+Vue.component("tiny-label", {
+	template: `<span class="ui label tiny" style="margin-bottom: 0.5em"><slot></slot></span>`
+})
+
+Vue.component("tiny-basic-label", {
+	template: `<span class="ui label tiny basic" style="margin-bottom: 0.5em"><slot></slot></span>`
+})
+
+// 更小的标签
+Vue.component("micro-basic-label", {
+	template: `<span class="ui label tiny basic" style="margin-bottom: 0.5em; font-size: 0.7em; padding: 4px"><slot></slot></span>`
+})
+
+
+// 灰色的Label
+Vue.component("grey-label", {
+	props: ["color"],
+	data: function () {
+		let color = "grey"
+		if (this.color != null && this.color.length > 0) {
+			color = "red"
+		}
+		return {
+			labelColor: color
+		}
+	},
+	template: `<span class="ui label basic tiny" :class="labelColor" style="margin-top: 0.4em; font-size: 0.7em; border: 1px solid #ddd!important; font-weight: normal;"><slot></slot></span>`
+})
+
+// 可选标签
+Vue.component("optional-label", {
+	template: `<em><span class="grey">（可选）</span></em>`
+})
+
+// Plus专属
+Vue.component("plus-label", {
+	template: `<span style="color: #B18701;">Plus专属功能。</span>`
+})
+
+// 提醒设置项为专业设置
+Vue.component("pro-warning-label", {
+	template: `<span><i class="icon warning circle yellow"></i>注意：通常不需要修改；如要修改，请在专家指导下进行。</span>`
+})

EdgeAdmin/web/public/js/components/common/links.js

@@ -0,0 +1,86 @@
+// 使用Icon的链接方式
+Vue.component("link-icon", {
+	props: ["href", "title", "target", "size"],
+	data: function () {
+		let realSize = this.size
+		if (realSize == null || realSize.length == 0) {
+			realSize = "small"
+		}
+
+		return {
+			vTitle: (this.title == null) ? "打开链接" : this.title,
+			realSize: realSize
+		}
+	},
+	template: `<span><slot></slot>&nbsp;<a :href="href" :title="vTitle" class="link grey" :target="target"><i class="icon linkify" :class="realSize"></i></a></span>`
+})
+
+// 带有下划虚线的连接
+Vue.component("link-red", {
+	props: ["href", "title"],
+	data: function () {
+		let href = this.href
+		if (href == null) {
+			href = ""
+		}
+		return {
+			vHref: href
+		}
+	},
+	methods: {
+		clickPrevent: function () {
+			emitClick(this, arguments)
+
+			if (this.vHref.length > 0) {
+				window.location = this.vHref
+			}
+		}
+	},
+	template: `<a :href="vHref" :title="title" style="border-bottom: 1px #db2828 dashed" @click.prevent="clickPrevent"><span class="red"><slot></slot></span></a>`
+})
+
+// 会弹出窗口的链接
+Vue.component("link-popup", {
+	props: ["title"],
+	methods: {
+		clickPrevent: function () {
+			emitClick(this, arguments)
+		}
+	},
+	template: `<a href="" :title="title" @click.prevent="clickPrevent"><slot></slot></a>`
+})
+
+Vue.component("popup-icon", {
+	props: ["title", "href", "height"],
+	methods: {
+		clickPrevent: function () {
+			if (this.href != null && this.href.length > 0) {
+				teaweb.popup(this.href, {
+					height: this.height
+				})
+			}
+		}
+	},
+	template: `<span><slot></slot>&nbsp;<a href="" :title="title" @click.prevent="clickPrevent"><i class="icon expand small"></i></a></span>`
+})
+
+// 小提示
+Vue.component("tip-icon", {
+	props: ["content"],
+	methods: {
+		showTip: function () {
+			teaweb.popupTip(this.content)
+		}
+	},
+	template: `<a href="" title="查看帮助" @click.prevent="showTip"><i class="icon question circle grey"></i></a>`
+})
+
+// 提交点击事件
+function emitClick(obj, arguments) {
+	let event = "click"
+	let newArgs = [event]
+	for (let i = 0; i < arguments.length; i++) {
+		newArgs.push(arguments[i])
+	}
+	obj.$emit.apply(obj, newArgs)
+}

EdgeAdmin/web/public/js/components/common/mask-warning.js

@@ -0,0 +1,3 @@
+Vue.component("mask-warning", {
+	template: `<span class="red">为了安全起见，此项数据保存后将不允许在界面查看完整明文，为避免忘记，请自行记录原始数据。</span>`
+})

EdgeAdmin/web/public/js/components/common/menu-item.js

@@ -0,0 +1,45 @@
+/**
+ * 菜单项
+ */
+Vue.component("menu-item", {
+	props: ["href", "active", "code"],
+	data: function () {
+		let active = this.active
+		if (typeof (active) == "undefined") {
+			var itemCode = ""
+			if (typeof (window.TEA.ACTION.data.firstMenuItem) != "undefined") {
+				itemCode = window.TEA.ACTION.data.firstMenuItem
+			}
+			if (itemCode != null && itemCode.length > 0 && this.code != null && this.code.length > 0) {
+				if (itemCode.indexOf(",") > 0) {
+					active = itemCode.split(",").$contains(this.code)
+				} else {
+					active = (itemCode == this.code)
+				}
+			}
+		}
+
+		let href = (this.href == null) ? "" : this.href
+		if (typeof (href) == "string" && href.length > 0 && href.startsWith(".")) {
+			let qIndex = href.indexOf("?")
+			if (qIndex >= 0) {
+				href = Tea.url(href.substring(0, qIndex)) + href.substring(qIndex)
+			} else {
+				href = Tea.url(href)
+			}
+		}
+
+		return {
+			vHref: href,
+			vActive: active
+		}
+	},
+	methods: {
+		click: function (e) {
+			this.$emit("click", e)
+		}
+	},
+	template: '\
+		<a :href="vHref" class="item" :class="{active:vActive}" @click="click"><slot></slot></a> \
+		'
+});

EdgeAdmin/web/public/js/components/common/message-loading.js

@@ -0,0 +1,5 @@
+Vue.component("loading-message", {
+	template: `<div class="ui message loading">
+        <div class="ui active inline loader small"></div>  &nbsp; <slot></slot>
+    </div>`
+})

EdgeAdmin/web/public/js/components/common/more-items-angle.js

@@ -0,0 +1,83 @@
+// 可以展示更多条目的角图表
+Vue.component("more-items-angle", {
+	props: ["v-data-url", "v-url"],
+	data: function () {
+		return {
+			visible: false
+		}
+	},
+	methods: {
+		show: function () {
+			this.visible = !this.visible
+			if (this.visible) {
+				this.showBox()
+			} else {
+				this.hideBox()
+			}
+		},
+		showBox: function () {
+			let that = this
+
+			this.visible = true
+
+			Tea.action(this.vDataUrl)
+				.params({
+					url: this.vUrl
+				})
+				.post()
+				.success(function (resp) {
+					let groups = resp.data.groups
+
+					let boxLeft = that.$el.offsetLeft + 120;
+					let boxTop = that.$el.offsetTop + 70;
+
+					let box = document.createElement("div")
+					box.setAttribute("id", "more-items-box")
+					box.style.cssText = "z-index: 100; position: absolute; left: " + boxLeft + "px; top: " + boxTop + "px; max-height: 30em; overflow: auto; border-bottom: 1px solid rgba(34,36,38,.15)"
+					document.body.append(box)
+
+					let menuHTML = "<ul class=\"ui labeled menu vertical borderless\" style=\"padding: 0\">"
+					groups.forEach(function (group) {
+						menuHTML += "<div class=\"item header\">" + teaweb.encodeHTML(group.name) + "</div>"
+						group.items.forEach(function (item) {
+							menuHTML += "<a href=\"" + item.url + "\" class=\"item " + (item.isActive ? "active" : "") + "\" style=\"font-size: 0.9em;\">" + teaweb.encodeHTML(item.name) + "<i class=\"icon right angle\"></i></a>"
+						})
+					})
+					menuHTML += "</ul>"
+					box.innerHTML = menuHTML
+
+					let listener = function (e) {
+						if (e.target.tagName == "I") {
+							return
+						}
+
+						if (!that.isInBox(box, e.target)) {
+							document.removeEventListener("click", listener)
+							that.hideBox()
+						}
+					}
+					document.addEventListener("click", listener)
+				})
+		},
+		hideBox: function () {
+			let box = document.getElementById("more-items-box")
+			if (box != null) {
+				box.parentNode.removeChild(box)
+			}
+			this.visible = false
+		},
+		isInBox: function (parent, child) {
+			while (true) {
+				if (child == null) {
+					break
+				}
+				if (child.parentNode == parent) {
+					return true
+				}
+				child = child.parentNode
+			}
+			return false
+		}
+	},
+	template: `<a href="" class="item" @click.prevent="show" style="padding-right: 0"><span style="font-size: 0.8em">切换</span><i class="icon angle" :class="{down: !visible, up: visible}"></i></a>`
+})

EdgeAdmin/web/public/js/components/common/more-options-angle.js

@@ -0,0 +1,14 @@
+Vue.component("more-options-angle", {
+	data: function () {
+		return {
+			isVisible: false
+		}
+	},
+	methods: {
+		show: function () {
+			this.isVisible = !this.isVisible
+			this.$emit("change", this.isVisible)
+		}
+	},
+	template: `<a href="" @click.prevent="show()"><span v-if="!isVisible">更多选项</span><span v-if="isVisible">收起选项</span><i class="icon angle" :class="{down:!isVisible, up:isVisible}"></i></a>`
+})

EdgeAdmin/web/public/js/components/common/more-options-indicator.js

@@ -0,0 +1,22 @@
+/**
+ * 更多选项
+ */
+Vue.component("more-options-indicator", {
+	props:[],
+	data: function () {
+		return {
+			visible: false
+		}
+	},
+	methods: {
+		changeVisible: function () {
+			this.visible = !this.visible
+			if (Tea.Vue != null) {
+				Tea.Vue.moreOptionsVisible = this.visible
+			}
+			this.$emit("change", this.visible)
+			this.$emit("input", this.visible)
+		}
+	},
+	template: '<a href="" style="font-weight: normal" @click.prevent="changeVisible()"><slot><span v-if="!visible">更多选项</span><span v-if="visible">收起选项</span></slot> <i class="icon angle" :class="{down:!visible, up:visible}"></i> </a>'
+});

EdgeAdmin/web/public/js/components/common/more-options-tbody.js

@@ -0,0 +1,18 @@
+Vue.component("more-options-tbody", {
+	data: function () {
+		return {
+			isVisible: false
+		}
+	},
+	methods: {
+		show: function () {
+			this.isVisible = !this.isVisible
+			this.$emit("change", this.isVisible)
+		}
+	},
+	template: `<tbody>
+	<tr>
+		<td colspan="2"><a href="" @click.prevent="show()"><span v-if="!isVisible">更多选项</span><span v-if="isVisible">收起选项</span><i class="icon angle" :class="{down:!isVisible, up:isVisible}"></i></a></td>
+	</tr>
+</tbody>`
+})

EdgeAdmin/web/public/js/components/common/network-addresses-box.js

@@ -0,0 +1,139 @@
+Vue.component("network-addresses-box", {
+	props: ["v-server-type", "v-addresses", "v-protocol", "v-name", "v-from", "v-support-range", "v-url"],
+	data: function () {
+		let addresses = this.vAddresses
+		if (addresses == null) {
+			addresses = []
+		}
+		let protocol = this.vProtocol
+		if (protocol == null) {
+			protocol = ""
+		}
+
+		let name = this.vName
+		if (name == null) {
+			name = "addresses"
+		}
+
+		let from = this.vFrom
+		if (from == null) {
+			from = ""
+		}
+
+		return {
+			addresses: addresses,
+			protocol: protocol,
+			name: name,
+			from: from,
+			isEditing: false
+		}
+	},
+	watch: {
+		"vServerType": function () {
+			this.addresses = []
+		},
+		"vAddresses": function () {
+			if (this.vAddresses != null) {
+				this.addresses = this.vAddresses
+			}
+		}
+	},
+	methods: {
+		addAddr: function () {
+			this.isEditing = true
+
+			let that = this
+			window.UPDATING_ADDR = null
+
+			let url = this.vUrl
+			if (url == null) {
+				url = "/servers/addPortPopup"
+			}
+
+			teaweb.popup(url + "?serverType=" + this.vServerType + "&protocol=" + this.protocol + "&from=" + this.from + "&supportRange=" + (this.supportRange() ? 1 : 0), {
+				height: "18em",
+				callback: function (resp) {
+					var addr = resp.data.address
+					if (that.addresses.$find(function (k, v) {
+						return addr.host == v.host && addr.portRange == v.portRange && addr.protocol == v.protocol
+					}) != null) {
+						teaweb.warn("要添加的网络地址已经存在")
+						return
+					}
+					that.addresses.push(addr)
+					if (["https", "https4", "https6"].$contains(addr.protocol)) {
+						this.tlsProtocolName = "HTTPS"
+					} else if (["tls", "tls4", "tls6"].$contains(addr.protocol)) {
+						this.tlsProtocolName = "TLS"
+					}
+
+					// 发送事件
+					that.$emit("change", that.addresses)
+				}
+			})
+		},
+		removeAddr: function (index) {
+			this.addresses.$remove(index);
+
+			// 发送事件
+			this.$emit("change", this.addresses)
+		},
+		updateAddr: function (index, addr) {
+			let that = this
+			window.UPDATING_ADDR = addr
+
+			let url = this.vUrl
+			if (url == null) {
+				url = "/servers/addPortPopup"
+			}
+
+			teaweb.popup(url + "?serverType=" + this.vServerType + "&protocol=" + this.protocol + "&from=" + this.from + "&supportRange=" + (this.supportRange() ? 1 : 0), {
+				height: "18em",
+				callback: function (resp) {
+					var addr = resp.data.address
+					Vue.set(that.addresses, index, addr)
+
+					if (["https", "https4", "https6"].$contains(addr.protocol)) {
+						this.tlsProtocolName = "HTTPS"
+					} else if (["tls", "tls4", "tls6"].$contains(addr.protocol)) {
+						this.tlsProtocolName = "TLS"
+					}
+
+					// 发送事件
+					that.$emit("change", that.addresses)
+				}
+			})
+
+			// 发送事件
+			this.$emit("change", this.addresses)
+		},
+		supportRange: function () {
+			return this.vSupportRange || (this.vServerType == "tcpProxy" || this.vServerType == "udpProxy")
+		},
+		edit: function () {
+			this.isEditing = true
+		}
+	},
+	template: `<div>
+	<input type="hidden" :name="name" :value="JSON.stringify(addresses)"/>
+	<div v-show="!isEditing">
+		<div v-if="addresses.length > 0">
+			<div class="ui label small basic" v-for="(addr, index) in addresses">
+				{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-if="addr.host.length == 0">*</span>:<span v-if="addr.portRange.indexOf('-')<0">{{addr.portRange}}</span><span v-else style="font-style: italic">{{addr.portRange}}</span>
+			</div>
+			&nbsp; &nbsp; <a href="" @click.prevent="edit" style="font-size: 0.9em">[修改]</a>
+		</div>	
+	</div>
+	<div v-show="isEditing || addresses.length == 0">
+		<div v-if="addresses.length > 0">
+			<div class="ui label small basic" v-for="(addr, index) in addresses">
+				{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-if="addr.host.length == 0">*</span>:<span v-if="addr.portRange.indexOf('-')<0">{{addr.portRange}}</span><span v-else style="font-style: italic">{{addr.portRange}}</span>
+				<a href="" @click.prevent="updateAddr(index, addr)" title="修改"><i class="icon pencil small"></i></a>
+				<a href="" @click.prevent="removeAddr(index)" title="删除"><i class="icon remove"></i></a> 
+			</div>
+			<div class="ui divider"></div>
+		</div>
+		<a href="" @click.prevent="addAddr()">[添加端口绑定]</a>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/network-addresses-view.js

@@ -0,0 +1,8 @@
+Vue.component("network-addresses-view", {
+	props: ["v-addresses"],
+	template: `<div>
+	<div class="ui label tiny basic" v-if="vAddresses != null" v-for="addr in vAddresses">
+		{{addr.protocol}}://<span v-if="addr.host.length > 0">{{addr.host.quoteIP()}}</span><span v-else>*</span>:{{addr.portRange}}
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/node-log-row.js

@@ -0,0 +1,12 @@
+Vue.component("node-log-row", {
+	props: ["v-log", "v-keyword"],
+	data: function () {
+		return {
+			log: this.vLog,
+			keyword: this.vKeyword
+		}
+	},
+	template: `<div>
+	<pre class="log-box" style="margin: 0; padding: 0"><span :class="{red:log.level == 'error', orange:log.level == 'warning', green: log.level == 'success'}"><span v-if="!log.isToday">[{{log.createdTime}}]</span><strong v-if="log.isToday">[{{log.createdTime}}]</strong><keyword :v-word="keyword">[{{log.tag}}]{{log.description}}</keyword></span> &nbsp; <span v-if="log.count > 1" class="ui label tiny" :class="{red:log.level == 'error', orange:log.level == 'warning'}">共{{log.count}}条</span> <span v-if="log.server != null && log.server.id > 0"><a :href="'/servers/server?serverId=' + log.server.id" class="ui label tiny basic">{{log.server.name}}</a></span></pre>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/node-role-name.js

@@ -0,0 +1,37 @@
+// 节点角色名称
+Vue.component("node-role-name", {
+	props: ["v-role"],
+	data: function () {
+		let roleName = ""
+		switch (this.vRole) {
+			case "node":
+				roleName = "边缘节点"
+				break
+			case "monitor":
+				roleName = "监控节点"
+				break
+			case "api":
+				roleName = "API节点"
+				break
+			case "user":
+				roleName = "用户平台"
+				break
+			case "admin":
+				roleName = "管理平台"
+				break
+			case "database":
+				roleName = "数据库节点"
+				break
+			case "dns":
+				roleName = "DNS节点"
+				break
+			case "report":
+				roleName = "区域监控终端"
+				break
+		}
+		return {
+			roleName: roleName
+		}
+	},
+	template: `<span>{{roleName}}</span>`
+})

EdgeAdmin/web/public/js/components/common/not-found-box.js

@@ -0,0 +1,7 @@
+Vue.component("not-found-box", {
+	props: ["message"],
+	template: `<div style="text-align: center; margin-top: 5em;">
+	<div style="font-size: 2em; margin-bottom: 1em"><i class="icon exclamation triangle large grey"></i></div>
+	<p class="comment">{{message}}<slot></slot></p>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/page-box.js

@@ -0,0 +1,16 @@
+Vue.component("page-box", {
+	data: function () {
+		return {
+			page: ""
+		}
+	},
+	created: function () {
+		let that = this;
+		setTimeout(function () {
+			that.page = Tea.Vue.page;
+		})
+	},
+	template: `<div>
+	<div class="page" v-html="page"></div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/page-size-selector.js

@@ -0,0 +1,33 @@
+Vue.component("page-size-selector", {
+	data: function () {
+		let query = window.location.search
+		let pageSize = 10
+		if (query.length > 0) {
+			query = query.substr(1)
+			let params = query.split("&")
+			params.forEach(function (v) {
+				let pieces = v.split("=")
+				if (pieces.length == 2 && pieces[0] == "pageSize") {
+					let pageSizeString = pieces[1]
+					if (pageSizeString.match(/^\d+$/)) {
+						pageSize = parseInt(pageSizeString, 10)
+						if (isNaN(pageSize) || pageSize < 1) {
+							pageSize = 10
+						}
+					}
+				}
+			})
+		}
+		return {
+			pageSize: pageSize
+		}
+	},
+	watch: {
+		pageSize: function () {
+			window.ChangePageSize(this.pageSize)
+		}
+	},
+	template: `<select class="ui dropdown" style="height:34px;padding-top:0;padding-bottom:0;margin-left:1em;color:#666" v-model="pageSize">
+\t<option value="10">[每页]</option><option value="10" selected="selected">10条</option><option value="20">20条</option><option value="30">30条</option><option value="40">40条</option><option value="50">50条</option><option value="60">60条</option><option value="70">70条</option><option value="80">80条</option><option value="90">90条</option><option value="100">100条</option>
+</select>`
+})

EdgeAdmin/web/public/js/components/common/provinces-selector.js

@@ -0,0 +1,51 @@
+Vue.component("provinces-selector", {
+	props: ["v-provinces"],
+	data: function () {
+		let provinces = this.vProvinces
+		if (provinces == null) {
+			provinces = []
+		}
+		let provinceIds = provinces.$map(function (k, v) {
+			return v.id
+		})
+		return {
+			provinces: provinces,
+			provinceIds: provinceIds
+		}
+	},
+	methods: {
+		add: function () {
+			let provinceStringIds = this.provinceIds.map(function (v) {
+				return v.toString()
+			})
+			let that = this
+			teaweb.popup("/ui/selectProvincesPopup?provinceIds=" + provinceStringIds.join(","), {
+				width: "48em",
+				height: "23em",
+				callback: function (resp) {
+					that.provinces = resp.data.provinces
+					that.change()
+				}
+			})
+		},
+		remove: function (index) {
+			this.provinces.$remove(index)
+			this.change()
+		},
+		change: function () {
+			this.provinceIds = this.provinces.$map(function (k, v) {
+				return v.id
+			})
+		}
+	},
+	template: `<div>
+	<input type="hidden" name="provinceIdsJSON" :value="JSON.stringify(provinceIds)"/>
+	<div v-if="provinces.length > 0" style="margin-bottom: 0.5em">
+		<div v-for="(province, index) in provinces" class="ui label tiny basic">{{province.name}} <a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove"></i></a></div>
+		<div class="ui divider"></div>
+	</div>
+	<div>
+		<button class="ui button tiny" type="button" @click.prevent="add">+</button>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/radio.js

@@ -0,0 +1,23 @@
+let radioId = 0
+Vue.component("radio", {
+	props: ["name", "value", "v-value", "id"],
+	data: function () {
+		radioId++
+		let elementId = this.id
+		if (elementId == null) {
+			elementId = "radio" + radioId
+		}
+		return {
+			"elementId": elementId
+		}
+	},
+	methods: {
+		change: function () {
+			this.$emit("input", this.vValue)
+		}
+	},
+	template: `<div class="ui checkbox radio">
+	<input type="radio" :name="name" :value="vValue" :id="elementId" @change="change" :checked="(vValue == value)"/>
+	<label :for="elementId"><slot></slot></label>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/raquo.js

@@ -0,0 +1,3 @@
+Vue.component("raquo-item", {
+	template: `<span class="item disabled" style="padding: 0">&raquo;</span>`
+})

EdgeAdmin/web/public/js/components/common/request-variables.js

@@ -0,0 +1,33 @@
+// 将变量转换为中文
+Vue.component("request-variables-describer", {
+	data: function () {
+		return {
+			vars:[]
+		}
+	},
+	methods: {
+		update: function (variablesString) {
+			this.vars = []
+			let that = this
+			variablesString.replace(/\${.+?}/g, function (v) {
+				let def = that.findVar(v)
+				if (def == null) {
+					return v
+				}
+				that.vars.push(def)
+			})
+		},
+		findVar: function (name) {
+			let def = null
+			window.REQUEST_VARIABLES.forEach(function (v) {
+				if (v.code == name) {
+					def = v
+				}
+			})
+			return def
+		}
+	},
+	template: `<span>
+	<span v-for="(v, index) in vars"><code-label :title="v.description">{{v.code}}</code-label> - {{v.name}}<span v-if="index < vars.length-1">；</span></span>
+</span>`
+})

EdgeAdmin/web/public/js/components/common/search-box.js

@@ -0,0 +1,33 @@
+Vue.component("search-box", {
+	props: ["placeholder", "width"],
+	data: function () {
+		let width = this.width
+		if (width == null) {
+			width = "10em"
+		}
+		return {
+			realWidth: width,
+			realValue: ""
+		}
+	},
+	methods: {
+		onInput: function () {
+			this.$emit("input", { value: this.realValue})
+			this.$emit("change", { value: this.realValue})
+		},
+		clearValue: function () {
+			this.realValue = ""
+			this.focus()
+			this.onInput()
+		},
+		focus: function () {
+			this.$refs.valueRef.focus()
+		}
+	},
+	template: `<div>
+	<div class="ui input small" :class="{'right labeled': realValue.length > 0}">
+		<input type="text" :placeholder="placeholder" :style="{width: realWidth}" @input="onInput" v-model="realValue" ref="valueRef"/>
+		<a href="" class="ui label blue" v-if="realValue.length > 0" @click.prevent="clearValue" style="padding-right: 0"><i class="icon remove"></i></a>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/second-menu.js

@@ -0,0 +1,12 @@
+/**
+ * 二级菜单
+ */
+Vue.component("second-menu", {
+	template: ' \
+		<div class="second-menu"> \
+			<div class="ui menu text blue small">\
+				<slot></slot>\
+			</div> \
+			<div class="ui divider"></div> \
+		</div>'
+});

EdgeAdmin/web/public/js/components/common/size-capacity-box.js

@@ -0,0 +1,75 @@
+Vue.component("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 (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="byte" v-if="supportedUnits.length == 0 || supportedUnits.$contains('byte')">字节</option>
+			<option value="kb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('kb')">KiB</option>
+			<option value="mb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('mb')">MiB</option>
+			<option value="gb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('gb')">GiB</option>
+			<option value="tb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('tb')">TiB</option>
+			<option value="pb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('pb')">PiB</option>
+			<option value="eb" v-if="supportedUnits.length == 0 || supportedUnits.$contains('eb')">EiB</option>
+		</select>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/size-capacity-view.js

@@ -0,0 +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">{{composeCapacity(vValue)}}</span>
+	<span v-else>{{vDefaultText}}</span>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/sort-arrow.js

@@ -0,0 +1,53 @@
+// 排序使用的箭头
+Vue.component("sort-arrow", {
+	props: ["name"],
+	data: function () {
+		let url = window.location.toString()
+		let order = ""
+		let iconTitle = ""
+		let newArgs = []
+		if (window.location.search != null && window.location.search.length > 0) {
+			let queryString = window.location.search.substring(1)
+			let pieces = queryString.split("&")
+			let that = this
+			pieces.forEach(function (v) {
+				let eqIndex = v.indexOf("=")
+				if (eqIndex > 0) {
+					let argName = v.substring(0, eqIndex)
+					let argValue = v.substring(eqIndex + 1)
+					if (argName == that.name) {
+						order = argValue
+					} else if (argName != "page" && argValue != "asc" && argValue != "desc") {
+						newArgs.push(v)
+					}
+				} else {
+					newArgs.push(v)
+				}
+			})
+		}
+		if (order == "asc") {
+			newArgs.push(this.name + "=desc")
+			iconTitle = "当前正序排列"
+		} else if (order == "desc") {
+			newArgs.push(this.name + "=asc")
+			iconTitle = "当前倒序排列"
+		} else {
+			newArgs.push(this.name + "=desc")
+			iconTitle = "当前正序排列"
+		}
+
+		let qIndex = url.indexOf("?")
+		if (qIndex > 0) {
+			url = url.substring(0, qIndex) + "?" + newArgs.join("&")
+		} else {
+			url = url + "?" + newArgs.join("&")
+		}
+
+		return {
+			order: order,
+			url: url,
+			iconTitle: iconTitle
+		}
+	},
+	template: `<a :href="url" :title="iconTitle">&nbsp; <i class="ui icon long arrow small" :class="{down: order == 'asc', up: order == 'desc', 'down grey': order == '' || order == null}"></i></a>`
+})

EdgeAdmin/web/public/js/components/common/sortable.js

@@ -0,0 +1,39 @@
+// 给Table增加排序功能
+function sortTable(callback) {
+	// 引入js
+	let jsFile = document.createElement("script")
+	jsFile.setAttribute("src", "/js/sortable.min.js")
+	jsFile.addEventListener("load", function () {
+		// 初始化
+		let box = document.querySelector("#sortable-table")
+		if (box == null) {
+			return
+		}
+		Sortable.create(box, {
+			draggable: "tbody",
+			handle: ".icon.handle",
+			onStart: function () {
+			},
+			onUpdate: function (event) {
+				let rows = box.querySelectorAll("tbody")
+				let rowIds = []
+				rows.forEach(function (row) {
+					rowIds.push(parseInt(row.getAttribute("v-id")))
+				})
+				callback(rowIds)
+			}
+		})
+	})
+	document.head.appendChild(jsFile)
+}
+
+function sortLoad(callback) {
+	let jsFile = document.createElement("script")
+	jsFile.setAttribute("src", "/js/sortable.min.js")
+	jsFile.addEventListener("load", function () {
+		if (typeof (callback) == "function") {
+			callback()
+		}
+	})
+	document.head.appendChild(jsFile)
+}

EdgeAdmin/web/public/js/components/common/source-code-box.js

@@ -0,0 +1,93 @@
+let sourceCodeBoxIndex = 0
+
+Vue.component("source-code-box", {
+	props: ["name", "type", "id", "read-only", "width", "height", "focus"],
+	mounted: function () {
+		let readOnly = this.readOnly
+		if (typeof readOnly != "boolean") {
+			readOnly = true
+		}
+		let box = document.getElementById("source-code-box-" + this.index)
+		let valueBox = document.getElementById(this.valueBoxId)
+		let value = ""
+		if (valueBox.textContent != null) {
+			value = valueBox.textContent
+		} else if (valueBox.innerText != null) {
+			value = valueBox.innerText
+		}
+
+		this.createEditor(box, value, readOnly)
+	},
+	data: function () {
+		let index = sourceCodeBoxIndex++
+
+		let valueBoxId = 'source-code-box-value-' + sourceCodeBoxIndex
+		if (this.id != null) {
+			valueBoxId = this.id
+		}
+
+		return {
+			index: index,
+			valueBoxId: valueBoxId
+		}
+	},
+	methods: {
+		createEditor: function (box, value, readOnly) {
+			let boxEditor = CodeMirror.fromTextArea(box, {
+				theme: "idea",
+				lineNumbers: true,
+				value: "",
+				readOnly: readOnly,
+				showCursorWhenSelecting: true,
+				height: "auto",
+				//scrollbarStyle: null,
+				viewportMargin: Infinity,
+				lineWrapping: true,
+				highlightFormatting: false,
+				indentUnit: 4,
+				indentWithTabs: true,
+			})
+			let that = this
+			boxEditor.on("change", function () {
+				that.change(boxEditor.getValue())
+			})
+			boxEditor.setValue(value)
+
+			if (this.focus) {
+				boxEditor.focus()
+			}
+
+			let width = this.width
+			let height = this.height
+			if (width != null && height != null) {
+				width = parseInt(width)
+				height = parseInt(height)
+				if (!isNaN(width) && !isNaN(height)) {
+					if (width <= 0) {
+						width = box.parentNode.offsetWidth
+					}
+					boxEditor.setSize(width, height)
+				}
+			} else if (height != null) {
+				height = parseInt(height)
+				if (!isNaN(height)) {
+					boxEditor.setSize("100%", height)
+				}
+			}
+
+			let info = CodeMirror.findModeByMIME(this.type)
+			if (info != null) {
+				boxEditor.setOption("mode", info.mode)
+				CodeMirror.modeURL = "/codemirror/mode/%N/%N.js"
+				CodeMirror.autoLoadMode(boxEditor, info.mode)
+			}
+		},
+		change: function (code) {
+			this.$emit("change", code)
+		}
+	},
+	template: `<div class="source-code-box">
+	<div style="display: none" :id="valueBoxId"><slot></slot></div>
+	<textarea :id="'source-code-box-' + index" :name="name"></textarea>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/submit-btn.js

@@ -0,0 +1,6 @@
+/**
+ * 保存按钮
+ */
+Vue.component("submit-btn", {
+	template: '<button class="ui button primary" type="submit"><slot>保存</slot></button>'
+});

EdgeAdmin/web/public/js/components/common/time-duration-box.js

@@ -0,0 +1,119 @@
+Vue.component("time-duration-box", {
+	props: ["v-name", "v-value", "v-count", "v-unit", "placeholder", "v-min-unit", "maxlength"],
+	mounted: function () {
+		this.change()
+	},
+	data: function () {
+		let v = this.vValue
+		if (v == null) {
+			v = {
+				count: this.vCount,
+				unit: this.vUnit
+			}
+		}
+		if (typeof (v["count"]) != "number") {
+			v["count"] = -1
+		}
+
+		let minUnit = this.vMinUnit
+		let units = [
+			{
+				code: "ms",
+				name: "毫秒"
+			},
+			{
+				code: "second",
+				name: "秒"
+			},
+			{
+				code: "minute",
+				name: "分钟"
+			},
+			{
+				code: "hour",
+				name: "小时"
+			},
+			{
+				code: "day",
+				name: "天"
+			}
+		]
+		let minUnitIndex = -1
+		if (minUnit != null && typeof minUnit == "string" && minUnit.length > 0) {
+			for (let i = 0; i < units.length; i++) {
+				if (units[i].code == minUnit) {
+					minUnitIndex = i
+					break
+				}
+			}
+		}
+		if (minUnitIndex > -1) {
+			units = units.slice(minUnitIndex)
+		}
+
+		let maxLength = parseInt(this.maxlength)
+		if (typeof maxLength != "number") {
+			maxLength = 10
+		}
+
+		return {
+			duration: v,
+			countString: (v.count >= 0) ? v.count.toString() : "",
+			units: units,
+			realMaxLength: maxLength
+		}
+	},
+	watch: {
+		"countString": function (newValue) {
+			let value = newValue.trim()
+			if (value.length == 0) {
+				this.duration.count = -1
+				return
+			}
+			let count = parseInt(value)
+			if (!isNaN(count)) {
+				this.duration.count = count
+			}
+			this.change()
+		}
+	},
+	methods: {
+		change: function () {
+			this.$emit("change", this.duration)
+		}
+	},
+	template: `<div class="ui fields inline" style="padding-bottom: 0; margin-bottom: 0">
+	<input type="hidden" :name="vName" :value="JSON.stringify(duration)"/>
+	<div class="ui field">
+		<input type="text" v-model="countString" :maxlength="realMaxLength" :size="realMaxLength" :placeholder="placeholder" @keypress.enter.prevent="1"/>
+	</div>
+	<div class="ui field">
+		<select class="ui dropdown" v-model="duration.unit" @change="change">
+			<option v-for="unit in units" :value="unit.code">{{unit.name}}</option>
+		</select>
+	</div>
+</div>`
+})
+
+Vue.component("time-duration-text", {
+	props: ["v-value"],
+	methods: {
+		unitName: function (unit) {
+			switch (unit) {
+				case "ms":
+					return "毫秒"
+				case "second":
+					return "秒"
+				case "minute":
+					return "分钟"
+				case "hour":
+					return "小时"
+				case "day":
+					return "天"
+			}
+		}
+	},
+	template: `<span>
+	{{vValue.count}} {{unitName(vValue.unit)}}
+</span>`
+})

EdgeAdmin/web/public/js/components/common/tip-message-box.js

@@ -0,0 +1,37 @@
+// 信息提示窗口
+Vue.component("tip-message-box", {
+	props: ["code"],
+	mounted: function () {
+		let that = this
+		Tea.action("/ui/showTip")
+			.params({
+				code: this.code
+			})
+			.success(function (resp) {
+				that.visible = resp.data.visible
+			})
+			.post()
+	},
+	data: function () {
+		return {
+			visible: false
+		}
+	},
+	methods: {
+		close: function () {
+			this.visible = false
+			Tea.action("/ui/hideTip")
+				.params({
+					code: this.code
+				})
+				.post()
+		}
+	},
+	template: `<div class="ui icon message" v-if="visible">
+	<i class="icon info circle"></i>
+	<i class="close icon" title="取消" @click.prevent="close" style="margin-top: 1em"></i>
+	<div class="content">
+		<slot></slot>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/url-patterns-box.js

@@ -0,0 +1,149 @@
+Vue.component("url-patterns-box", {
+	props: ["value"],
+	data: function () {
+		let patterns = []
+		if (this.value != null) {
+			patterns = this.value
+		}
+
+		return {
+			patterns: patterns,
+			isAdding: false,
+
+			addingPattern: {"type": "wildcard", "pattern": ""},
+			editingIndex: -1,
+
+			patternIsInvalid: false,
+
+			windowIsSmall: window.innerWidth < 600
+		}
+	},
+	methods: {
+		add: function () {
+			this.isAdding = true
+			let that = this
+			setTimeout(function () {
+				that.$refs.patternInput.focus()
+			})
+		},
+		edit: function (index) {
+			this.isAdding = true
+			this.editingIndex = index
+			this.addingPattern = {
+				type: this.patterns[index].type,
+				pattern: this.patterns[index].pattern
+			}
+		},
+		confirm: function () {
+			if (this.requireURL(this.addingPattern.type)) {
+				let pattern = this.addingPattern.pattern.trim()
+				if (pattern.length == 0) {
+					let that = this
+					teaweb.warn("请输入URL", function () {
+						that.$refs.patternInput.focus()
+					})
+					return
+				}
+			}
+			if (this.editingIndex < 0) {
+				this.patterns.push({
+					type: this.addingPattern.type,
+					pattern: this.addingPattern.pattern
+				})
+			} else {
+				this.patterns[this.editingIndex].type = this.addingPattern.type
+				this.patterns[this.editingIndex].pattern = this.addingPattern.pattern
+			}
+			this.notifyChange()
+			this.cancel()
+		},
+		remove: function (index) {
+			this.patterns.$remove(index)
+			this.cancel()
+			this.notifyChange()
+		},
+		cancel: function () {
+			this.isAdding = false
+			this.addingPattern = {"type": "wildcard", "pattern": ""}
+			this.editingIndex = -1
+		},
+		patternTypeName: function (patternType) {
+			switch (patternType) {
+				case "wildcard":
+					return "通配符"
+				case "regexp":
+					return "正则"
+				case "images":
+					return "常见图片文件"
+				case "audios":
+					return "常见音频文件"
+				case "videos":
+					return "常见视频文件"
+			}
+			return ""
+		},
+		notifyChange: function () {
+			this.$emit("input", this.patterns)
+		},
+		changePattern: function () {
+			this.patternIsInvalid = false
+			let pattern = this.addingPattern.pattern
+			switch (this.addingPattern.type) {
+				case "wildcard":
+					if (pattern.indexOf("?") >= 0) {
+						this.patternIsInvalid = true
+					}
+					break
+				case "regexp":
+					if (pattern.indexOf("?") >= 0) {
+						let pieces = pattern.split("?")
+						for (let i = 0; i < pieces.length - 1; i++) {
+							if (pieces[i].length == 0 || pieces[i][pieces[i].length - 1] != "\\") {
+								this.patternIsInvalid = true
+							}
+						}
+					}
+					break
+			}
+		},
+		requireURL: function (patternType) {
+			return patternType == "wildcard" || patternType == "regexp"
+		}
+	},
+	template: `<div>
+	<div v-show="patterns.length > 0">
+		<div v-for="(pattern, index) in patterns" class="ui label basic small" :class="{blue: index == editingIndex, disabled: isAdding && index != editingIndex}" style="margin-bottom: 0.8em">
+			<span class="grey" style="font-weight: normal">[{{patternTypeName(pattern.type)}}]</span> <span >{{pattern.pattern}}</span> &nbsp; 
+			<a href="" title="修改" @click.prevent="edit(index)"><i class="icon pencil tiny"></i></a> 
+			<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
+		</div>
+	</div>
+	<div v-show="isAdding" style="margin-top: 0.5em">
+		<div :class="{'ui fields inline': !windowIsSmall}">
+			<div class="ui field">
+				<select class="ui dropdown auto-width" v-model="addingPattern.type">
+					<option value="wildcard">通配符</option>
+					<option value="regexp">正则表达式</option>
+					<option value="images">常见图片</option>
+					<option value="audios">常见音频</option>
+					<option value="videos">常见视频</option>
+				</select>
+			</div>
+			<div class="ui field" v-show="addingPattern.type == 'wildcard' || addingPattern.type ==  'regexp'">
+				<input type="text" :placeholder="(addingPattern.type == 'wildcard') ? '可以使用星号（*）通配符，不区分大小写' : '可以使用正则表达式，不区分大小写'" v-model="addingPattern.pattern" @input="changePattern" size="36" ref="patternInput" @keyup.enter="confirm()" @keypress.enter.prevent="1" spellcheck="false"/>
+				<p class="comment" v-if="patternIsInvalid"><span class="red" style="font-weight: normal"><span v-if="addingPattern.type == 'wildcard'">通配符</span><span v-if="addingPattern.type == 'regexp'">正则表达式</span>中不能包含问号（?）及问号以后的内容。</span></p>
+			</div>
+			<div class="ui field" style="padding-left: 0"  v-show="addingPattern.type == 'wildcard' || addingPattern.type ==  'regexp'">
+				<tip-icon content="通配符示例：<br/>单个路径开头：/hello/world/*<br/>单个路径结尾：*/hello/world<br/>包含某个路径：*/article/*<br/>某个域名下的所有URL：*example.com/*<br/>忽略某个扩展名：*.js" v-if="addingPattern.type == 'wildcard'"></tip-icon>
+				<tip-icon content="正则表达式示例：<br/>单个路径开头：^/hello/world<br/>单个路径结尾：/hello/world$<br/>包含某个路径：/article/<br/>匹配某个数字路径：/article/(\\d+)<br/>某个域名下的所有URL：^(http|https)://example.com/" v-if="addingPattern.type == 'regexp'"></tip-icon>
+			</div>
+			<div class="ui field">
+				<button class="ui button tiny" :class="{disabled:this.patternIsInvalid}" type="button" @click.prevent="confirm">确定</button><a href="" title="取消" @click.prevent="cancel"><i class="icon remove small"></i></a>
+			</div>
+		</div>
+	</div>
+	<div v-if=!isAdding style="margin-top: 0.5em">
+		<button class="ui button tiny basic" type="button" @click.prevent="add">+</button>
+	</div>
+</div>`
+})

EdgeAdmin/web/public/js/components/common/values-box.js

@@ -0,0 +1,132 @@
+Vue.component("values-box", {
+	props: ["values", "v-values", "size", "maxlength", "name", "placeholder", "v-allow-empty", "validator"],
+	data: function () {
+		let values = this.values;
+		if (values == null) {
+			values = [];
+		}
+
+		if (this.vValues != null && typeof this.vValues == "object") {
+			values = this.vValues
+		}
+
+		return {
+			"realValues": values,
+			"isUpdating": false,
+			"isAdding": false,
+			"index": 0,
+			"value": "",
+			isEditing: false
+		}
+	},
+	methods: {
+		create: function () {
+			this.isAdding = true;
+			var that = this;
+			setTimeout(function () {
+				that.$refs.value.focus();
+			}, 200);
+		},
+		update: function (index) {
+			this.cancel()
+			this.isUpdating = true;
+			this.index = index;
+			this.value = this.realValues[index];
+			var that = this;
+			setTimeout(function () {
+				that.$refs.value.focus();
+			}, 200);
+		},
+		confirm: function () {
+			if (this.value.length == 0) {
+				if (typeof(this.vAllowEmpty) != "boolean" || !this.vAllowEmpty) {
+					return
+				}
+			}
+
+			// validate
+			if (typeof(this.validator) == "function") {
+				let resp = this.validator.call(this, this.value)
+				if (typeof resp == "object") {
+					if (typeof resp.isOk == "boolean" && !resp.isOk) {
+						if (typeof resp.message == "string") {
+							let that = this
+							teaweb.warn(resp.message, function () {
+								that.$refs.value.focus();
+							})
+						}
+						return
+					}
+				}
+			}
+
+			if (this.isUpdating) {
+				Vue.set(this.realValues, this.index, this.value);
+			} else {
+				this.realValues.push(this.value);
+			}
+			this.cancel()
+			this.$emit("change", this.realValues)
+		},
+		remove: function (index) {
+			this.realValues.$remove(index)
+			this.$emit("change", this.realValues)
+		},
+		cancel: function () {
+			this.isUpdating = false;
+			this.isAdding = false;
+			this.value = "";
+		},
+		updateAll: function (values) {
+			this.realValues = values
+		},
+		addValue: function (v) {
+			this.realValues.push(v)
+		},
+
+		startEditing: function () {
+			this.isEditing = !this.isEditing
+		},
+		allValues: function () {
+			return this.realValues
+		}
+	},
+	template: `<div>
+	<div v-show="!isEditing && realValues.length > 0">
+		<div class="ui label tiny basic" v-for="(value, index) in realValues" style="margin-top:0.4em;margin-bottom:0.4em">
+			<span v-if="value.toString().length > 0">{{value}}</span>
+			<span v-if="value.toString().length == 0" class="disabled">[空]</span>
+		</div>
+		<a href="" @click.prevent="startEditing" style="font-size: 0.8em; margin-left: 0.2em">[修改]</a>
+	</div>
+	<div v-show="isEditing || realValues.length == 0">
+		<div style="margin-bottom: 1em" v-if="realValues.length > 0">
+			<div class="ui label tiny basic" v-for="(value, index) in realValues" style="margin-top:0.4em;margin-bottom:0.4em">
+				<span v-if="value.toString().length > 0">{{value}}</span>
+				<span v-if="value.toString().length == 0" class="disabled">[空]</span>
+				<input type="hidden" :name="name" :value="value"/>
+				&nbsp; <a href="" @click.prevent="update(index)" title="修改"><i class="icon pencil small" ></i></a> 
+				<a href="" @click.prevent="remove(index)" title="删除"><i class="icon remove"></i></a> 
+			</div> 
+			<div class="ui divider"></div>
+		</div> 
+		<!-- 添加|修改 -->
+		<div v-if="isAdding || isUpdating">
+			<div class="ui fields inline">
+				<div class="ui field">
+					<input type="text" :size="size" :maxlength="maxlength" :placeholder="placeholder" v-model="value" ref="value" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
+				</div> 
+				<div class="ui field">
+					<button class="ui button small" type="button" @click.prevent="confirm()">确定</button> 
+				</div>
+				<div class="ui field">
+					<a href="" @click.prevent="cancel()" title="取消"><i class="icon remove small"></i></a> 
+				</div> 
+			</div> 
+		</div> 
+		<div v-if="!isAdding && !isUpdating">
+			<button class="ui button tiny" type="button" @click.prevent="create()">+</button> 
+		</div>
+	</div>	
+</div>`
+});

EdgeAdmin/web/public/js/components/common/warning-message.js

@@ -0,0 +1,4 @@
+// 警告消息
+Vue.component("warning-message", {
+	template: `<div class="ui icon message warning"><i class="icon warning circle"></i><div class="content"><slot></slot></div></div>`
+})