暂存
This commit is contained in:
@@ -1,4 +1,12 @@
|
|||||||
|
// #ifdef H5
|
||||||
import '@/lib/encryption/sm4.min.js'
|
import '@/lib/encryption/sm4.min.js'
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
import { sm4 } from 'sm-crypto';
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
|
||||||
import useUserStore from "../stores/useUserStore";
|
import useUserStore from "../stores/useUserStore";
|
||||||
import {
|
import {
|
||||||
createRequestWithCache,
|
createRequestWithCache,
|
||||||
@@ -601,7 +609,6 @@ export function sm4Decrypt(key, value, mode = "hex") {
|
|||||||
cipherType: mode === 'hex' ? 'hex' : 'base64',
|
cipherType: mode === 'hex' ? 'hex' : 'base64',
|
||||||
padding: 'pkcs#5'
|
padding: 'pkcs#5'
|
||||||
});
|
});
|
||||||
|
|
||||||
return decrypted
|
return decrypted
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -638,9 +645,13 @@ export function reloadBrowser() {
|
|||||||
export function isY9MachineType() {
|
export function isY9MachineType() {
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const ua = navigator.userAgent;
|
const ua = navigator.userAgent;
|
||||||
const isY9Machine = /Y9-ZYYH/i.test(ua); // 匹配机器型号
|
const isY9Machine = /Y9-ZYYH/i.test(ua); // 匹配机器型号
|
||||||
return isY9Machine;
|
return isY9Machine;
|
||||||
|
} catch (error) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 一体机环境判断
|
// 一体机环境判断
|
||||||
@@ -648,10 +659,16 @@ export function isAsdMachineType() {
|
|||||||
// const ua = navigator.userAgent;
|
// const ua = navigator.userAgent;
|
||||||
// const isY9Machine = /asd_hanweb/i.test(ua); // 匹配机器型号
|
// const isY9Machine = /asd_hanweb/i.test(ua); // 匹配机器型号
|
||||||
// return isY9Machine;
|
// return isY9Machine;
|
||||||
return !!lightAppJssdk.user
|
try {
|
||||||
|
return !!lightAppJssdk.user
|
||||||
|
} catch (error) {
|
||||||
|
false
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const $api = {
|
export const $api = {
|
||||||
msg,
|
msg,
|
||||||
prePage,
|
prePage,
|
||||||
|
|||||||
@@ -1,46 +1,39 @@
|
|||||||
<template>
|
<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>
|
||||||
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
export default {
|
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
|
||||||
props: {
|
|
||||||
|
const props = defineProps({
|
||||||
tags: {
|
tags: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: [],
|
||||||
},
|
},
|
||||||
loading: {
|
loading: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: () => false,
|
default: false,
|
||||||
},
|
},
|
||||||
},
|
});
|
||||||
watch: {
|
const emit = defineEmits(['tag-click']);
|
||||||
tags: {
|
|
||||||
handler(val) {
|
// DOM Ref
|
||||||
if (val && val.length) {
|
const pixiContainerRef = ref(null);
|
||||||
this.tagsConfig.map((tag, index) => {
|
|
||||||
tag.name = val[index]?.job_name;
|
// PIXI 变量
|
||||||
});
|
let app = null;
|
||||||
setTimeout(() => {
|
let tagsContainer = null;
|
||||||
this.random++;
|
let activeTagInstances = [];
|
||||||
}, 100);
|
|
||||||
}
|
// 配置数据
|
||||||
},
|
const tagsConfig = ref([
|
||||||
deep: true,
|
{ bgColor: 0x0069fe, fontColor: 0xffffff, size: 16, opacity: 1.0, angle: 0, radius: 0 },
|
||||||
},
|
{
|
||||||
},
|
|
||||||
data: () => ({
|
|
||||||
random: 0,
|
|
||||||
tagsConfig: [
|
|
||||||
{ bgColor: 0x0069fe, fontColor: 0xffffff, size: 16, opacity: 1.0, angle: 0, radius: 0 },
|
|
||||||
{
|
|
||||||
bgColor: 0x87e2ec,
|
bgColor: 0x87e2ec,
|
||||||
fontColor: 0xffffff,
|
fontColor: 0xffffff,
|
||||||
size: 14,
|
size: 14,
|
||||||
@@ -48,8 +41,8 @@ export default {
|
|||||||
angle: -Math.PI / 2,
|
angle: -Math.PI / 2,
|
||||||
radius: 68,
|
radius: 68,
|
||||||
tailRotation: Math.PI / 2,
|
tailRotation: Math.PI / 2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
bgColor: 0xffebeb,
|
bgColor: 0xffebeb,
|
||||||
tailColor: 0xffe1e1,
|
tailColor: 0xffe1e1,
|
||||||
fontColor: 0xff6969,
|
fontColor: 0xff6969,
|
||||||
@@ -58,8 +51,8 @@ export default {
|
|||||||
angle: -Math.PI / 4.2,
|
angle: -Math.PI / 4.2,
|
||||||
radius: 125,
|
radius: 125,
|
||||||
tailRotation: (3 * Math.PI) / 4.5,
|
tailRotation: (3 * Math.PI) / 4.5,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
bgColor: 0x21ea85,
|
bgColor: 0x21ea85,
|
||||||
fontColor: 0xffffff,
|
fontColor: 0xffffff,
|
||||||
size: 15,
|
size: 15,
|
||||||
@@ -67,8 +60,8 @@ export default {
|
|||||||
angle: -Math.PI / 10,
|
angle: -Math.PI / 10,
|
||||||
radius: 130,
|
radius: 130,
|
||||||
tailRotation: (3 * Math.PI) / 4.2,
|
tailRotation: (3 * Math.PI) / 4.2,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
bgColor: 0xebf3ff,
|
bgColor: 0xebf3ff,
|
||||||
tailColor: 0xb9d3ff,
|
tailColor: 0xb9d3ff,
|
||||||
fontColor: 0x1d71ef,
|
fontColor: 0x1d71ef,
|
||||||
@@ -77,8 +70,8 @@ export default {
|
|||||||
angle: Math.PI / 18,
|
angle: Math.PI / 18,
|
||||||
radius: 135,
|
radius: 135,
|
||||||
tailRotation: (3 * Math.PI) / 4.3,
|
tailRotation: (3 * Math.PI) / 4.3,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
bgColor: 0xffd4b6,
|
bgColor: 0xffd4b6,
|
||||||
fontColor: 0xffffff,
|
fontColor: 0xffffff,
|
||||||
size: 14,
|
size: 14,
|
||||||
@@ -86,8 +79,9 @@ export default {
|
|||||||
angle: Math.PI / 4.3,
|
angle: Math.PI / 4.3,
|
||||||
radius: 100,
|
radius: 100,
|
||||||
tailRotation: -(3 * Math.PI) / 4.5,
|
tailRotation: -(3 * Math.PI) / 4.5,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
|
{
|
||||||
bgColor: 0xff9400,
|
bgColor: 0xff9400,
|
||||||
fontColor: 0xffffff,
|
fontColor: 0xffffff,
|
||||||
size: 14,
|
size: 14,
|
||||||
@@ -95,8 +89,8 @@ export default {
|
|||||||
angle: (2 * Math.PI) / 3,
|
angle: (2 * Math.PI) / 3,
|
||||||
radius: 92,
|
radius: 92,
|
||||||
tailRotation: -Math.PI / 2.4,
|
tailRotation: -Math.PI / 2.4,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
bgColor: 0xebf3ff,
|
bgColor: 0xebf3ff,
|
||||||
tailColor: 0xb9d3ff,
|
tailColor: 0xb9d3ff,
|
||||||
fontColor: 0x1d71ef,
|
fontColor: 0x1d71ef,
|
||||||
@@ -105,8 +99,8 @@ export default {
|
|||||||
angle: (5.4 * Math.PI) / 6,
|
angle: (5.4 * Math.PI) / 6,
|
||||||
radius: 110,
|
radius: 110,
|
||||||
tailRotation: (3 * Math.PI) / 1.79,
|
tailRotation: (3 * Math.PI) / 1.79,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
bgColor: 0xff6969,
|
bgColor: 0xff6969,
|
||||||
fontColor: 0xffffff,
|
fontColor: 0xffffff,
|
||||||
size: 14,
|
size: 14,
|
||||||
@@ -114,8 +108,8 @@ export default {
|
|||||||
angle: (6.3 * Math.PI) / 5.8,
|
angle: (6.3 * Math.PI) / 5.8,
|
||||||
radius: 120,
|
radius: 120,
|
||||||
tailRotation: Math.PI / 2.9,
|
tailRotation: Math.PI / 2.9,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
bgColor: 0xfce9c9,
|
bgColor: 0xfce9c9,
|
||||||
fontColor: 0xfbc55f,
|
fontColor: 0xfbc55f,
|
||||||
size: 13,
|
size: 13,
|
||||||
@@ -123,105 +117,89 @@ export default {
|
|||||||
angle: (7.2 * Math.PI) / 5.9,
|
angle: (7.2 * Math.PI) / 5.9,
|
||||||
radius: 120,
|
radius: 120,
|
||||||
tailRotation: Math.PI / 3,
|
tailRotation: Math.PI / 3,
|
||||||
},
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
methods: {
|
|
||||||
tagClick(tagData) {
|
|
||||||
this.$emit("tag-click", tagData);
|
|
||||||
},
|
},
|
||||||
},
|
]);
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script module="appModule" lang="renderjs">
|
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 clamp = (num, min, max) => Math.min(Math.max(num, min), max);
|
||||||
|
|
||||||
export default {
|
const initPixi = () => {
|
||||||
data() {
|
const container = getContainerDOM();
|
||||||
return {
|
if (!container) 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 (this.app) return;
|
const width = container.clientWidth || 300;
|
||||||
|
const height = container.clientHeight || 300;
|
||||||
|
|
||||||
this.app = new PIXI.Application({
|
if (app) return;
|
||||||
width: width,
|
|
||||||
height: height,
|
|
||||||
backgroundAlpha: 0,
|
|
||||||
backgroundColor: 0xf5f7fa,
|
|
||||||
antialias: true,
|
|
||||||
resolution: window.devicePixelRatio || 1,
|
|
||||||
autoDensity: true,
|
|
||||||
});
|
|
||||||
this.app.view.style.touchAction = 'auto';
|
|
||||||
|
|
||||||
container.appendChild(this.app.view);
|
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';
|
||||||
|
|
||||||
this.tagsContainer = new PIXI.Container();
|
container.appendChild(app.view);
|
||||||
this.app.stage.addChild(this.tagsContainer);
|
|
||||||
|
|
||||||
this.renderScene(width, height);
|
tagsContainer = new PIXI.Container();
|
||||||
},
|
app.stage.addChild(tagsContainer);
|
||||||
|
|
||||||
renderScene(sw, sh){
|
renderScene(width, height);
|
||||||
let ratio = window.innerWidth / 400;
|
};
|
||||||
if (ratio < 1) ratio = 1;
|
|
||||||
|
|
||||||
// 先清理旧的标签事件监听器
|
const renderScene = (sw, sh) => {
|
||||||
if (this.activeTagInstances && this.activeTagInstances.length > 0) {
|
let ratio = window.innerWidth / 400;
|
||||||
this.activeTagInstances.forEach(tag => {
|
if (ratio < 1) ratio = 1;
|
||||||
if (tag) {
|
tagsContainer.removeChildren();
|
||||||
tag.eventMode = 'none';
|
activeTagInstances = [];
|
||||||
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;
|
const scaledRadius = data.radius * ratio;
|
||||||
|
|
||||||
let x = sw / 2 + scaledRadius * Math.cos(data.angle);
|
let x = sw / 2 + scaledRadius * Math.cos(data.angle);
|
||||||
let y = sh / 2 + scaledRadius * Math.sin(data.angle);
|
let y = sh / 2 + scaledRadius * Math.sin(data.angle);
|
||||||
|
|
||||||
const tag = this.createTag(data, index, ratio);
|
const tag = createTag(data, index, ratio);
|
||||||
|
|
||||||
this.tagsContainer.addChild(tag);
|
tagsContainer.addChild(tag);
|
||||||
|
|
||||||
const safeW = tag.width / 2 + 10;
|
const safeW = tag.width / 2 + 10;
|
||||||
const safeH = tag.height / 2 + 10;
|
const safeH = tag.height / 2 + 10;
|
||||||
@@ -246,7 +224,7 @@ export default {
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (data.radius > 0) {
|
if (data.radius > 0) {
|
||||||
const tail = this.createCometTail(
|
const tail = createCometTail(
|
||||||
data.tailColor || data.bgColor,
|
data.tailColor || data.bgColor,
|
||||||
data.tailRotation,
|
data.tailRotation,
|
||||||
tag.width,
|
tag.width,
|
||||||
@@ -257,13 +235,13 @@ export default {
|
|||||||
tag.updateTail = () => tail.updateAnim();
|
tag.updateTail = () => tail.updateAnim();
|
||||||
}
|
}
|
||||||
|
|
||||||
this.activeTagInstances.push(tag);
|
activeTagInstances.push(tag);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 动画循环
|
// 动画循环
|
||||||
this.app.ticker.add(() => {
|
app.ticker.add(() => {
|
||||||
const screenH = this.app.screen.height;
|
const screenH = app.screen.height;
|
||||||
this.activeTagInstances.forEach((tag) => {
|
activeTagInstances.forEach((tag) => {
|
||||||
const meta = tag.userData;
|
const meta = tag.userData;
|
||||||
if (meta) {
|
if (meta) {
|
||||||
// 计算新的浮动位置
|
// 计算新的浮动位置
|
||||||
@@ -280,143 +258,138 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
};
|
||||||
|
|
||||||
createTag(tagData, index, ratio){
|
const 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.cursor = 'pointer';
|
tagGroup.eventMode = 'static';
|
||||||
tagGroup.eventMode = 'static';
|
tagGroup.cursor = 'pointer';
|
||||||
|
|
||||||
tagGroup.on('pointertap', () =>{
|
|
||||||
this.$ownerInstance.callMethod('tagClick', tagData);
|
|
||||||
});
|
|
||||||
|
|
||||||
const text = new PIXI.Text(tagData.name, {
|
tagGroup.on('pointertap', () => emit('tag-click', tagData));
|
||||||
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 text = new PIXI.Text(tagData.name, {
|
||||||
const paddingV = 10 * ratio;
|
fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
|
||||||
let bgWidth = text.width + paddingH;
|
fontSize: tagData.size * ratio,
|
||||||
let bgHeight = text.height + paddingV;
|
fill: tagData.fontColor,
|
||||||
|
padding: 4 * ratio,
|
||||||
|
resolution: 2,
|
||||||
|
});
|
||||||
|
text.anchor.set(0.5);
|
||||||
|
|
||||||
if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
|
const paddingH = 26 * ratio;
|
||||||
|
const paddingV = 10 * ratio;
|
||||||
|
let bgWidth = text.width + paddingH;
|
||||||
|
let bgHeight = text.height + paddingV;
|
||||||
|
|
||||||
const bg = new PIXI.Graphics();
|
if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
|
||||||
bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
|
|
||||||
bg.drawRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, bgHeight / 2);
|
|
||||||
bg.endFill();
|
|
||||||
|
|
||||||
tagGroup.addChild(bg);
|
const bg = new PIXI.Graphics();
|
||||||
tagGroup.addChild(text);
|
bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
|
||||||
|
bg.drawRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, bgHeight / 2);
|
||||||
|
bg.endFill();
|
||||||
|
|
||||||
return tagGroup;
|
tagGroup.addChild(bg);
|
||||||
},
|
tagGroup.addChild(text);
|
||||||
|
|
||||||
createCometTail(bgColor, tailRotation, parentWidth, parentHeight, ratio){
|
return tagGroup;
|
||||||
if (ratio > 1) ratio = ratio;
|
};
|
||||||
const tailGroup = new PIXI.Container();
|
|
||||||
const graphics = new PIXI.Graphics();
|
|
||||||
tailGroup.addChild(graphics);
|
|
||||||
|
|
||||||
const baseLength = 45 * ratio;
|
const createCometTail = (bgColor, tailRotation, parentWidth, parentHeight, ratio) => {
|
||||||
const startWidth = parentHeight + 20 * ratio;
|
if (ratio > 1) ratio = ratio;
|
||||||
const endWidth = parentHeight * 0.4;
|
const tailGroup = new PIXI.Container();
|
||||||
|
const graphics = new PIXI.Graphics();
|
||||||
|
tailGroup.addChild(graphics);
|
||||||
|
|
||||||
let breathPhase = Math.random() * Math.PI * 2;
|
const baseLength = 45 * ratio;
|
||||||
const breathSpeed = 0.04;
|
const startWidth = parentHeight + 20 * ratio;
|
||||||
|
const endWidth = parentHeight * 0.4;
|
||||||
|
|
||||||
tailGroup.updateAnim = () => {
|
let breathPhase = Math.random() * Math.PI * 2;
|
||||||
breathPhase += breathSpeed;
|
const breathSpeed = 0.04;
|
||||||
const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
|
|
||||||
graphics.clear();
|
|
||||||
const currentLength = baseLength * breathScale;
|
|
||||||
|
|
||||||
const cos = Math.cos(tailRotation);
|
tailGroup.updateAnim = () => {
|
||||||
const sin = Math.sin(tailRotation);
|
breathPhase += breathSpeed;
|
||||||
const perpX = -sin;
|
const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
|
||||||
const perpY = cos;
|
graphics.clear();
|
||||||
|
const currentLength = baseLength * breathScale;
|
||||||
|
|
||||||
const p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
|
const cos = Math.cos(tailRotation);
|
||||||
const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
|
const sin = Math.sin(tailRotation);
|
||||||
const endCX = cos * currentLength;
|
const perpX = -sin;
|
||||||
const endCY = sin * currentLength;
|
const perpY = cos;
|
||||||
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;
|
const p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
|
||||||
for (let i = 0; i < segments; i++) {
|
const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
|
||||||
const t1 = i / segments;
|
const endCX = cos * currentLength;
|
||||||
const t2 = (i + 1) / segments;
|
const endCY = sin * currentLength;
|
||||||
const alpha = 0.4 * (1 - t1);
|
const p3 = { 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 p4 = { x: endCX + perpX * (endWidth / 2), y: endCY + perpY * (endWidth / 2) };
|
||||||
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;
|
|
||||||
},
|
|
||||||
|
|
||||||
handleResize(){
|
const segments = 8;
|
||||||
const container = this.getContainerDOM();
|
for (let i = 0; i < segments; i++) {
|
||||||
if (!this.app || !container) return;
|
const t1 = i / segments;
|
||||||
this.app.destroy(true, { children: true, texture: true, baseTexture: true });
|
const t2 = (i + 1) / segments;
|
||||||
this.app = null;
|
const alpha = 0.4 * (1 - t1);
|
||||||
this.initPixi(1);
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.out {
|
.out {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.loading {
|
.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 {
|
.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 {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: #b9d3ff;
|
color: #b9d3ff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -22,6 +22,9 @@ const useLocationStore = defineStore("location", () => {
|
|||||||
const count = ref(0)
|
const count = ref(0)
|
||||||
|
|
||||||
function getLocation() { // 获取经纬度两个平台
|
function getLocation() { // 获取经纬度两个平台
|
||||||
|
// #ifndef H5
|
||||||
|
const lightAppJssdk = {}
|
||||||
|
// #endif
|
||||||
return new Promise((resole, reject) => {
|
return new Promise((resole, reject) => {
|
||||||
try {
|
try {
|
||||||
if (lightAppJssdk.map) {
|
if (lightAppJssdk.map) {
|
||||||
|
|||||||
@@ -52,17 +52,25 @@ class ScreenDetectionManager {
|
|||||||
|
|
||||||
// 检测折叠屏
|
// 检测折叠屏
|
||||||
checkVisualViewport() {
|
checkVisualViewport() {
|
||||||
if (window.visualViewport?.segments?.length > 1) {
|
try {
|
||||||
return {
|
if (window.visualViewport?.segments?.length > 1) {
|
||||||
foldable: true,
|
return {
|
||||||
count: window.visualViewport.segments.length - 1
|
foldable: true,
|
||||||
|
count: window.visualViewport.segments.length - 1
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
foldable: false,
|
||||||
|
count: 1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} catch (error) {
|
||||||
return {
|
return {
|
||||||
foldable: false,
|
foldable: false,
|
||||||
count: 1
|
count: 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 动态加载 CSS
|
// 动态加载 CSS
|
||||||
|
|||||||
19
utils/db.js
19
utils/db.js
@@ -1,4 +1,5 @@
|
|||||||
import IndexedDBHelper from '@/common/IndexedDBHelper.js'
|
import IndexedDBHelper from '@/common/IndexedDBHelper.js'
|
||||||
|
import UniStorageHelper from '@/common/UniStorageHelper.js'
|
||||||
import useChatGroupDBStore from '@/stores/userChatGroupStore'
|
import useChatGroupDBStore from '@/stores/userChatGroupStore'
|
||||||
import config from '@/config'
|
import config from '@/config'
|
||||||
|
|
||||||
@@ -66,7 +67,14 @@ class BaseStore {
|
|||||||
}
|
}
|
||||||
|
|
||||||
initDB() {
|
initDB() {
|
||||||
|
// #ifdef H5
|
||||||
this.db = new IndexedDBHelper(this.dbName, config.DBversion);
|
this.db = new IndexedDBHelper(this.dbName, config.DBversion);
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
this.db = new UniStorageHelper(this.dbName, config.DBversion);
|
||||||
|
// #endif
|
||||||
|
|
||||||
return this.db.openDB([{
|
return this.db.openDB([{
|
||||||
name: 'record',
|
name: 'record',
|
||||||
keyPath: "id",
|
keyPath: "id",
|
||||||
@@ -103,8 +111,15 @@ class BaseStore {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async clearDB() {
|
async clearDB() {
|
||||||
// 修正拼写错误并优化 Promise 写法
|
|
||||||
return new IndexedDBHelper().deleteDB(this.dbName);
|
|
||||||
|
// #ifdef H5
|
||||||
|
return new IndexedDBHelper().deleteDB(this.dbName);
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifndef H5
|
||||||
|
return new UniStorageHelper().deleteDB(this.dbName);
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user