feat:页面header添加主题切换

src/layout/components/userbar.vue

@@ -52,7 +52,19 @@
       </el-drawer>
     </div> -->
 		<!-- <el-button @click="markRead">全部设为已读</el-button> -->
-    <el-dropdown class="user panel-item" trigger="click" @command="handleUser">
+		<div class="login_config">
+			<el-button
+				:icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'"
+				circle
+				type="info"
+				@click="configDark"
+			></el-button>
+		</div>
+		<el-dropdown
+			class="user panel-item"
+			trigger="click"
+			@command="handleUser"
+		>
 			<div class="user-avatar">
 				<el-avatar :size="34" shape="square">{{ userNameF }}</el-avatar>
 				<label>{{ userName }}</label>
@@ -64,13 +76,22 @@
 				<el-dropdown-menu>
 					<el-dropdown-item command="uc">帐号信息</el-dropdown-item>
 					<!-- <el-dropdown-item command="clearCache">清除缓存</el-dropdown-item> -->
-          <el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
+					<el-dropdown-item divided command="outLogin"
+						>退出登录</el-dropdown-item
+					>
 				</el-dropdown-menu>
 			</template>
 		</el-dropdown>
 	</div>
 
-  <el-dialog v-model="searchVisible" :width="700" title="搜索" class="drawerBG" center destroy-on-close>
+	<el-dialog
+		v-model="searchVisible"
+		:width="700"
+		title="搜索"
+		class="drawerBG"
+		center
+		destroy-on-close
+	>
 		<search @success="searchVisible = false"></search>
 	</el-dialog>
 </template>
@@ -89,17 +110,34 @@ export default {
 			searchVisible: false,
 			msg: false,
 			msgList: {},
+			config: {
+				lang: this.$TOOL.data.get("APP_LANG") || this.$CONFIG.LANG,
+				dark: this.$TOOL.data.get("APP_DARK") || false,
+			},
 		};
 	},
+	watch: {
+		"config.dark"(val) {
+			if (val) {
+				document.documentElement.classList.add("dark");
+				this.$TOOL.data.set("APP_DARK", val);
+			} else {
+				document.documentElement.classList.remove("dark");
+				this.$TOOL.data.remove("APP_DARK");
+			}
+		},
+	},
 	created() {
 		var userInfo = this.$TOOL.data.get("USER_INFO");
 		this.userName = userInfo.username;
 		this.userNameF = this.userName.substring(0, 1);
-
 	},
 	methods: {
 		openBook() {
-      window.open('/media/ehs_guide.pdf')
+			window.open("/media/ehs_guide.pdf");
+		},
+		configDark() {
+			this.config.dark = this.config.dark ? false : true;
 		},
 		getMyVents() {
 			this.$API.ecm.myevent.list
@@ -109,7 +147,7 @@ export default {
 				});
 		},
 		goEvent() {
-      this.$router.push({ name: "event" })
+			this.$router.push({ name: "event" });
 		},
 		createhandele(id) {
 			this.$router.push({
@@ -165,8 +203,12 @@ export default {
 					confirmButtonClass: "el-button--danger",
 				})
 					.then(() => {
-            this.$TOOL.data.remove("TOKEN")
+						this.$TOOL.data.remove("TOKEN");
-            this.$router.push(`/login?redirect=${this.$route.fullPath}`).then(() => { location.reload() })
+						this.$router
+							.push(`/login?redirect=${this.$route.fullPath}`)
+							.then(() => {
+								location.reload();
+							});
 					})
 					.catch(() => {
 						//取消退出