暂存

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

@@ -1,39 +1,46 @@
 <template>
-    <view class="out">
+  <view class="out">
-        <view v-if="loading" class="loading">
+    <view v-if="loading" class="loading">
-            <view class="semicircle-loader"></view>
+      <view class="semicircle-loader"></view>
-        </view>
-        <view v-else class="container" id="pixi-box" ref="pixiContainerRef"></view>
     </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,
+      type: Array,
-        default: [],
+      default: () => [],
     },
     loading: {
-        type: Boolean,
+      type: Boolean,
-        default: false,
+      default: () => false,
     },
-});
+  },
-const emit = defineEmits(['tag-click']);
+  watch: {
-
+    tags: {
-// DOM Ref
+      handler(val) {
-const pixiContainerRef = ref(null);
+        if (val && val.length) {
-
+          this.tagsConfig.map((tag, index) => {
-// PIXI 变量
+            tag.name = val[index]?.job_name;
-let app = null;
+          });
-let tagsContainer = null;
+          setTimeout(() => {
-let activeTagInstances = [];
+            this.random++;
-
+          }, 100);
-// 配置数据
+        }
-const tagsConfig = ref([
+      },
-    { bgColor: 0x0069fe, fontColor: 0xffffff, size: 16, opacity: 1.0, angle: 0, radius: 0 },
+      deep: true,
-    {
+    },
+  },
+  data: () => ({
+    random: 0,
+    tagsConfig: [
+      { bgColor: 0x0069fe, fontColor: 0xffffff, size: 16, opacity: 1.0, angle: 0, radius: 0 },
+      {
         bgColor: 0x87e2ec,
         fontColor: 0xffffff,
         size: 14,
@@ -41,8 +48,8 @@ const tagsConfig = ref([
         angle: -Math.PI / 2,
         radius: 68,
         tailRotation: Math.PI / 2,
-    },
+      },
-    {
+      {
         bgColor: 0xffebeb,
         tailColor: 0xffe1e1,
         fontColor: 0xff6969,
@@ -51,8 +58,8 @@ const tagsConfig = ref([
         angle: -Math.PI / 4.2,
         radius: 125,
         tailRotation: (3 * Math.PI) / 4.5,
-    },
+      },
-    {
+      {
         bgColor: 0x21ea85,
         fontColor: 0xffffff,
         size: 15,
@@ -60,8 +67,8 @@ const tagsConfig = ref([
         angle: -Math.PI / 10,
         radius: 130,
         tailRotation: (3 * Math.PI) / 4.2,
-    },
+      },
-    {
+      {
         bgColor: 0xebf3ff,
         tailColor: 0xb9d3ff,
         fontColor: 0x1d71ef,
@@ -70,8 +77,8 @@ const tagsConfig = ref([
         angle: Math.PI / 18,
         radius: 135,
         tailRotation: (3 * Math.PI) / 4.3,
-    },
+      },
-    {
+      {
         bgColor: 0xffd4b6,
         fontColor: 0xffffff,
         size: 14,
@@ -79,9 +86,8 @@ const tagsConfig = ref([
         angle: Math.PI / 4.3,
         radius: 100,
         tailRotation: -(3 * Math.PI) / 4.5,
-    },
+      },
-
+      {
-    {
         bgColor: 0xff9400,
         fontColor: 0xffffff,
         size: 14,
@@ -89,8 +95,8 @@ const tagsConfig = ref([
         angle: (2 * Math.PI) / 3,
         radius: 92,
         tailRotation: -Math.PI / 2.4,
-    },
+      },
-    {
+      {
         bgColor: 0xebf3ff,
         tailColor: 0xb9d3ff,
         fontColor: 0x1d71ef,
@@ -99,8 +105,8 @@ const tagsConfig = ref([
         angle: (5.4 * Math.PI) / 6,
         radius: 110,
         tailRotation: (3 * Math.PI) / 1.79,
-    },
+      },
-    {
+      {
         bgColor: 0xff6969,
         fontColor: 0xffffff,
         size: 14,
@@ -108,8 +114,8 @@ const tagsConfig = ref([
         angle: (6.3 * Math.PI) / 5.8,
         radius: 120,
         tailRotation: Math.PI / 2.9,
-    },
+      },
-    {
+      {
         bgColor: 0xfce9c9,
         fontColor: 0xfbc55f,
         size: 13,
@@ -117,89 +123,105 @@ const tagsConfig = ref([
         angle: (7.2 * Math.PI) / 5.9,
         radius: 120,
         tailRotation: Math.PI / 3,
+      },
+    ],
+  }),
+  methods: {
+    tagClick(tagData) {
+      this.$emit("tag-click", tagData);
     },
-]);
+  },
-
-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;
 };
+</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() {
-    if (!container) return;
+    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;
 
-    const width = container.clientWidth || 300;
+      if (this.app) return;
-    const height = container.clientHeight || 300;
 
-    if (app) return;
+      this.app = new PIXI.Application({
+          width: width,
+          height: height,
+          backgroundAlpha: 0,
+          backgroundColor: 0xf5f7fa,
+          antialias: true,
+          resolution: window.devicePixelRatio || 1,
+          autoDensity: true,
+      });
+      this.app.view.style.touchAction = 'auto';
 
-    app = new PIXI.Application({
+      container.appendChild(this.app.view);
-        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);
+      this.tagsContainer = new PIXI.Container();
+      this.app.stage.addChild(this.tagsContainer);
 
-    tagsContainer = new PIXI.Container();
+      this.renderScene(width, height);
-    app.stage.addChild(tagsContainer);
+    },
 
-    renderScene(width, height);
+    renderScene(sw, sh){
-};
+      let ratio = window.innerWidth / 400;
+      if (ratio < 1) ratio = 1;
 
-const renderScene = (sw, sh) => {
+      // 先清理旧的标签事件监听器
-    let ratio = window.innerWidth / 400;
+      if (this.activeTagInstances && this.activeTagInstances.length > 0) {
-    if (ratio < 1) ratio = 1;
+        this.activeTagInstances.forEach(tag => {
-    tagsContainer.removeChildren();
+          if (tag) {
-    activeTagInstances = [];
+            tag.eventMode = 'none';
-
+            tag.removeAllListeners();
-    tagsConfig.value.forEach((data, index) => {
+          }
+        });
+        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,138 +280,143 @@ const renderScene = (sw, sh) => {
             }
         });
     });
-};
+    },
 
-const createTag = (tagData, index, ratio) => {
+    createTag(tagData, index, ratio){
-    if (ratio > 1) ratio = ratio * 0.9;
+      if (ratio > 1) ratio = ratio * 0.9;
-    const tagGroup = new PIXI.Container();
+      const tagGroup = new PIXI.Container();
-    tagGroup.eventMode = 'static';
+      tagGroup.cursor = 'pointer';
-    tagGroup.cursor = 'pointer';
+      tagGroup.eventMode = 'static';
+      
+      tagGroup.on('pointertap', () =>{
+        this.$ownerInstance.callMethod('tagClick', tagData);
+      });
 
-    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 text = new PIXI.Text(tagData.name, {
+      const paddingH = 26 * ratio;
-        fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
+      const paddingV = 10 * ratio;
-        fontSize: tagData.size * ratio,
+      let bgWidth = text.width + paddingH;
-        fill: tagData.fontColor,
+      let bgHeight = text.height + paddingV;
-        padding: 4 * ratio,
-        resolution: 2,
-    });
-    text.anchor.set(0.5);
 
-    const paddingH = 26 * ratio;
+      if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
-    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();
 
-    const bg = new PIXI.Graphics();
+      tagGroup.addChild(bg);
-    bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
+      tagGroup.addChild(text);
-    bg.drawRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, bgHeight / 2);
-    bg.endFill();
 
-    tagGroup.addChild(bg);
+      return tagGroup;
-    tagGroup.addChild(text);
+    },
 
-    return tagGroup;
+    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 createCometTail = (bgColor, tailRotation, parentWidth, parentHeight, ratio) => {
+      const baseLength = 45 * ratio;
-    if (ratio > 1) ratio = ratio;
+      const startWidth = parentHeight + 20 * ratio;
-    const tailGroup = new PIXI.Container();
+      const endWidth = parentHeight * 0.4;
-    const graphics = new PIXI.Graphics();
-    tailGroup.addChild(graphics);
 
-    const baseLength = 45 * ratio;
+      let breathPhase = Math.random() * Math.PI * 2;
-    const startWidth = parentHeight + 20 * ratio;
+      const breathSpeed = 0.04;
-    const endWidth = parentHeight * 0.4;
 
-    let breathPhase = Math.random() * Math.PI * 2;
+      tailGroup.updateAnim = () => {
-    const breathSpeed = 0.04;
+          breathPhase += breathSpeed;
+          const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
+          graphics.clear();
+          const currentLength = baseLength * breathScale;
 
-    tailGroup.updateAnim = () => {
+          const cos = Math.cos(tailRotation);
-        breathPhase += breathSpeed;
+          const sin = Math.sin(tailRotation);
-        const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
+          const perpX = -sin;
-        graphics.clear();
+          const perpY = cos;
-        const currentLength = baseLength * breathScale;
 
-        const cos = Math.cos(tailRotation);
+          const p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
-        const sin = Math.sin(tailRotation);
+          const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
-        const perpX = -sin;
+          const endCX = cos * currentLength;
-        const perpY = cos;
+          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 p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
+          const segments = 8;
-        const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
+          for (let i = 0; i < segments; i++) {
-        const endCX = cos * currentLength;
+              const t1 = i / segments;
-        const endCY = sin * currentLength;
+              const t2 = (i + 1) / segments;
-        const p3 = { x: endCX - perpX * (endWidth / 2), y: endCY - perpY * (endWidth / 2) };
+              const alpha = 0.4 * (1 - t1);
-        const p4 = { x: endCX + perpX * (endWidth / 2), y: endCY + perpY * (endWidth / 2) };
+              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 segments = 8;
+    handleResize(){
-        for (let i = 0; i < segments; i++) {
+      const container = this.getContainerDOM();
-            const t1 = i / segments;
+      if (!this.app || !container) return;
-            const t2 = (i + 1) / segments;
+      this.app.destroy(true, { children: true, texture: true, baseTexture: true });
-            const alpha = 0.4 * (1 - t1);
+      this.app = null;
-            const sp1 = { x: p1.x + (p4.x - p1.x) * t1, y: p1.y + (p4.y - p1.y) * t1 };
+      this.initPixi(1);
-            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%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
 }
 .loading {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
 }
 .semicircle-loader {
-    width: 150rpx;
+  width: 150rpx;
-    height: 150rpx;
+  height: 150rpx;
-    border: 12rpx solid #f3f3f3;
+  border: 12rpx solid #f3f3f3;
-    border-top: 12rpx solid #3498db;
+  border-top: 12rpx solid #3498db;
-    border-radius: 50%;
+  border-radius: 50%;
-    animation: spin 1.2s linear infinite;
+  animation: spin 1.2s linear infinite;
 }
 
 @keyframes spin {
-    0% {
+  0% {
-        transform: rotate(0deg);
+    transform: rotate(0deg);
-    }
+  }
-    100% {
+  100% {
-        transform: rotate(360deg);
+    transform: rotate(360deg);
-    }
+  }
 }
 .container {
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    position: relative;
+  position: relative;
-    overflow: hidden;
+  overflow: hidden;
-    color: #b9d3ff;
+  color: #b9d3ff;
 }
 </style>

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 {