refactor: 优化UI组件结构与积分系统

重构部分UI组件脚本结构，统一导入风格，提升可维护性。CardUnlockOverlay解锁条件弹窗改为列表展示，提升可读性。修复QueueNotifications滚动区域高度。ScrollableDialogContent增加最大高度。StarsBackground与ParticlesBg组件代码格式优化。App.vue引入玩家积分定时更新逻辑，NPC成长系统补充间谍探测器修复。
2026-05-12 16:05:12 +08:00 · 2025-12-18 03:47:38 +08:00
parent 2e3ac1231f
commit 2ed15c4782
42 changed files with 1342 additions and 749 deletions
--- a/src/components/ui/bg-stars/StarsBackground.vue
+++ b/src/components/ui/bg-stars/StarsBackground.vue
@@ -1,26 +1,17 @@
 <template>
  <div
-    :class="
-      cn(
-        'relative size-full overflow-hidden bg-[radial-gradient(ellipse_at_bottom,_#262626_0%,_#000_100%)]',
-        props.class,
-      )
-    "
+    :class="cn('relative size-full overflow-hidden bg-[radial-gradient(ellipse_at_bottom,_#262626_0%,_#000_100%)]', props.class)"
    @mousemove="handleMouseMove"
  >
    <motion.div :style="{ x: springX, y: springY }">
      <!-- Star Layer 1 -->
-      <motion.div
-        class="absolute top-0 left-0 w-full h-[2000px]"
-        :animate="{ y: [0, -2000] }"
-        :transition="starLayer1Transition"
-      >
+      <motion.div class="absolute top-0 left-0 w-full h-[2000px]" :animate="{ y: [0, -2000] }" :transition="starLayer1Transition">
        <div
          class="absolute bg-transparent rounded-full"
          :style="{
            width: '1px',
            height: '1px',
-            boxShadow: boxShadow1,
+            boxShadow: boxShadow1
          }"
        />
        <div
@@ -28,23 +19,19 @@
          :style="{
            width: '1px',
            height: '1px',
-            boxShadow: boxShadow1,
+            boxShadow: boxShadow1
          }"
        />
      </motion.div>

      <!-- Star Layer 2 -->
-      <motion.div
-        class="absolute top-0 left-0 w-full h-[2000px]"
-        :animate="{ y: [0, -2000] }"
-        :transition="starLayer2Transition"
-      >
+      <motion.div class="absolute top-0 left-0 w-full h-[2000px]" :animate="{ y: [0, -2000] }" :transition="starLayer2Transition">
        <div
          class="absolute bg-transparent rounded-full"
          :style="{
            width: '2px',
            height: '2px',
-            boxShadow: boxShadow2,
+            boxShadow: boxShadow2
          }"
        />
        <div
@@ -52,23 +39,19 @@
          :style="{
            width: '2px',
            height: '2px',
-            boxShadow: boxShadow2,
+            boxShadow: boxShadow2
          }"
        />
      </motion.div>

      <!-- Star Layer 3 -->
-      <motion.div
-        class="absolute top-0 left-0 w-full h-[2000px]"
-        :animate="{ y: [0, -2000] }"
-        :transition="starLayer3Transition"
-      >
+      <motion.div class="absolute top-0 left-0 w-full h-[2000px]" :animate="{ y: [0, -2000] }" :transition="starLayer3Transition">
        <div
          class="absolute bg-transparent rounded-full"
          :style="{
            width: '3px',
            height: '3px',
-            boxShadow: boxShadow3,
+            boxShadow: boxShadow3
          }"
        />
        <div
@@ -76,7 +59,7 @@
          :style="{
            width: '3px',
            height: '3px',
-            boxShadow: boxShadow3,
+            boxShadow: boxShadow3
          }"
        />
      </motion.div>
@@ -88,89 +71,89 @@
 </template>

 <script setup lang="ts">
-import type {SpringOptions, Transition} from "motion-v";
-import { cn } from "@/lib/utils";
-import { motion, useMotionValue, useSpring } from "motion-v";
-import { computed, onMounted, ref, watch } from "vue";
+  import type { SpringOptions, Transition } from 'motion-v'
+  import { cn } from '@/lib/utils'
+  import { motion, useMotionValue, useSpring } from 'motion-v'
+  import { computed, onMounted, ref, watch } from 'vue'

-interface StarsBackgroundProps {
-  factor?: number;
-  speed?: number;
-  transition?: SpringOptions;
-  starColor?: string;
-  class?: string;
-}
-
-const props = withDefaults(defineProps<StarsBackgroundProps>(), {
-  factor: 0.05,
-  speed: 50,
-  transition: () => ({ stiffness: 50, damping: 20 }),
-  starColor: "#fff",
-});
-
-// For slot content
-defineSlots();
-
-function generateStars(count: number, starColor: string) {
-  const shadows: string[] = [];
-  for (let i = 0; i < count; i++) {
-    const x = Math.floor(Math.random() * 4000) - 2000;
-    const y = Math.floor(Math.random() * 4000) - 2000;
-    shadows.push(`${x}px ${y}px ${starColor}`);
+  interface StarsBackgroundProps {
+    factor?: number
+    speed?: number
+    transition?: SpringOptions
+    starColor?: string
+    class?: string
  }
-  return shadows.join(", ");
-}

-const offsetX = useMotionValue(1);
-const offsetY = useMotionValue(1);
+  const props = withDefaults(defineProps<StarsBackgroundProps>(), {
+    factor: 0.05,
+    speed: 50,
+    transition: () => ({ stiffness: 50, damping: 20 }),
+    starColor: '#fff'
+  })

-const springX = useSpring(offsetX, props.transition);
-const springY = useSpring(offsetY, props.transition);
+  // For slot content
+  defineSlots()

-function handleMouseMove(e: MouseEvent) {
-  const centerX = window.innerWidth / 2;
-  const centerY = window.innerHeight / 2;
-  const newOffsetX = -(e.clientX - centerX) * props.factor;
-  const newOffsetY = -(e.clientY - centerY) * props.factor;
-  offsetX.set(newOffsetX);
-  offsetY.set(newOffsetY);
-}
+  function generateStars(count: number, starColor: string) {
+    const shadows: string[] = []
+    for (let i = 0; i < count; i++) {
+      const x = Math.floor(Math.random() * 4000) - 2000
+      const y = Math.floor(Math.random() * 4000) - 2000
+      shadows.push(`${x}px ${y}px ${starColor}`)
+    }
+    return shadows.join(', ')
+  }

-const boxShadow1 = ref("");
-const boxShadow2 = ref("");
-const boxShadow3 = ref("");
+  const offsetX = useMotionValue(1)
+  const offsetY = useMotionValue(1)

-onMounted(() => {
-  boxShadow1.value = generateStars(1000, props.starColor);
-  boxShadow2.value = generateStars(400, props.starColor);
-  boxShadow3.value = generateStars(200, props.starColor);
-});
+  const springX = useSpring(offsetX, props.transition)
+  const springY = useSpring(offsetY, props.transition)

-// Watch for starColor changes
-watch(
-  () => props.starColor,
-  (newColor) => {
-    boxShadow1.value = generateStars(1000, newColor);
-    boxShadow2.value = generateStars(400, newColor);
-    boxShadow3.value = generateStars(200, newColor);
-  },
-);
+  function handleMouseMove(e: MouseEvent) {
+    const centerX = window.innerWidth / 2
+    const centerY = window.innerHeight / 2
+    const newOffsetX = -(e.clientX - centerX) * props.factor
+    const newOffsetY = -(e.clientY - centerY) * props.factor
+    offsetX.set(newOffsetX)
+    offsetY.set(newOffsetY)
+  }

-const starLayer1Transition = computed<Transition>(() => ({
-  repeat: Infinity,
-  duration: props.speed,
-  ease: "linear" as const,
-}));
+  const boxShadow1 = ref('')
+  const boxShadow2 = ref('')
+  const boxShadow3 = ref('')

-const starLayer2Transition = computed<Transition>(() => ({
-  repeat: Infinity,
-  duration: props.speed * 2,
-  ease: "linear" as const,
-}));
+  onMounted(() => {
+    boxShadow1.value = generateStars(1000, props.starColor)
+    boxShadow2.value = generateStars(400, props.starColor)
+    boxShadow3.value = generateStars(200, props.starColor)
+  })

-const starLayer3Transition = computed<Transition>(() => ({
-  repeat: Infinity,
-  duration: props.speed * 3,
-  ease: "linear" as const,
-}));
+  // Watch for starColor changes
+  watch(
+    () => props.starColor,
+    newColor => {
+      boxShadow1.value = generateStars(1000, newColor)
+      boxShadow2.value = generateStars(400, newColor)
+      boxShadow3.value = generateStars(200, newColor)
+    }
+  )
+
+  const starLayer1Transition = computed<Transition>(() => ({
+    repeat: Infinity,
+    duration: props.speed,
+    ease: 'linear' as const
+  }))
+
+  const starLayer2Transition = computed<Transition>(() => ({
+    repeat: Infinity,
+    duration: props.speed * 2,
+    ease: 'linear' as const
+  }))
+
+  const starLayer3Transition = computed<Transition>(() => ({
+    repeat: Infinity,
+    duration: props.speed * 3,
+    ease: 'linear' as const
+  }))
 </script>
--- a/src/components/ui/bg-stars/index.ts
+++ b/src/components/ui/bg-stars/index.ts
@@ -1 +1 @@
-export { default as StarsBackground } from "./StarsBackground.vue";
+export { default as StarsBackground } from './StarsBackground.vue'