暂存

config.js

@@ -1,6 +1,6 @@
 export default {
-    baseUrl: 'https://fw.rc.qingdao.gov.cn/rgpp-api/api', // 内网
+    // baseUrl: 'https://fw.rc.qingdao.gov.cn/rgpp-api/api', // 内网
-    // baseUrl: 'https://qd.zhaopinzao8dian.com/api', // 测试
+    baseUrl: 'https://qd.zhaopinzao8dian.com/api', // 测试
     // baseUrl: 'http://192.168.3.29:8081',
     // baseUrl: 'http://10.213.6.207:19010/api',
     // 语音转文字

manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wxdbdcc6a10153c99b",
         "setting" : {
             "urlCheck" : false,
             "es6" : true,

pages/index/components/AIMatch copy.vue

@@ -0,0 +1,395 @@
+<template>
+    <view class="out">
+        <view v-if="loading" class="loading">
+            <view class="semicircle-loader"></view>
+        </view>
+        <view v-else class="container" id="pixi-box" ref="pixiContainerRef"></view>
+    </view>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
+
+const props = defineProps({
+    tags: {
+        type: Array,
+        default: [],
+    },
+    loading: {
+        type: Boolean,
+        default: false,
+    },
+});
+const emit = defineEmits(['tag-click']);
+
+// DOM Ref
+const pixiContainerRef = ref(null);
+
+// PIXI 变量
+let app = null;
+let tagsContainer = null;
+let activeTagInstances = [];
+
+// 配置数据
+const tagsConfig = ref([
+    { bgColor: 0x0069fe, fontColor: 0xffffff, size: 16, opacity: 1.0, angle: 0, radius: 0 },
+    {
+        bgColor: 0x87e2ec,
+        fontColor: 0xffffff,
+        size: 14,
+        opacity: 1,
+        angle: -Math.PI / 2,
+        radius: 68,
+        tailRotation: Math.PI / 2,
+    },
+    {
+        bgColor: 0xffebeb,
+        tailColor: 0xffe1e1,
+        fontColor: 0xff6969,
+        size: 11.5,
+        opacity: 1,
+        angle: -Math.PI / 4.2,
+        radius: 125,
+        tailRotation: (3 * Math.PI) / 4.5,
+    },
+    {
+        bgColor: 0x21ea85,
+        fontColor: 0xffffff,
+        size: 15,
+        opacity: 1,
+        angle: -Math.PI / 10,
+        radius: 130,
+        tailRotation: (3 * Math.PI) / 4.2,
+    },
+    {
+        bgColor: 0xebf3ff,
+        tailColor: 0xb9d3ff,
+        fontColor: 0x1d71ef,
+        size: 12,
+        opacity: 1,
+        angle: Math.PI / 18,
+        radius: 135,
+        tailRotation: (3 * Math.PI) / 4.3,
+    },
+    {
+        bgColor: 0xffd4b6,
+        fontColor: 0xffffff,
+        size: 14,
+        opacity: 1,
+        angle: Math.PI / 4.3,
+        radius: 100,
+        tailRotation: -(3 * Math.PI) / 4.5,
+    },
+
+    {
+        bgColor: 0xff9400,
+        fontColor: 0xffffff,
+        size: 14,
+        opacity: 1,
+        angle: (2 * Math.PI) / 3,
+        radius: 92,
+        tailRotation: -Math.PI / 2.4,
+    },
+    {
+        bgColor: 0xebf3ff,
+        tailColor: 0xb9d3ff,
+        fontColor: 0x1d71ef,
+        size: 10.5,
+        opacity: 1,
+        angle: (5.4 * Math.PI) / 6,
+        radius: 110,
+        tailRotation: (3 * Math.PI) / 1.79,
+    },
+    {
+        bgColor: 0xff6969,
+        fontColor: 0xffffff,
+        size: 14,
+        opacity: 1,
+        angle: (6.3 * Math.PI) / 5.8,
+        radius: 120,
+        tailRotation: Math.PI / 2.9,
+    },
+    {
+        bgColor: 0xfce9c9,
+        fontColor: 0xfbc55f,
+        size: 13,
+        opacity: 1,
+        angle: (7.2 * Math.PI) / 5.9,
+        radius: 120,
+        tailRotation: Math.PI / 3,
+    },
+]);
+
+watch(
+    () => props.tags,
+    (val) => {
+        if (val && val.length) {
+            tagsConfig.value.map((tag, index) => {
+                // console.log(val[index])
+                tag.name = val[index]?.job_name;
+            });
+            setTimeout(() => {
+                initPixi();
+            }, 100);
+        }
+    },
+    { deep: true }
+);
+
+onMounted(async () => {
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (app) {
+        app.destroy(true, { children: true, texture: true, baseTexture: true });
+        app = null;
+    }
+});
+
+const getContainerDOM = () => {
+    const refVal = pixiContainerRef.value;
+    if (!refVal) return document.getElementById('pixi-box');
+    if (refVal.$el) return refVal.$el;
+    return refVal;
+};
+
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+
+const initPixi = () => {
+    const container = getContainerDOM();
+    if (!container) return;
+
+    const width = container.clientWidth || 300;
+    const height = container.clientHeight || 300;
+
+    if (app) return;
+
+    app = new PIXI.Application({
+        width: width,
+        height: height,
+        backgroundAlpha: 0,
+        backgroundColor: 0xf5f7fa,
+        antialias: true,
+        resolution: window.devicePixelRatio || 1,
+        autoDensity: true,
+    });
+    app.view.style.touchAction = 'auto';
+
+    container.appendChild(app.view);
+
+    tagsContainer = new PIXI.Container();
+    app.stage.addChild(tagsContainer);
+
+    renderScene(width, height);
+};
+
+const renderScene = (sw, sh) => {
+    let ratio = window.innerWidth / 400;
+    if (ratio < 1) ratio = 1;
+    tagsContainer.removeChildren();
+    activeTagInstances = [];
+
+    tagsConfig.value.forEach((data, index) => {
+        const scaledRadius = data.radius * ratio;
+
+        let x = sw / 2 + scaledRadius * Math.cos(data.angle);
+        let y = sh / 2 + scaledRadius * Math.sin(data.angle);
+
+        const tag = createTag(data, index, ratio);
+
+        tagsContainer.addChild(tag);
+
+        const safeW = tag.width / 2 + 10;
+        const safeH = tag.height / 2 + 10;
+
+        // 强制修正 x 和 y，使其不超出屏幕
+        x = clamp(x, safeW, sw - safeW);
+        y = clamp(y, safeH, sh - safeH);
+
+        tag.x = x;
+        tag.y = y;
+
+        // 4. 保存元数据
+        tag.userData = {
+            originalX: x,
+            originalY: y,
+            angle: data.angle,
+            radius: scaledRadius,
+            floatOffset: Math.random() * Math.PI * 2,
+            floatSpeed: 0.01 + Math.random() * 0.02,
+            floatRange: 2 * ratio + Math.random() * 2,
+            safeH: safeH,
+        };
+
+        if (data.radius > 0) {
+            const tail = createCometTail(
+                data.tailColor || data.bgColor,
+                data.tailRotation,
+                tag.width,
+                tag.height,
+                ratio
+            );
+            tag.addChildAt(tail, 0);
+            tag.updateTail = () => tail.updateAnim();
+        }
+
+        activeTagInstances.push(tag);
+    });
+
+    // 动画循环
+    app.ticker.add(() => {
+        const screenH = app.screen.height;
+        activeTagInstances.forEach((tag) => {
+            const meta = tag.userData;
+            if (meta) {
+                // 计算新的浮动位置
+                meta.floatOffset += meta.floatSpeed;
+                let nextY = meta.originalY + Math.sin(meta.floatOffset) * meta.floatRange;
+
+                // 再次进行边界检查
+                if (nextY < meta.safeH) nextY = meta.safeH;
+                if (nextY > screenH - meta.safeH) nextY = screenH - meta.safeH;
+
+                tag.y = nextY;
+
+                if (tag.updateTail) tag.updateTail();
+            }
+        });
+    });
+};
+
+const createTag = (tagData, index, ratio) => {
+    if (ratio > 1) ratio = ratio * 0.9;
+    const tagGroup = new PIXI.Container();
+    tagGroup.eventMode = 'static';
+    tagGroup.cursor = 'pointer';
+
+    tagGroup.on('pointertap', () => emit('tag-click', tagData));
+
+    const text = new PIXI.Text(tagData.name, {
+        fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
+        fontSize: tagData.size * ratio,
+        fill: tagData.fontColor,
+        padding: 4 * ratio,
+        resolution: 2,
+    });
+    text.anchor.set(0.5);
+
+    const paddingH = 26 * ratio;
+    const paddingV = 10 * ratio;
+    let bgWidth = text.width + paddingH;
+    let bgHeight = text.height + paddingV;
+
+    if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
+
+    const bg = new PIXI.Graphics();
+    bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
+    bg.drawRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, bgHeight / 2);
+    bg.endFill();
+
+    tagGroup.addChild(bg);
+    tagGroup.addChild(text);
+
+    return tagGroup;
+};
+
+const createCometTail = (bgColor, tailRotation, parentWidth, parentHeight, ratio) => {
+    if (ratio > 1) ratio = ratio;
+    const tailGroup = new PIXI.Container();
+    const graphics = new PIXI.Graphics();
+    tailGroup.addChild(graphics);
+
+    const baseLength = 45 * ratio;
+    const startWidth = parentHeight + 20 * ratio;
+    const endWidth = parentHeight * 0.4;
+
+    let breathPhase = Math.random() * Math.PI * 2;
+    const breathSpeed = 0.04;
+
+    tailGroup.updateAnim = () => {
+        breathPhase += breathSpeed;
+        const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
+        graphics.clear();
+        const currentLength = baseLength * breathScale;
+
+        const cos = Math.cos(tailRotation);
+        const sin = Math.sin(tailRotation);
+        const perpX = -sin;
+        const perpY = cos;
+
+        const p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
+        const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
+        const endCX = cos * currentLength;
+        const endCY = sin * currentLength;
+        const p3 = { x: endCX - perpX * (endWidth / 2), y: endCY - perpY * (endWidth / 2) };
+        const p4 = { x: endCX + perpX * (endWidth / 2), y: endCY + perpY * (endWidth / 2) };
+
+        const segments = 8;
+        for (let i = 0; i < segments; i++) {
+            const t1 = i / segments;
+            const t2 = (i + 1) / segments;
+            const alpha = 0.4 * (1 - t1);
+            const sp1 = { x: p1.x + (p4.x - p1.x) * t1, y: p1.y + (p4.y - p1.y) * t1 };
+            const sp2 = { x: p2.x + (p3.x - p2.x) * t1, y: p2.y + (p3.y - p2.y) * t1 };
+            const ep1 = { x: p1.x + (p4.x - p1.x) * t2, y: p1.y + (p4.y - p1.y) * t2 };
+            const ep2 = { x: p2.x + (p3.x - p2.x) * t2, y: p2.y + (p3.y - p2.y) * t2 };
+            graphics.beginFill(bgColor, alpha);
+            graphics.moveTo(sp1.x, sp1.y);
+            graphics.lineTo(sp2.x, sp2.y);
+            graphics.lineTo(ep2.x, ep2.y);
+            graphics.lineTo(ep1.x, ep1.y);
+            graphics.endFill();
+        }
+    };
+    tailGroup.updateAnim();
+    return tailGroup;
+};
+
+const handleResize = () => {
+    const container = getContainerDOM();
+    if (!app || !container) return;
+    app.destroy(true, { children: true, texture: true, baseTexture: true });
+    app = null;
+    initPixi();
+};
+</script>
+
+<style scoped>
+.out {
+    width: 100%;
+    height: 100%;
+}
+.loading {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.semicircle-loader {
+    width: 150rpx;
+    height: 150rpx;
+    border: 12rpx solid #f3f3f3;
+    border-top: 12rpx solid #3498db;
+    border-radius: 50%;
+    animation: spin 1.2s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    color: #b9d3ff;
+}
+</style>

pages/index/components/AIMatch.vue

@@ -3,35 +3,42 @@
     <view v-if="loading" class="loading">
       <view class="semicircle-loader"></view>
     </view>
-        <view v-else class="container" id="pixi-box" ref="pixiContainerRef"></view>
+    <view class="container" id="pixi-box" ref="pixiContainerRef"></view>
+    <!-- 通信组件 -->
+    <view style="display: none" :random="random" :change:random="appModule.initPixi" :tagsConfig="tagsConfig" :change:tagsConfig="appModule.setTags" />
   </view>
 </template>
 
-<script setup>
+<script>
-import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
+export default {
-
+  props: {
-const props = defineProps({
     tags: {
       type: Array,
-        default: [],
+      default: () => [],
     },
     loading: {
       type: Boolean,
-        default: false,
+      default: () => false,
     },
+  },
+  watch: {
+    tags: {
+      handler(val) {
+        if (val && val.length) {
+          this.tagsConfig.map((tag, index) => {
+            tag.name = val[index]?.job_name;
           });
-const emit = defineEmits(['tag-click']);
+          setTimeout(() => {
-
+            this.random++;
-// DOM Ref
+          }, 100);
-const pixiContainerRef = ref(null);
+        }
-
+      },
-// PIXI 变量
+      deep: true,
-let app = null;
+    },
-let tagsContainer = null;
+  },
-let activeTagInstances = [];
+  data: () => ({
-
+    random: 0,
-// 配置数据
+    tagsConfig: [
-const tagsConfig = ref([
       { bgColor: 0x0069fe, fontColor: 0xffffff, size: 16, opacity: 1.0, angle: 0, radius: 0 },
       {
         bgColor: 0x87e2ec,
@@ -80,7 +87,6 @@ const tagsConfig = ref([
         radius: 100,
         tailRotation: -(3 * Math.PI) / 4.5,
       },
-
       {
         bgColor: 0xff9400,
         fontColor: 0xffffff,
@@ -118,55 +124,57 @@ const tagsConfig = ref([
         radius: 120,
         tailRotation: Math.PI / 3,
       },
-]);
+    ],
-
+  }),
-watch(
+  methods: {
-    () => props.tags,
+    tagClick(tagData) {
-    (val) => {
+      this.$emit("tag-click", tagData);
-        if (val && val.length) {
+    },
-            tagsConfig.value.map((tag, index) => {
-                // console.log(val[index])
-                tag.name = val[index]?.job_name;
-            });
-            setTimeout(() => {
-                initPixi();
-            }, 100);
-        }
   },
-    { deep: true }
-);
-
-onMounted(async () => {
-    window.addEventListener('resize', handleResize);
-});
-
-onUnmounted(() => {
-    window.removeEventListener('resize', handleResize);
-    if (app) {
-        app.destroy(true, { children: true, texture: true, baseTexture: true });
-        app = null;
-    }
-});
-
-const getContainerDOM = () => {
-    const refVal = pixiContainerRef.value;
-    if (!refVal) return document.getElementById('pixi-box');
-    if (refVal.$el) return refVal.$el;
-    return refVal;
 };
+</script>
+
+<script module="appModule" lang="renderjs">
 
 const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
-const initPixi = () => {
+export default {
-    const container = getContainerDOM();
+  data() {
+    return {
+      app:null,
+      finallyTags:[],
+      tagsContainer:null,
+      activeTagInstances:[],
+    }
+  },
+  mounted() {
+     window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    if (this.app) {
+        this.app.destroy(true, { children: true, texture: true, baseTexture: true });
+        this.app = null;
+    }
+    window.removeEventListener("resize", this.handleResize);
+  },
+  methods:{
+    setTags(tags){
+      this.finallyTags = [...tags]
+      console.log(this.finallyTags,'+++++')
+    },
+    getContainerDOM(){
+      return document.getElementById('pixi-box');
+    },
+    initPixi(random){
+      if(!random > 0) return
+      const container = this.getContainerDOM();
       if (!container) return;
-
       const width = container.clientWidth || 300;
       const height = container.clientHeight || 300;
 
-    if (app) return;
+      if (this.app) return;
 
-    app = new PIXI.Application({
+      this.app = new PIXI.Application({
           width: width,
           height: height,
           backgroundAlpha: 0,
@@ -175,31 +183,45 @@ const initPixi = () => {
           resolution: window.devicePixelRatio || 1,
           autoDensity: true,
       });
-    app.view.style.touchAction = 'auto';
+      this.app.view.style.touchAction = 'auto';
 
-    container.appendChild(app.view);
+      container.appendChild(this.app.view);
 
-    tagsContainer = new PIXI.Container();
+      this.tagsContainer = new PIXI.Container();
-    app.stage.addChild(tagsContainer);
+      this.app.stage.addChild(this.tagsContainer);
 
-    renderScene(width, height);
+      this.renderScene(width, height);
-};
+    },
 
-const renderScene = (sw, sh) => {
+    renderScene(sw, sh){
       let ratio = window.innerWidth / 400;
       if (ratio < 1) ratio = 1;
-    tagsContainer.removeChildren();
-    activeTagInstances = [];
 
-    tagsConfig.value.forEach((data, index) => {
+      // 先清理旧的标签事件监听器
+      if (this.activeTagInstances && this.activeTagInstances.length > 0) {
+        this.activeTagInstances.forEach(tag => {
+          if (tag) {
+            tag.eventMode = 'none';
+            tag.removeAllListeners();
+          }
+        });
+        this.activeTagInstances = [];
+      }
+      // 确保容器清空
+      if (this.tagsContainer) {
+        this.tagsContainer.removeChildren();
+      }
+      
+      
+      this.finallyTags.forEach((data, index) => {
         const scaledRadius = data.radius * ratio;
 
         let x = sw / 2 + scaledRadius * Math.cos(data.angle);
         let y = sh / 2 + scaledRadius * Math.sin(data.angle);
 
-        const tag = createTag(data, index, ratio);
+        const tag = this.createTag(data, index, ratio);
 
-        tagsContainer.addChild(tag);
+        this.tagsContainer.addChild(tag);
 
         const safeW = tag.width / 2 + 10;
         const safeH = tag.height / 2 + 10;
@@ -224,7 +246,7 @@ const renderScene = (sw, sh) => {
         };
 
         if (data.radius > 0) {
-            const tail = createCometTail(
+            const tail = this.createCometTail(
                 data.tailColor || data.bgColor,
                 data.tailRotation,
                 tag.width,
@@ -235,13 +257,13 @@ const renderScene = (sw, sh) => {
             tag.updateTail = () => tail.updateAnim();
         }
 
-        activeTagInstances.push(tag);
+        this.activeTagInstances.push(tag);
     });
 
       // 动画循环
-    app.ticker.add(() => {
+      this.app.ticker.add(() => {
-        const screenH = app.screen.height;
+        const screenH = this.app.screen.height;
-        activeTagInstances.forEach((tag) => {
+        this.activeTagInstances.forEach((tag) => {
             const meta = tag.userData;
             if (meta) {
                 // 计算新的浮动位置
@@ -258,15 +280,17 @@ const renderScene = (sw, sh) => {
             }
         });
     });
-};
+    },
 
-const createTag = (tagData, index, ratio) => {
+    createTag(tagData, index, ratio){
       if (ratio > 1) ratio = ratio * 0.9;
       const tagGroup = new PIXI.Container();
-    tagGroup.eventMode = 'static';
       tagGroup.cursor = 'pointer';
+      tagGroup.eventMode = 'static';
       
-    tagGroup.on('pointertap', () => emit('tag-click', tagData));
+      tagGroup.on('pointertap', () =>{
+        this.$ownerInstance.callMethod('tagClick', tagData);
+      });
 
       const text = new PIXI.Text(tagData.name, {
           fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
@@ -293,9 +317,9 @@ const createTag = (tagData, index, ratio) => {
       tagGroup.addChild(text);
 
       return tagGroup;
-};
+    },
 
-const createCometTail = (bgColor, tailRotation, parentWidth, parentHeight, ratio) => {
+    createCometTail(bgColor, tailRotation, parentWidth, parentHeight, ratio){
       if (ratio > 1) ratio = ratio;
       const tailGroup = new PIXI.Container();
       const graphics = new PIXI.Graphics();
@@ -345,15 +369,18 @@ const createCometTail = (bgColor, tailRotation, parentWidth, parentHeight, ratio
       };
       tailGroup.updateAnim();
       return tailGroup;
-};
+    },
 
-const handleResize = () => {
+    handleResize(){
-    const container = getContainerDOM();
+      const container = this.getContainerDOM();
-    if (!app || !container) return;
+      if (!this.app || !container) return;
-    app.destroy(true, { children: true, texture: true, baseTexture: true });
+      this.app.destroy(true, { children: true, texture: true, baseTexture: true });
-    app = null;
+      this.app = null;
-    initPixi();
+      this.initPixi(1);
-};
+    },
+  }
+
+}
 </script>
 
 <style scoped>

pages/index/index.vue

@@ -18,8 +18,13 @@
                         v-for="(_, index) in 2"
                         :key="index"
                     >
-                        <component
+                        <IndexRefactor
-                            :is="components[index]"
+                            v-if="index === 0"
+                            @onShowTabbar="changeShowTabbar"
+                            :ref="(el) => handelComponentsRef(el, index)"
+                        />
+                        <IndexTwo
+                            v-if="index === 1"
                             @onShowTabbar="changeShowTabbar"
                             :ref="(el) => handelComponentsRef(el, index)"
                         />

stores/useScreenStore.js

@@ -5,7 +5,10 @@ import {
     ref,
     computed
 } from 'vue';
+
+// #ifndef MP-WEIXIN
 import wideScreenStyles from '../common/wide-screen.css?inline';
+// #endif
 
 // 屏幕检测管理器类
 class ScreenDetectionManager {