shoot-miniprograms/src/App.vue

<script setup>
import { watch } from "vue";
import websocket from "@/websocket";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);

watch(
  () => user.value.id,
  (newVal) => {
    const token = uni.getStorageSync("token");
    if (newVal && token) {
      websocket.createWebSocket(token, (content) => {
        uni.$emit("socket-inbox", content);
      });
    }
  },
  {
    deep: false, // 如果 user 是一个对象或数组，建议开启
    immediate: false, // 若想在初始化时立即执行一次回调，可开启。
  }
);
</script>

<style>
page {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  line-height: 1;
  outline: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* 添加这行，去除点击高亮 */
}

button::after {
  border: none;
}

/* 修改点击态样式 */
button:active {
  border: none;
  background: none !important; /* 添加 !important 确保覆盖默认样式 */
  opacity: 1 !important; /* 防止透明度变化 */
}

/* 去除按钮的默认边框和点击效果 */
button[plain] {
  border: none;
  background: none !important;
}

/* 去除点击态的所有效果 */
button:hover,
button.hover {
  background: none !important;
}

.guide-tips {
  display: flex;
  flex-direction: column;
}
.guide-tips > text:first-child {
  color: #fed847;
}

@keyframes fadeIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes scaleIn {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.scale-in {
  animation: scaleIn 0.3s ease-out forwards;
  transform-origin: center center;
}

@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}

.scale-out {
  animation: scaleOut 0.3s ease-out forwards;
  transform-origin: center center;
}
</style>