Merge pull request #58 from zhitan-cloud/jiayu1.0

AliooWang

2025-04-13 3933d3aa143e87f92387d2c3a31f65c192685efc

Merge pull request #58 from zhitan-cloud/jiayu1.0

Jiayu1.0

 zhitan-vue/src/assets/styles/index.scss

@@ -9,10 +9,12 @@
body {
  height: 100%;
  margin: 0;
  padding: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  overflow-x: hidden; /* 防止水平滚动条 */
}

label {
@@ -22,10 +24,17 @@
html {
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 防止水平滚动条 */
}

#app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 防止水平滚动条 */
}

*,
@@ -205,4 +214,41 @@
    // ::v-deep(.el-range-separator) {
    color: #999 !important;
  }
}

/* 折叠菜单样式调整，确保在所有情况下菜单项居中 */
.el-menu--collapse {
  width: 54px !important;
  
  .el-sub-menu, .el-menu-item {
    width: 36px !important;
    min-width: 36px !important;
    margin-left: 9px !important; /* 关键：设置固定的左边距9px使菜单项居中 */
    margin-right: 9px !important;
  }
  
  .el-menu-item, .el-sub-menu__title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    
    .svg-icon, .el-icon {
      margin: 0 !important; /* 重要：移除图标的所有边距 */
    }
    
    .el-sub-menu__icon-arrow {
      display: none !important;
    }
    
    > span {
      display: none !important;
    }
  }
  
  /* 选中状态样式 */
  .el-menu-item.is-active, .el-sub-menu.is-active > .el-sub-menu__title {
    background-color: #3883FA !important;
    color: #fff !important;
  }
}

 zhitan-vue/src/assets/styles/menu-fix.scss

 zhitan-vue/src/assets/styles/sidebar.scss

@@ -51,10 +51,11 @@

      .scrollbar-wrapper {
        overflow-x: hidden !important;
        height: calc(100% - 290px) !important;
      }

      .el-scrollbar__bar.is-vertical {
        right: 0px;
        right: 0 !important;
      }

      .el-scrollbar {
@@ -192,22 +193,32 @@
      }

      .el-menu--collapse {
        .el-sub-menu {
          & > .el-sub-menu__title {
            & > span {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
            & > i {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
        width: 54px !important;

        /* 清除后代选择器中干扰居中的样式 */
        .el-sub-menu, .el-menu-item {
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;

          /* 让图标和菜单项居中 */
          .el-menu-item, .el-sub-menu__title {
            width: 36px !important;
            min-width: 36px !important;
            height: 38px !important;
            line-height: 38px !important;
            margin: 4px 9px !important; /* 精确计算居中边距 */
            padding: 0 !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 4px !important;
          }

          /* 确保图标居中 */
          .svg-icon, .el-icon {
            margin: 0 !important;
            padding: 0 !important;
          }
        }
      }
@@ -479,22 +490,32 @@
      }

      .el-menu--collapse {
        .el-sub-menu {
          & > .el-sub-menu__title {
            & > span {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
            & > i {
              height: 0;
              width: 0;
              overflow: hidden;
              visibility: hidden;
              display: inline-block;
            }
        width: 54px !important;

        /* 清除后代选择器中干扰居中的样式 */
        .el-sub-menu, .el-menu-item {
          margin: 0 !important;
          padding: 0 !important;
          width: 100% !important;

          /* 让图标和菜单项居中 */
          .el-menu-item, .el-sub-menu__title {
            width: 36px !important;
            min-width: 36px !important;
            height: 38px !important;
            line-height: 38px !important;
            margin: 4px 9px !important; /* 精确计算居中边距 */
            padding: 0 !important;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            border-radius: 4px !important;
          }

          /* 确保图标居中 */
          .svg-icon, .el-icon {
            margin: 0 !important;
            padding: 0 !important;
          }
        }
      }

 zhitan-vue/src/components/Breadcrumb/index.vue

@@ -63,19 +63,5 @@
    color: #fff;
    cursor: text;
  }
  
  :deep(.el-breadcrumb__item) {
    .el-breadcrumb__inner {
      color: rgba(255, 255, 255, 0.8);
      
      &:hover {
        color: #fff;
      }
    }
    
    .el-breadcrumb__separator {
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>

 zhitan-vue/src/components/Hamburger/index.vue

@@ -12,7 +12,7 @@
    </svg> -->
    
    <img src="/src/assets/images/nav-btn.png" width="26" v-if="settingsStore.sideTheme == 'theme-dark'">
    <img src="/src/assets/images/nav-btn2.png" width="26" v-else>
    <img src="/src/assets/images/nav-btn.png" width="26" v-else>
  </div>
</template>


 zhitan-vue/src/layout/components/AppMain.vue

@@ -74,6 +74,11 @@
    }
  }
}

/* 用户个人资料页特殊高度处理 */
.user-profile-container {
  min-height: calc(100vh - 50px) !important;
}
</style>

<style lang="scss">

 zhitan-vue/src/layout/components/Navbar.vue

@@ -41,22 +41,24 @@
import Hamburger from "@/components/Hamburger"
import useAppStore from "@/store/modules/app"
import useSettingsStore from "@/store/modules/settings"
import { useRouter } from "vue-router"

const appStore = useAppStore()
const settingsStore = useSettingsStore()
const router = useRouter()

function toggleSideBar() {
  appStore.toggleSideBar()
}

function handleAlarm() {
  // 处理报警按钮点击事件
  console.log('报警按钮被点击')
  // 跳转到报警管理页面
  router.push('/alarmmanage/measuremen?modelCode=BJGL')
}

function handleRobot() {
  // 处理大模型按钮点击事件
  console.log('大模型按钮被点击')
  // 跳转到智能助手页面
  window.open('https://deepseek.tan-zhonghe.com/chat', '_blank')
}
</script>


 zhitan-vue/src/layout/components/Sidebar/index.vue

@@ -2,8 +2,9 @@
  <div
    :class="{ 'has-logo': showLogo }"
    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
    class="sidebar-container-wrapper"
  >
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper" view-class="scrollbar-view">
      <!-- 首页时不显示任何菜单项 -->
      <el-menu
        v-if="!isHomePage"
@@ -152,9 +153,40 @@
}
</script>
<style lang="scss" scoped>
:deep(.custom-menu) {
.sidebar-container-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:deep(.scrollbar-wrapper) {
  height: calc(100% - 290px) !important;
  overflow-x: hidden !important;
}

:deep(.scrollbar-view) {
  height: 100%;
}

:deep(.el-scrollbar__bar.is-vertical) {
  right: 0;
  width: 6px;
}

:deep(.el-scrollbar__thumb) {
  background-color: rgba(144, 147, 153, 0.3);
  &:hover {
    background-color: rgba(144, 147, 153, 0.5);
  }
}

.custom-menu {
  width: 100%;
  padding: 6px 0;
  height: calc(100% - 150px); // 留出底部用户区域的空间
  height: auto !important; // 改为自适应高度，避免固定高度导致内容溢出
  transition: all 0.3s ease;
  
  // Override Element Plus default menu styles
  .el-menu-item {
@@ -163,6 +195,7 @@
    border-radius: 4px; 
    margin: 4px 10px;
    width: calc(100% - 20px);
    transition: all 0.2s ease;
    
    &.is-active {
      background-color: #3883FA !important;
@@ -181,6 +214,7 @@
      border-radius: 4px;
      margin: 4px 10px;
      width: calc(100% - 20px);
      transition: all 0.2s ease;
      
      &:hover {
        background-color: rgba(56, 131, 250, 0.1) !important;
@@ -209,7 +243,8 @@

// 首页空白菜单区域样式
.home-empty-menu {
  height: calc(100% - 150px);
  height: auto;
  min-height: 100px;
}

// 底部用户区域样式
@@ -396,4 +431,48 @@
  height: 38px !important;
  line-height: 38px !important;
}

// Add styles for collapsed menu items
:deep(.custom-menu.el-menu--collapse) {
  width: 54px !important;
  
  .el-menu-item, .el-sub-menu__title {
    width: 36px !important;
    min-width: 36px !important;
    margin: 4px 9px !important; /* 9px是为了确保居中：(54px宽 - 36px菜单项) / 2 = 9px */
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    
    &.is-active {
      background-color: #3883FA !important;
      color: #fff !important;
      box-shadow: 0 2px 6px rgba(56, 131, 250, 0.4);
      transform: scale(0.95);
      transition: all 0.2s ease;
    }
    
    .el-icon, .svg-icon {
      margin: 0 !important;
      font-size: 18px !important;
      
      svg {
        width: 1.2em;
        height: 1.2em;
      }
    }
    
    // 确保折叠时子菜单的标题也居中对齐
    .el-sub-menu__icon-arrow {
      display: none;
    }
  }
  
  // 确保折叠时弹出的子菜单有正确样式
  .el-tooltip__trigger:focus:not(.focusing) {
    outline: none;
  }
}
</style>

 zhitan-vue/src/layout/index.vue

@@ -9,7 +9,7 @@
              <img v-if="sideTheme === 'theme-dark'" :src="systemInfo.leftLogo" class="sidebar-logo" />
              <img v-else :src="systemInfo.leftLogo" class="sidebar-logo" />
            </div>
            <div class="name" v-if="sidebar.opened" :style="{ color: '#fff' }">
            <div class="name" v-if="sidebar.opened" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#333' }">
              {{ title }}
            </div>
          </div>
@@ -86,13 +86,13 @@

// 跳转到报警页面
function goToAlarm() {
  router.push('/alarm/list')
  router.push('/alarmmanage/measuremen?modelCode=BJGL')
}

// 打开AI大模型对话框
function openAIModel() {
  // 这里可以实现打开AI对话框的逻辑
  console.log('打开AI大模型对话框')
  // 跳转到指定的URL
  window.open('https://deepseek.tan-zhonghe.com/chat', '_blank')
}

const classObj = computed(() => ({
@@ -351,47 +351,12 @@
}

.themeDark {
  .navbar-container {
    background: #1a235d;
    border-bottom: 2px solid #110f2e;
  }
  
  .navbar {
    background: transparent !important;
    background: #002866 !important;
  }
  
  .sidebar-container {
    background-color: #002866 !important;
  }
}

.themeLight {
  .navbar-container {
    background: #3883FA;
  }
  
  .navbar {
    background: transparent !important;
    
    .left {
      .sidebar-logo-container {
        .name {
          color: #fff !important;
        }
      }
    }
    
    .right {
      .right-menu {
        .right-menu-item {
          color: #fff;
          
          .right-menu-icon {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>

 zhitan-vue/src/views/login.vue

@@ -201,7 +201,7 @@
.login {
  display: flex;
  align-items: center;
  height: 100%;
  height: 100vh;
  background-image: url("@/assets/images/login-background.png");
  background-repeat: no-repeat;
  background-size: cover;
@@ -209,6 +209,7 @@
  position: relative;
  min-width: 700px;
  min-height: 700px;
  background-color:#001146
}

.middle-view {

 zhitan-vue/src/views/system/name/name.vue

@@ -1,30 +1,30 @@
<template>
  <div class="app-container page">
    <div class="form-card">
      <el-form :model="form" label-width="80px">
        <el-row class="mb20 mt20">
          <el-col :offset="1" :span="18">
  <div class="app-container page name-settings-page">
    <div class="name-settings-card">
      <el-form :model="form" label-width="120px">
        <el-row class="form-row">
          <el-col :span="18">
            <el-form-item label="系统名称" prop="systemName">
              <el-input v-model="form.systemName" placeholder="请输入系统名称" maxlength="64" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb20 mt20">
          <el-col :offset="1" :span="18">
        <el-row class="form-row">
          <el-col :span="18">
            <el-form-item label="登录logo" prop="homeLogo">
              <ImageUpload v-model="form.homeLogo" :fileType="['png']" :limit="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb20 mt20">
          <el-col :offset="1" :span="18">
        <el-row class="form-row">
          <el-col :span="18">
            <el-form-item label="后台logo" prop="leftLogo">
              <ImageUpload v-model="form.leftLogo" :fileType="['png']" :limit="1" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb20 mt20">
          <el-col :offset="1" :span="18">
        <el-row class="form-row">
          <el-col :span="18">
            <el-form-item label="copyRight" prop="copyRight">
              <el-input
                v-model="form.copyRight"
@@ -37,9 +37,11 @@
            </el-form-item>
          </el-col>
        </el-row>
        <el-row class="mb20 mt20" style="padding-bottom: 20px">
          <el-col :offset="2" :span="18">
            <el-button type="primary" @click="handleSave">保存</el-button>
        <el-row class="form-row form-footer">
          <el-col :span="18">
            <el-form-item>
              <el-button type="primary" @click="handleSave">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
@@ -68,6 +70,11 @@
}
getSystemName()
function handleSave() {
  if (!form.value.leftLogo || !form.value.homeLogo) {
    proxy.$modal.msgError("请上传logo")
    return
  }

  if (!form.value.leftLogo.includes(baseUrl)) {
    form.value.leftLogo = baseUrl + form.value.leftLogo
  }
@@ -87,7 +94,51 @@

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";
:deep .avatar-uploader .el-upload {

.name-settings-page {
  height: 100%;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.name-settings-card {
 
  border-radius: 4px;
  margin: 16px;
  padding: 24px;
  flex: 1;
  height: calc(100vh - 100px);
  overflow-y: auto;
  
  .el-form {
    width: 100%;
    
    .form-row {
      margin-bottom: 24px;
      
      &.form-footer {
        margin-top: 40px;
      }
    }
    
    .el-form-item {
      margin-bottom: 0;
      
      .el-form-item__label {
        color: var(--el-text-color-primary, #fff);
      }
      
      .el-form-item__content {
        .el-button {
          padding: 10px 24px;
        }
      }
    }
  }
}

:deep(.avatar-uploader .el-upload) {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
@@ -96,11 +147,11 @@
  transition: var(--el-transition-duration-fast);
}

:deep .avatar-uploader .el-upload:hover {
:deep(.avatar-uploader .el-upload:hover) {
  border-color: var(--el-color-primary);
}

:deep .el-icon.avatar-uploader-icon {
:deep(.el-icon.avatar-uploader-icon) {
  font-size: 28px;
  color: #8c939d;
  width: 178px;

 zhitan-vue/src/views/system/user/profile/index.vue

@@ -1,5 +1,5 @@
<template>
  <div class="app-container">
  <div class="app-container user-profile-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">