添加新的管理界面

src/router/index.js

@@ -29,6 +29,11 @@ const routes = [
     path: '/register-login',
     component: () => import('../views/RegisterLogin.vue')
   },
+  // 管理界面
+  {
+    path: '/management-interface',
+    component: () => import('../views/ManagementInterface.vue')
+  },
   // 【通识课】首页
   {
     path: '/home',
@@ -194,6 +199,7 @@ const homeRoutes = {
     '/ai-plantexperts',
     '/virtual-laboratory',
     '/ai-poetry',
+    '/management-interface',
   ]
 }
 

src/views/ManagementInterface.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="home-container">
+    <div class="box-1">
+      <div class="inner-box left-box">
+        <span>{{ platformTitle }}</span>
+      </div>
+      <div class="inner-box right-box">
+        <div class="top-right-box">
+          <UserInfoPopover />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import UserInfoPopover from '@/components/user/UserInfoPopover.vue'
+
+// 平台标题响应式变量
+const platformTitle = ref(import.meta.env.VITE_APP_TITLE)
+// 更新平台标题
+const updatePlatformTitle = () => {
+  platformTitle.value = localStorage.getItem('tenantName') || import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT
+}
+
+// 获取当前路由对象
+const router = useRouter()
+
+onMounted(() => {
+  // 初始化平台标题
+  updatePlatformTitle()
+  // storage事件监听器，监听其他标签页对localStorage的修改
+  window.addEventListener('storage', (e) => {
+    if (e.key === 'tenantName') {
+      updatePlatformTitle()
+    }
+  })
+})
+// 全局:更新租户名称
+window.updateTenantName = (newName) => {
+  localStorage.setItem('tenantName', newName)
+  updatePlatformTitle()
+}
+
+</script>
+
+<style scoped lang="scss">
+@use 'sass:math';
+
+@function rpx($px) {
+  @return math.div($px, 750) * 100vw;
+}
+
+.home-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, #001169, #8a78d0);
+  display: flex;
+  flex-direction: column;
+}
+
+.box-1 {
+  width: 100%;
+  min-height: rpx(50);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  font-size: rpx(16);
+}
+
+.inner-box {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: rpx(16);
+}
+
+.left-box {
+  position: relative;
+  justify-content: flex-start;
+  align-items: center;
+  display: flex;
+  flex: 1;
+  padding-left: rpx(30);
+  cursor: pointer;
+}
+
+.left-box span {
+  position: static;
+  margin-top: 0;
+  margin-left: 0;
+  margin-right: rpx(10);
+  font-size: rpx(11);
+  color: white;
+  max-width: rpx(200);
+  white-space: normal;
+  line-height: rpx(16);
+  text-align: left;
+}
+
+.right-box {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: rpx(60);
+}
+
+.top-right-box {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+  cursor: pointer;
+}
+</style>
+
+
+<style lang="scss">
+/* 只消除非user-name-box的小三角 */
+.no-arrow-dropdown .el-popper__arrow{
+  display: none;
+}
+.el-popper.is-light,
+.el-dropdown__popper.el-popper{
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+.el-dropdown__popper{
+  --el-dropdown-menuItem-hover-color: none;
+}
+/* 移除用户名下拉菜单的焦点边框 */
+.user-name-box:focus,
+.user-name-box:focus-within,
+.user-name-box:hover{
+  outline: none;
+  box-shadow: none;
+}
+/* 确保Element Plus下拉菜单触发元素没有焦点边框 */
+.el-dropdown .el-dropdown__trigger:focus{
+  outline: none;
+  box-shadow: none;
+}
+</style>