From 6fe3ab6eb9d2a2219d813e529ec2a9c36f4e3871 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 9 Apr 2024 10:25:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=A1=B5=E9=9D=A2header=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/userbar.vue | 400 +++++++++++++++++-------------
 1 file changed, 221 insertions(+), 179 deletions(-)

diff --git a/src/layout/components/userbar.vue b/src/layout/components/userbar.vue
index 78cbb47c..f89a901a 100644
--- a/src/layout/components/userbar.vue
+++ b/src/layout/components/userbar.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="user-bar">
-    <div class="screen panel-item hidden-sm-and-down" @click="screen">
-      <el-icon>
-        <el-icon-full-screen />
-      </el-icon>
-    </div>
-    <!-- <div class="panel-item hidden-sm-and-down" @click="openBook">
+	<div class="user-bar">
+		<div class="screen panel-item hidden-sm-and-down" @click="screen">
+			<el-icon>
+				<el-icon-full-screen />
+			</el-icon>
+		</div>
+		<!-- <div class="panel-item hidden-sm-and-down" @click="openBook">
       <el-icon>
         <el-icon-files />
       </el-icon>
     </div> -->
-    <!-- <div class="msg panel-item" @click="showMsg">
+		<!-- <div class="msg panel-item" @click="showMsg">
       <el-badge :hidden="msgList.length == 0" :value="msgList.length" class="badge" type="danger">
         <el-icon>
           <el-icon-chat-dot-round />
@@ -51,236 +51,278 @@
         </el-container>
       </el-drawer>
     </div> -->
-    <!-- <el-button @click="markRead">全部设为已读</el-button> -->
-    <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>
-        <el-icon class="el-icon--right">
-          <el-icon-arrow-down />
-        </el-icon>
-      </div>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item command="uc">帐号信息</el-dropdown-item>
-          <!-- <el-dropdown-item command="clearCache">清除缓存</el-dropdown-item> -->
-          <el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-  </div>
+		<!-- <el-button @click="markRead">全部设为已读</el-button> -->
+		<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>
+				<el-icon class="el-icon--right">
+					<el-icon-arrow-down />
+				</el-icon>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="uc">帐号信息</el-dropdown-item>
+					<!-- <el-dropdown-item command="clearCache">清除缓存</el-dropdown-item> -->
+					<el-dropdown-item divided command="outLogin"
+						>退出登录</el-dropdown-item
+					>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+	</div>
 
-  <el-dialog v-model="searchVisible" :width="700" title="搜索" class="drawerBG" center destroy-on-close>
-    <search @success="searchVisible = false"></search>
-  </el-dialog>
+	<el-dialog
+		v-model="searchVisible"
+		:width="700"
+		title="搜索"
+		class="drawerBG"
+		center
+		destroy-on-close
+	>
+		<search @success="searchVisible = false"></search>
+	</el-dialog>
 </template>
 
 <script>
 import search from "./search.vue";
 
 export default {
-  components: {
-    search,
-  },
-  data() {
-    return {
-      userName: "",
-      userNameF: "",
-      searchVisible: false,
-      msg: false,
-      msgList: {},
-    };
-  },
-  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')
-    },
-    getMyVents() {
-      this.$API.ecm.myevent.list
-        .req({ is_read: false, page: 0 })
-        .then((res) => {
-          this.msgList = res;
-        });
-    },
-    goEvent() {
-      this.$router.push({ name: "event" })
-    },
-    createhandele(id) {
-      this.$router.push({
-        name: "eventhandlefrom",
-        query: {
-          id: id,
-        },
-      });
-      this.msg = false;
-    },
-    handele(id) {
-      this.$router.push({
-        name: "eventhandlefrom",
-        query: {
-          id: id,
-        },
-      });
-      this.msg = false;
-    },
-    //个人信息
-    handleUser(command) {
-      if (command == "uc") {
-        this.$router.push({ path: "/usercenter" });
-      }
-      if (command == "cmd") {
-        this.$router.push({ path: "/cmd" });
-      }
-      if (command == "clearCache") {
-        this.$confirm(
-          "清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？",
-          "提示",
-          {
-            type: "info",
-          }
-        )
-          .then(() => {
-            const loading = this.$loading();
-            this.$TOOL.data.clear();
-            this.$router.replace({ path: "/login" });
-            setTimeout(() => {
-              loading.close();
-              location.reload();
-            }, 1000);
-          })
-          .catch(() => {
-            //取消
-          });
-      }
-      if (command == "outLogin") {
-        this.$confirm("确认是否退出当前用户？", "提示", {
-          type: "warning",
-          confirmButtonText: "退出",
-          confirmButtonClass: "el-button--danger",
-        })
-          .then(() => {
-            this.$TOOL.data.remove("TOKEN")
-            this.$router.push(`/login?redirect=${this.$route.fullPath}`).then(() => { location.reload() })
-          })
-          .catch(() => {
-            //取消退出
-          });
-      }
-    },
-    //全屏
-    screen() {
-      var element = document.documentElement;
-      this.$TOOL.screen(element);
-    },
-    //显示短消息
-    showMsg() {
-      this.msg = true;
-      this.getMyVents();
-    },
-    //标记已读
-    markRead() {
-      this.msgList = [];
-    },
-    //搜索
-    search() {
-      this.searchVisible = true;
-    },
-  },
+	components: {
+		search,
+	},
+	data() {
+		return {
+			userName: "",
+			userNameF: "",
+			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");
+		},
+		configDark() {
+			this.config.dark = this.config.dark ? false : true;
+		},
+		getMyVents() {
+			this.$API.ecm.myevent.list
+				.req({ is_read: false, page: 0 })
+				.then((res) => {
+					this.msgList = res;
+				});
+		},
+		goEvent() {
+			this.$router.push({ name: "event" });
+		},
+		createhandele(id) {
+			this.$router.push({
+				name: "eventhandlefrom",
+				query: {
+					id: id,
+				},
+			});
+			this.msg = false;
+		},
+		handele(id) {
+			this.$router.push({
+				name: "eventhandlefrom",
+				query: {
+					id: id,
+				},
+			});
+			this.msg = false;
+		},
+		//个人信息
+		handleUser(command) {
+			if (command == "uc") {
+				this.$router.push({ path: "/usercenter" });
+			}
+			if (command == "cmd") {
+				this.$router.push({ path: "/cmd" });
+			}
+			if (command == "clearCache") {
+				this.$confirm(
+					"清除缓存会将系统初始化，包括登录状态、主题、语言设置等，是否继续？",
+					"提示",
+					{
+						type: "info",
+					}
+				)
+					.then(() => {
+						const loading = this.$loading();
+						this.$TOOL.data.clear();
+						this.$router.replace({ path: "/login" });
+						setTimeout(() => {
+							loading.close();
+							location.reload();
+						}, 1000);
+					})
+					.catch(() => {
+						//取消
+					});
+			}
+			if (command == "outLogin") {
+				this.$confirm("确认是否退出当前用户？", "提示", {
+					type: "warning",
+					confirmButtonText: "退出",
+					confirmButtonClass: "el-button--danger",
+				})
+					.then(() => {
+						this.$TOOL.data.remove("TOKEN");
+						this.$router
+							.push(`/login?redirect=${this.$route.fullPath}`)
+							.then(() => {
+								location.reload();
+							});
+					})
+					.catch(() => {
+						//取消退出
+					});
+			}
+		},
+		//全屏
+		screen() {
+			var element = document.documentElement;
+			this.$TOOL.screen(element);
+		},
+		//显示短消息
+		showMsg() {
+			this.msg = true;
+			this.getMyVents();
+		},
+		//标记已读
+		markRead() {
+			this.msgList = [];
+		},
+		//搜索
+		search() {
+			this.searchVisible = true;
+		},
+	},
 };
 </script>
 
 <style scoped>
 .user-bar {
-  display: flex;
-  align-items: center;
-  height: 100%;
+	display: flex;
+	align-items: center;
+	height: 100%;
 }
 
 .user-bar .panel-item {
-  padding: 0 10px;
-  cursor: pointer;
-  height: 100%;
-  display: flex;
-  align-items: center;
+	padding: 0 10px;
+	cursor: pointer;
+	height: 100%;
+	display: flex;
+	align-items: center;
 }
 
 .user-bar .panel-item i {
-  font-size: 16px;
+	font-size: 16px;
 }
 
 .user-bar .panel-item:hover {
-  background: rgba(0, 0, 0, 0.1);
+	background: rgba(0, 0, 0, 0.1);
 }
 
 .user-bar .user-avatar {
-  height: 49px;
-  display: flex;
-  align-items: center;
+	height: 49px;
+	display: flex;
+	align-items: center;
 }
 
 .user-bar .user-avatar label {
-  display: inline-block;
-  margin-left: 5px;
-  font-size: 14px;
-  cursor: pointer;
+	display: inline-block;
+	margin-left: 5px;
+	font-size: 14px;
+	cursor: pointer;
 }
 
 .msg-list li {
-  border-top: 1px solid #eee;
+	border-top: 1px solid #eee;
 }
 
 .msg-list li a {
-  display: flex;
-  padding: 20px;
+	display: flex;
+	padding: 20px;
 }
 
 .msg-list li a:hover {
-  background: #ecf5ff;
+	background: #ecf5ff;
 }
 
 .msg-list__icon {
-  width: 40px;
-  margin-right: 15px;
+	width: 40px;
+	margin-right: 15px;
 }
 
 .msg-list__main {
-  flex: 1;
+	flex: 1;
 }
 
 .msg-list__main h2 {
-  font-size: 15px;
-  font-weight: normal;
-  color: #333;
+	font-size: 15px;
+	font-weight: normal;
+	color: #333;
 }
 
 .msg-list__main p {
-  font-size: 12px;
-  color: #999;
-  line-height: 1.8;
-  margin-top: 5px;
+	font-size: 12px;
+	color: #999;
+	line-height: 1.8;
+	margin-top: 5px;
 }
 
 .msg-list__time {
-  width: 100px;
-  text-align: right;
-  color: #999;
+	width: 100px;
+	text-align: right;
+	color: #999;
 }
 
 .dark .msg-list__main h2 {
-  color: #d0d0d0;
+	color: #d0d0d0;
 }
 
 .dark .msg-list li {
-  border-top: 1px solid #363636;
+	border-top: 1px solid #363636;
 }
 
 .dark .msg-list li a:hover {
-  background: #383838;
+	background: #383838;
 }
 </style>