代码优化

2026-01-12 15:03:20 +08:00
parent 4771f53d71
commit a2674aae5b
5 changed files with 62 additions and 66 deletions
--- a/src/components/AppBackground.vue
+++ b/src/components/AppBackground.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { capsuleHeight } from "@/util";
+
 const props = defineProps({
  type: {
    type: Number,
@@ -10,11 +11,6 @@ const props = defineProps({
    default: "#050b19",
  },
 });
-const capsuleHeight = ref(0);
-onMounted(() => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top + 50 - 9;
-});
 </script>

 <template>
@@ -35,7 +31,7 @@ onMounted(() => {
      class="bg-image"
      v-if="type === 2"
      src="../static/app-bg3.png"
-      :style="{ height: capsuleHeight + 'px' }"
+      :style="{ height: capsuleHeight + 50 + 'px' }"
    />
    <image
      class="bg-image"
--- a/src/components/BowTargetEdit.vue
+++ b/src/components/BowTargetEdit.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import { getElementRect, calcRing } from "@/util";
+import { getElementRect, calcRing, capsuleHeight } from "@/util";

 const props = defineProps({
  id: {
@@ -25,7 +25,6 @@ const rect = ref({});
 const arrow = ref(null);
 const isDragging = ref(false);
 const dragStartPos = ref({ x: 0, y: 0 });
-const capsuleHeight = ref(0);
 const scale = ref(1);
 const scrollTop = ref(0);
 const selected = ref(null);
@@ -59,7 +58,7 @@ const onClick = async (e) => {
  }
  const newArrow = {
    x: (e.detail.x - 6) * scale.value,
-    y: (e.detail.y - rect.value.top - capsuleHeight.value - 6) * scale.value,
+    y: (e.detail.y - rect.value.top - capsuleHeight - 6) * scale.value,
  };

  const side = rect.value.width;
@@ -188,8 +187,6 @@ const setEditArrow = (data) => {
 };

 onMounted(async () => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
  const result = await getElementRect(".container");
  rect.value = result;
  uni.$on("set-edit-arrow", setEditArrow);
@@ -423,9 +420,17 @@ onBeforeUnmount(() => {
  animation: duang 0.35s ease-out;
 }
@keyframes duang {
-  0% { transform: translate(-50%, -50%) scale(0.7); }
-  45% { transform: translate(-50%, -50%) scale(1.4); }
-  70% { transform: translate(-50%, -50%) scale(0.9); }
-  100% { transform: translate(-50%, -50%) scale(1); }
+  0% {
+    transform: translate(-50%, -50%) scale(0.7);
+  }
+  45% {
+    transform: translate(-50%, -50%) scale(1.4);
+  }
+  70% {
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
 }
 </style>
--- a/src/components/Container.vue
+++ b/src/components/Container.vue
@@ -6,7 +6,7 @@ import Header from "@/components/Header.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import BackToGame from "@/components/BackToGame.vue";
 import { getCurrentGameAPI, laserAimAPI } from "@/apis";
-import { debounce } from "@/util";
+import { capsuleHeight, debounce } from "@/util";
 import AudioManager from "@/audioManager";
 const props = defineProps({
  title: {
@@ -49,7 +49,6 @@ const props = defineProps({
 const isIOS = uni.getDeviceInfo().osName === "ios";
 const showHint = ref(false);
 const hintType = ref(0);
-const capsuleHeight = ref(0);
 const isLoading = ref(false);
 const audioInitProgress = ref(1);
 const audioProgress = ref(0);
@@ -96,11 +95,6 @@ const audioFinalProgress = computed(() => {
  return Math.max(0, (audioProgress.value - audioInitProgress.value) / left);
 });

-onMounted(() => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
-});
-
 onBeforeUnmount(() => {
  if (audioTimer.value) clearInterval(audioTimer.value);
 });
@@ -162,7 +156,7 @@ const goCalibration = async () => {
      :show-scrollbar="false"
      :style="{
        height: `calc(100vh - ${capsuleHeight + (isHome ? 0 : 50)}px - ${
-          $slots.bottom && showBottom ? (isIOS ? '85px' : '65px') : '0px'
+          $slots.bottom && showBottom ? (isIOS ? '75px' : '65px') : '0px'
        })`,
      }"
    >
@@ -171,7 +165,7 @@ const goCalibration = async () => {
    <view
      class="bottom-part"
      v-if="$slots.bottom && showBottom"
-      :style="{ height: isIOS ? '75px' : '55px', paddingTop: '10px' }"
+      :style="{ height: isIOS ? '65px' : '55px', paddingTop: '10px' }"
    >
      <slot name="bottom"></slot>
    </view>
--- a/src/pages/device-intro.vue
+++ b/src/pages/device-intro.vue
@@ -2,6 +2,8 @@
 import { ref, onMounted } from "vue";
 import SButton from "@/components/SButton.vue";

+import { capsuleHeight } from "@/util";
+
 const images = [
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmf6yitekatwe.jpg",
  "https://static.shelingxingqiu.com/attachment/2025-09-04/dcjmxsmi475gqdtrvx.jpg",
@@ -14,12 +16,7 @@ const images = [
  "https://static.shelingxingqiu.com/attachment/2025-10-14/ddht51a3hiyw7ueli4.jpg",
 ];

-const addBg = ref("");
-const capsuleHeight = ref(0);
-onMounted(async () => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
-});
+const addBg = ref(false);

 const onScrollView = (e) => {
  addBg.value = e.detail.scrollTop > 100;
@@ -35,8 +32,7 @@ const onScrollView = (e) => {
      }"
    >
      <image
-        v-if="addBg"
-        class="bg-image"
+        :style="{ opacity: addBg ? 1 : 0 }"
        src="../static/app-bg.png"
        mode="widthFix"
      />
@@ -46,12 +42,17 @@ const onScrollView = (e) => {
      <text
        :style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
      >
-        本赛季排行榜
      </text>
    </view>
    <scroll-view scroll-y @scroll="onScrollView" :style="{ height: '100vh' }">
      <view class="images">
-        <image v-for="src in images" :key="src" :src="src" mode="widthFix" show-menu-by-longpress />
+        <image
+          v-for="src in images"
+          :key="src"
+          :src="src"
+          mode="widthFix"
+          show-menu-by-longpress
+        />
      </view>
    </scroll-view>
  </view>
@@ -71,7 +72,6 @@ const onScrollView = (e) => {
  align-items: center;
  position: fixed;
  top: 0;
-  transition: all 0.3s ease;
  z-index: 10;
  overflow: hidden;
 }
@@ -82,12 +82,19 @@ const onScrollView = (e) => {
  margin-top: 5px;
  position: relative;
 }
-.bg-image {
+.header > image:first-child {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
+  transition: all 0.5s ease;
+}
+.header > text {
+  color: #fff;
+  font-weight: bold;
+  transition: all 0.5s ease;
+  position: relative;
 }
 .images {
  display: flex;
--- a/src/pages/rank-list.vue
+++ b/src/pages/rank-list.vue
@@ -1,21 +1,19 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import Avatar from "@/components/Avatar.vue";
+import { capsuleHeight } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, rankData } = storeToRefs(store);
 const { getLvlName } = store;

-const capsuleHeight = ref(0);
 const selectedIndex = ref(0);
 const currentList = ref([]);
 const myData = ref({});
-const addBg = ref("");
+const addBg = ref(false);

 onMounted(async () => {
-  const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
-  capsuleHeight.value = menuBtnInfo.top - 9;
  handleSelect(0);
 });

@@ -66,19 +64,14 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
      }"
    >
      <image
-        v-if="addBg"
-        class="bg-image"
+        :style="{ opacity: addBg ? 1 : 0 }"
        src="../static/app-bg.png"
        mode="widthFix"
      />
      <navigator open-type="navigateBack">
        <image class="header-back" src="../static/back.png" mode="widthFix" />
      </navigator>
-      <text
-        :style="{ opacity: addBg ? 1 : 0, color: '#fff', fontWeight: 'bold' }"
-      >
-        本赛季排行榜
-      </text>
+      <text :style="{ opacity: addBg ? 1 : 0 }">本赛季排行榜</text>
    </view>
    <scroll-view
      scroll-y
@@ -231,13 +224,28 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
  align-items: center;
  position: fixed;
  top: 0;
-  transition: all 0.3s ease;
  z-index: 10;
  overflow: hidden;
 }
-.header text {
-  transition: all 0.3s ease;
-  line-height: 50px;
+.header-back {
+  width: 22px;
+  height: 22px;
+  margin: 0px 15px;
+  margin-top: 5px;
+  position: relative;
+}
+.header > image:first-child {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: all 0.5s ease;
+}
+.header > text {
+  color: #fff;
+  font-weight: bold;
+  transition: all 0.5s ease;
  position: relative;
 }
 .rank-tabs {
@@ -384,18 +392,4 @@ const subTitles = ["排位赛积分", "MVP次数", "十环次数"];
  color: #fff9;
  font-size: 14px;
 }
-.header-back {
-  width: 22px;
-  height: 22px;
-  margin: 0px 15px;
-  margin-top: 5px;
-  position: relative;
-}
-.bg-image {
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
 </style>