pref:修改页面

base-manager-ui/admin/src/layouts/Layouts.vue

@@ -5,8 +5,7 @@
       <div class="flex aic">
         <router-link to="/" class="flex aic">
           <img
-            class="mr10"
-            width="32"
+            class="mr10 logo"
             :src="sysLogo ? api + sysLogo : require('@/assets/img/logo.png')"
           />
           <h1 class="title">
@@ -102,6 +101,10 @@ export default {
     line-height: normal;
   }
 }
+.logo {
+  height: 32px;
+  object-fit: contain;
+}
 .main {
   height: calc(100vh - 64px);
   padding: 0px 24px 24px;

base-manager-ui/admin/src/pages/basicset/appmarket/components/AppDetailsPage.vue

@@ -20,7 +20,7 @@
           :wrapper-col="{ span: 22 }"
         >
           <a-form-model-item label="应用主题">
-            {{ filterItems(appInfo.appThemeName, appDict.appThemeName) }}
+            {{ filterItems(appInfo.appThemeName) }}
           </a-form-model-item>
           <a-form-model-item label="应用简介">
             {{ appInfo.summary }}
@@ -117,10 +117,10 @@ import {
   getVersionList,
   usedVersion,
   previewVersion,
+  getCategoryList,
 } from "@/services/market";
 import CheckSite from "../modal/CheckSite.vue";
 import { pageSizeOptions } from "@/config/pageConfig.js";
-import { filterItems } from "@/utils";
 import { mapGetters } from "vuex";
 export default {
   props: {
@@ -153,9 +153,7 @@ export default {
       {
         title: "更新说明",
         width: "40%",
-        customRender: (text) => {
-          return <span>{text.notes ? text.notes : "--"}</span>;
-        },
+        dataIndex: "notes",
       },
       {
         title: "应用包",
@@ -172,7 +170,6 @@ export default {
       },
     ];
     return {
-      filterItems,
       api: process.env.VUE_APP_API_BASE_URL + "/",
       columns,
       appId: this.$route.query.id,
@@ -185,16 +182,30 @@ export default {
       form: {},
       tableData: [],
       siteVisible: false,
+      categoryList: [],
     };
   },
   computed: {
     ...mapGetters("site", ["appDict"]),
   },
   created() {
+    this.getCategoryList();
     this.getAppInfo();
     this.getVersions();
   },
   methods: {
+    // 获取分类列表
+    async getCategoryList() {
+      let res = await getCategoryList({
+        page: 1,
+        size: -1,
+        siteId: this.siteId,
+      });
+      let { data } = res.data.data;
+      if (res.data.code === 1) {
+        this.categoryList = data;
+      }
+    },
     // 获取应用详情
     async getAppInfo() {
       let res = await getAppInfo({ id: this.appId });
@@ -275,6 +286,12 @@ export default {
       this.$refs.CheckSite.getSiteList(siteList);
       this.siteVisible = true;
     },
+    filterItems(appThemeName) {
+      return (
+        this.categoryList.find((v) => v.id == appThemeName)?.categoryName ||
+        "--"
+      );
+    },
   },
 };
 </script>

base-manager-ui/admin/src/pages/basicset/appmarket/components/TerminalApp.vue

@@ -213,7 +213,6 @@ export default {
     ...mapMutations("site", ["SET_appDict"]),
     // 获取分类列表
     async getCategoryList() {
-      this.loading = true;
       let res = await getCategoryList({
         page: 1,
         size: -1,

portal-manager-ui/admin/src/components/ParticleWavy.vue

+<template>
+  <div id="indexLizi" class="particle-wavy"></div>
+</template>
+
+<script>
+import * as THREE from "three";
+export default {
+  name: "Pointwave",
+  props: {
+    amountX: {
+      type: Number,
+      default: 50,
+    },
+    amountY: {
+      type: Number,
+      default: 50,
+    },
+    color: {
+      type: String,
+      default: "#10cbff",
+    },
+    top: {
+      type: Number,
+      default: 350,
+    },
+  },
+  data() {
+    return {
+      count: 0,
+      // 用来跟踪鼠标水平位置
+      mouseX: 0,
+      windowHalfX: null,
+      // 相机
+      camera: null,
+      // 场景
+      scene: null,
+      // 批量管理粒子
+      particles: null,
+      // 渲染器
+      renderer: null,
+    };
+  },
+  mounted() {
+    this.init();
+    this.animate();
+  },
+  methods: {
+    init() {
+      const SEPARATION = 100;
+      const SCREEN_WIDTH = window.innerWidth;
+      const SCREEN_HEIGHT = window.innerHeight;
+      const container = document.createElement("div");
+      this.windowHalfX = window.innerWidth / 2;
+      container.style.position = "relative";
+      container.style.top = `${this.top}px`;
+      container.style.height = `${SCREEN_HEIGHT - this.top}px`;
+      document.getElementById("indexLizi").appendChild(container);
+
+      this.camera = new THREE.PerspectiveCamera(
+        75,
+        SCREEN_WIDTH / SCREEN_HEIGHT,
+        1,
+        10000
+      );
+      this.camera.position.z = 1000;
+
+      this.scene = new THREE.Scene();
+
+      const numParticles = this.amountX * this.amountY;
+      const positions = new Float32Array(numParticles * 3);
+      const scales = new Float32Array(numParticles);
+      // 初始化粒子位置和大小
+      let i = 0;
+      let j = 0;
+      for (let ix = 0; ix < this.amountX; ix++) {
+        for (let iy = 0; iy < this.amountY; iy++) {
+          positions[i] = ix * SEPARATION - (this.amountX * SEPARATION) / 2;
+          positions[i + 1] = 0;
+          positions[i + 2] = iy * SEPARATION - (this.amountY * SEPARATION) / 2;
+          scales[j] = 1;
+          i += 3;
+          j++;
+        }
+      }
+
+      const geometry = new THREE.BufferGeometry();
+      geometry.setAttribute(
+        "position",
+        new THREE.BufferAttribute(positions, 3)
+      );
+      geometry.setAttribute("scale", new THREE.BufferAttribute(scales, 1));
+      // 初始化粒子材质
+      const material = new THREE.ShaderMaterial({
+        uniforms: {
+          color: { value: new THREE.Color(this.color) },
+        },
+        vertexShader: `
+          attribute float scale;
+          void main() {
+            vec4 mvPosition = modelViewMatrix * vec4( position, 2.0 );
+            gl_PointSize = scale * ( 300.0 / - mvPosition.z );
+            gl_Position = projectionMatrix * mvPosition;
+          }
+        `,
+        fragmentShader: `
+          uniform vec3 color;
+          void main() {
+            if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
+            gl_FragColor = vec4( color, 1.0 );
+          }
+        `,
+      });
+
+      this.particles = new THREE.Points(geometry, material);
+      this.scene.add(this.particles);
+
+      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+      this.renderer.setSize(container.clientWidth, container.clientHeight);
+      this.renderer.setPixelRatio(window.devicePixelRatio);
+      this.renderer.setClearAlpha(0);
+      container.appendChild(this.renderer.domElement);
+
+      window.addEventListener("resize", this.onWindowResize, {
+        passive: false,
+      });
+      document.addEventListener("mousemove", this.onDocumentMouseMove, {
+        passive: false,
+      });
+      document.addEventListener("touchstart", this.onDocumentTouchStart, {
+        passive: false,
+      });
+      document.addEventListener("touchmove", this.onDocumentTouchMove, {
+        passive: false,
+      });
+    },
+    render() {
+      this.camera.position.x += (this.mouseX - this.camera.position.x) * 0.05;
+      this.camera.position.y = 400;
+      this.camera.lookAt(this.scene.position);
+      const positions = this.particles.geometry.attributes.position.array;
+      const scales = this.particles.geometry.attributes.scale.array;
+      // 计算粒子位置及大小
+      let i = 0;
+      let j = 0;
+      for (let ix = 0; ix < this.amountX; ix++) {
+        for (let iy = 0; iy < this.amountY; iy++) {
+          positions[i + 1] =
+            Math.sin((ix + this.count) * 0.3) * 100 +
+            Math.sin((iy + this.count) * 0.5) * 100;
+          scales[j] =
+            (Math.sin((ix + this.count) * 0.3) + 1) * 8 +
+            (Math.sin((iy + this.count) * 0.5) + 1) * 8;
+          i += 3;
+          j++;
+        }
+      }
+      // 重新渲染粒子
+      this.particles.geometry.attributes.position.needsUpdate = true;
+      this.particles.geometry.attributes.scale.needsUpdate = true;
+      this.renderer.render(this.scene, this.camera);
+      this.count += 0.02;
+    },
+    animate() {
+      requestAnimationFrame(this.animate);
+      this.render();
+      // setInterval(() => {
+      // }, 50);
+    },
+    onDocumentMouseMove(event) {
+      this.mouseX = event.clientX - this.windowHalfX;
+    },
+    onDocumentTouchStart(event) {
+      if (event.touches.length === 1) {
+        this.mouseX = event.touches[0].pageX - this.windowHalfX;
+      }
+    },
+    onDocumentTouchMove(event) {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+        this.mouseX = event.touches[0].pageX - this.windowHalfX;
+      }
+    },
+    onWindowResize() {
+      this.windowHalfX = window.innerWidth / 2;
+      this.camera.aspect = window.innerWidth / window.innerHeight;
+      this.camera.updateProjectionMatrix();
+      this.renderer.setSize(window.innerWidth, window.innerHeight);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.particle-wavy {
+  width: 100%;
+  height: 100%;
+  opacity: 0.3;
+}
+</style>
\ No newline at end of file

portal-manager-ui/admin/src/views/dataActuary/dataActuary.vue

 <template>
   <div class="actuary w-full h-auto">
-    <Start class="start" />
+    <ParticleWavy class="start" />
     <div class="act_cont">
       <div class="act_tit">
         <h1>智慧政务数据精算</h1>
@@ -42,7 +42,7 @@
 
 <script>
 import menu from "@/mixins/menu";
-import Start from "./ParticleWavy.vue";
+import ParticleWavy from "@/components/ParticleWavy.vue";
 import { mapState } from "vuex";
 import Storage from "@/utils/js/Storage";
 export default {
@@ -54,7 +54,7 @@ export default {
     };
   },
   components: {
-    Start,
+    ParticleWavy,
   },
 
   computed: {