feat: 后台管理适配

罗广辉

2025-05-27 062eabd69860d5e6b8df81c265766d023be36097

feat: 后台管理适配

 package.json

@@ -15,6 +15,7 @@
        "@saber/nf-design-base-elp": "^1.2.0",
        "@smallwei/avue": "^3.4.4",
        "@turf/turf": "6.5.0",
        "postcss-pxtorem": "^6.1.0",
        "animate.css": "^4.1.1",
        "avue-plugin-ueditor": "^1.0.3",
        "axios": "^0.21.1",

 pnpm-lock.yaml

@@ -68,6 +68,9 @@
  nprogress:
    specifier: ^0.2.0
    version: 0.2.0
  postcss-pxtorem:
    specifier: ^6.1.0
    version: 6.1.0(postcss@8.4.38)
  reconnecting-websocket:
    specifier: ^4.4.0
    version: 4.4.0
@@ -3358,6 +3361,14 @@
      splaytree: 3.1.2
    dev: false

  /postcss-pxtorem@6.1.0(postcss@8.4.38):
    resolution: {integrity: sha512-ROODSNci9ADal3zUcPHOF/K83TiCgNSPXQFSbwyPHNV8ioHIE4SaC+FPOufd8jsr5jV2uIz29v1Uqy1c4ov42g==}
    peerDependencies:
      postcss: ^8.0.0
    dependencies:
      postcss: 8.4.38
    dev: false

  /postcss@8.4.38:
    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
    engines: {node: ^10 || ^12 || >=14}

 src/components/basic-container/main.vue

@@ -35,8 +35,13 @@

<style lang="scss">
.basic-container {
  padding: 10px 6px;
  padding: 0 10px;
  box-sizing: border-box;
  height: 100%;

  .basic-container__card{
    height: 100% !important;
  }

  &--block {
    height: 100%;

 src/main.js

@@ -47,7 +47,8 @@
import * as DC from '@dvgis/dc-sdk'
import '@dvgis/dc-sdk/dist/dc.min.css'
window.DC = Object.create(DC)

import { onResize } from '@/utils/rem'
onResize()
const { VITE_APP_BASE,VITE_APP_CESIUM_TOKEN } = import.meta.env
window.CESIUM_BASE_URL = `${VITE_APP_BASE}/cesiumPu`
Cesium.Ion.defaultAccessToken = VITE_APP_CESIUM_TOKEN

 src/page/index/setting.vue

@@ -97,7 +97,7 @@
  &-icon {
    color: #666;
    position: fixed;
    bottom: 200px;
    top: 1020px;
    right: 20px;
    z-index: 2048;
  }

 src/styles/common.scss

@@ -20,7 +20,8 @@

.avue-layout {
  display: flex;
  height: 100%;
  height: 1080px;
  width: 1920px;
  overflow: hidden;

  &--horizontal {
@@ -178,4 +179,4 @@
  .cesium-viewer-bottom {
    display: none;
  }
}
}

 src/styles/media.scss

@@ -1,66 +0,0 @@
@media screen and (max-width: 992px) {
  .avue-sidebar {
    position: fixed;
    top: 0;
    left: -265px;
    z-index: 1024;
  }
  .avue--collapse {
    .avue-sidebar {
      left: 0;
      width: $sidebar_width;
    }

    .avue-logo {
      width: $sidebar_width;
    }

    .avue-main {
      margin-left: $sidebar_width;
    }
  }
  // ele的自适应
  .el-dialog,
  .el-message-box {
    width: 98%;
  }
  //登录页面
  .login-left {
    width: 100%;
    min-height: auto;

    .title {
      margin-top: 20px;
      font-size: 20px;
      text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
    }

    .img {
      width: 50px;
    }
  }
  .login-logo {
    padding-top: 30px;
    margin-left: -30px;
  }
  .login-border {
    border-radius: 5px;
    padding: 20px;
    margin: 0 auto;
    width: 100%;
  }
  .login-main {
    width: 100%;
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: none
  }
  .login-container {
    &::before {
      margin-left: 0
    }
  }
  .top-bar__item {
    display: none;
  }
}

 src/utils/rem.js

New file
@@ -0,0 +1,12 @@
export function onResize() {
    const resize = () => {
        const scale = document.documentElement.clientWidth / 192
        document.documentElement.style.fontSize = scale + 'px'
    }
    resize()
    window.addEventListener('resize', resize)
}

export const pxToRem = width => {
    return width * 0.1 + 'rem'
}

 vite.config.mjs

@@ -1,6 +1,7 @@
import { defineConfig, loadEnv } from 'vite';
import { resolve } from 'path';
import createVitePlugins from './vite/plugins';
import postCssPxToRem from 'postcss-pxtorem'
// https://vitejs.dev/config/
export default ({ mode, command }) => {
  const env = loadEnv(mode, process.cwd());
@@ -55,6 +56,21 @@
        utils: resolve(__dirname, './src/utils'),
      },
    },
    css: {
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 10, // 指定转换基准值，通常是设计稿宽度的1/10
            propList: ['*'], // 可以从px转换为rem的属性，这里是所有属性
            unitPrecision: 5, // 允许REM单位增长到的十进制数
            selectorBlackList: [], // 选择器黑名单，忽略转换的选择器
            replace: true, // 替换包含rem的规则，而不是添加回退
            mediaQuery: false, // 允许在媒体查询中转换px
            minPixelValue: 0 // 设置要替换的最小像素值
          }),
        ]
      }
    },
    plugins: createVitePlugins(env, command === 'build'),
    build: buildConfig,
    optimizeDeps: {