diff --git a/web/public/js/components/server/http-charsets-box.js b/web/public/js/components/server/http-charsets-box.js
index 94bb8bbb..34e7e87c 100644
--- a/web/public/js/components/server/http-charsets-box.js
+++ b/web/public/js/components/server/http-charsets-box.js
@@ -6,11 +6,18 @@ Vue.component("http-charsets-box", {
 			charsetConfig = {
 				isPrior: false,
 				isOn: false,
-				charset: ""
+				charset: "",
+				isUpper: false
 			}
 		}
 		return {
-			charsetConfig: charsetConfig
+			charsetConfig: charsetConfig,
+			advancedVisible: false
+		}
+	},
+	methods: {
+		changeAdvancedVisible: function (v) {
+			this.advancedVisible = v
 		}
 	},
 	template: `<div>
@@ -41,6 +48,19 @@ Vue.component("http-charsets-box", {
 				</td>
 			</tr>
 		</tbody>
+		<more-options-tbody @change="changeAdvancedVisible" v-if="(!vIsLocation || charsetConfig.isPrior) && charsetConfig.isOn"></more-options-tbody>
+		<tbody v-show="(!vIsLocation || charsetConfig.isPrior) && charsetConfig.isOn && advancedVisible">
+			<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>
+				</td>
+			</tr>
+		</tbody>
 	</table>
 	<div class="margin"></div>
 </div>`
diff --git a/web/public/js/components/server/http-web-root-box.js b/web/public/js/components/server/http-web-root-box.js
index 92a5de84..adca7903 100644
--- a/web/public/js/components/server/http-web-root-box.js
+++ b/web/public/js/components/server/http-web-root-box.js
@@ -36,6 +36,9 @@ Vue.component("http-web-root-box", {
 		},
 		removeIndex: function (i) {
 			this.rootConfig.indexes.$remove(i)
+		},
+		isOn: function () {
+			return (!this.vIsLocation || this.rootConfig.isPrior) && this.rootConfig.isOn
 		}
 	},
 	template: `<div>
@@ -44,7 +47,7 @@ Vue.component("http-web-root-box", {
 		<prior-checkbox :v-config="rootConfig" v-if="vIsLocation"></prior-checkbox>
 		<tbody v-show="!vIsLocation || rootConfig.isPrior">
 			<tr>
-				<td>是否开启</td>
+				<td class="title">是否开启</td>
 				<td>
 					<div class="ui checkbox">
 						<input type="checkbox" v-model="rootConfig.isOn"/>
@@ -52,6 +55,8 @@ Vue.component("http-web-root-box", {
 					</div>
 				</td>
 			</tr>
+		</tbody>
+		<tbody v-show="isOn()">
 			<tr>
 				<td class="title">文档根目录</td>
 				<td>
@@ -60,9 +65,9 @@ Vue.component("http-web-root-box", {
 				</td>
 			</tr>
 		</tbody>
-		<more-options-tbody @change="changeAdvancedVisible" v-if="!vIsLocation || rootConfig.isPrior"></more-options-tbody>
+		<more-options-tbody @change="changeAdvancedVisible" v-if="isOn()"></more-options-tbody>
 
-		<tbody v-show="(!vIsLocation || rootConfig.isPrior) && advancedVisible">
+		<tbody v-show="isOn() && advancedVisible">
 			<tr>
 				<td>首页文件</td>
 				<td>