init: 初始化 hgmj 后台管理项目

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/views/main/components/header.vue

@@ -0,0 +1,188 @@
+<template>
+  <el-header>
+    <div class="logo-text">
+      <img :src="logoImg" class="logoImg" />
+      <span>91短剧后台管理系统</span>
+    </div>
+    <div class="header-btn">
+      <el-select
+        v-model="selectedLine"
+        @change="lineChange"
+        size="mini"
+        placeholder="请选择线路"
+      >
+        <el-option
+          v-for="(item, index) in $imgUrls"
+          :key="index"
+          :label="item.desc || `线路${index + 1}`"
+          :value="index"
+        >
+        </el-option>
+      </el-select>
+      <el-button
+        v-show="isShow"
+        class="beilv"
+        id="beilv"
+        style="width:30px"
+        type="text"
+        @click="getValue()"
+        >{{ expansionFactor }}</el-button
+      >
+
+      <span class="exit" @click="logout">退出</span>
+      <span>
+        您好！
+        <i class="user-name">{{ userInfo ? userInfo.admin.name : "未知" }}</i
+        >,欢迎登录
+      </span>
+    </div>
+  </el-header>
+</template>
+<script>
+// import API from '@/api'
+import { mapActions, mapGetters } from "vuex";
+import local from "@/utils/localStroage.js";
+export default {
+  name: "dg-header",
+  data() {
+    return {
+      isShow: true,
+      userName: "",
+      logoImg: require("../../../assets/images/icon.png"),
+      selectedLine: 0,
+    };
+  },
+  computed: {
+    ...mapGetters(["expansionFactor"]),
+    userInfo: () => {
+      return local.get("userInfo");
+    },
+  },
+  created() {
+    // window.console.log(this.$store.state.beilv);
+    // 从localStroage读取用户登录信息，存在则自动填充密码
+    let _index = localStorage.getItem("overallSituationLine");
+    if (_index) {
+      this.selectedLine = Number(_index);
+    }
+  },
+  methods: {
+    ...mapActions(["setBeilv"]),
+    lineChange(v) {
+      this.$setOverallSituationLine(v);
+    },
+    getValue() {
+      this.$prompt("请输倍率", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputPattern: /^\d+(\.\d+)?$/,
+        inputErrorMessage: "请输入倍率不为负的数字",
+      })
+        .then(({ value }) => {
+          this.setBeilv(value);
+          this.isShow = false;
+          this.$message({
+            type: "success",
+            message: "你的输入的倍率是: " + value,
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "取消输入",
+          });
+        });
+    },
+    // 点击退出
+    logout() {
+      this.$confirm("您确定要退出当前账户？", "退出提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.exit();
+        })
+        .catch(() => {});
+    },
+    // 登出
+    exit() {
+      local.remove("userInfo");
+      local.remove("role");
+      // this.$store.dispatch("refreshRouter");
+      this.$store.dispatch("removeAllTag");
+      this.$router.push({
+        path: "/login",
+      });
+
+      // let params = {
+      //   name: this.userInfo.name
+      // }
+      // API.logout(params).then(res => {
+      //   if (res.code === 200) {
+      //     local.remove('userInfo')
+      //     this.$router.push({
+      //       name: 'login'
+      //     })
+      //   } else {
+      //     this.$message.error('登出失败')
+      //   }
+      // })
+    },
+  },
+};
+</script>
+<style lang="scss">
+.el-header {
+  // background: url("../../../assets/images/header-bg.png");
+  text-align: center;
+  width: 100%;
+  height: 80px !important;
+  line-height: 80px;
+  display: flex;
+  background-color: #161823;
+
+  .logo-text {
+    font-size: 22px;
+    color: #fff;
+    flex: 1;
+    text-align: left;
+    display: inline;
+    .logoImg {
+      width: 60px;
+      height: 60px;
+      vertical-align: middle;
+    }
+    span {
+      vertical-align: middle;
+      margin-left: 15px;
+    }
+  }
+  .header-btn {
+    flex: 1;
+    text-align: right;
+    font-size: 14px;
+    color: #fff;
+    .beilv {
+      position: fixed;
+      top: 23px;
+      left: 371px;
+      position: fixed;
+    }
+    input {
+      border: none;
+      outline: none;
+    }
+  }
+  .user-name {
+    color: white;
+  }
+  .exit {
+    margin: 0 20px;
+    cursor: pointer;
+    &:hover {
+      color: white;
+    }
+  }
+}</style
+>''