upload project source code

前端源码/uni-app/components/screens/Analysis.vue

@@ -0,0 +1,131 @@
+<template>
+  <view class="analysis-screen">
+    <!-- Starry Background -->
+    <view class="analysis-bg">
+      <view class="analysis-bg-gradient"></view>
+      <view 
+        v-for="s in stars" 
+        :key="s.id" 
+        class="analysis-star"
+        :style="{top: s.top + '%', left: s.left + '%', width: s.size + 'px', height: s.size + 'px'}">
+      </view>
+      <view class="analysis-bg-blur-1"></view>
+      <view class="analysis-bg-blur-2"></view>
+    </view>
+
+    <!-- Loading / Analyzing Stage -->
+    <view v-if="stage !== 'result'" class="analysis-loading">
+      <MysticCompass />
+    </view>
+
+    <!-- Result Stage -->
+    <AnalysisResult v-else @back="$emit('back')" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import MysticCompass from '../MysticCompass.vue';
+import AnalysisResult from '../AnalysisResult.vue';
+
+const emit = defineEmits<{
+  back: [];
+}>();
+
+const stage = ref<'loading' | 'analyzing' | 'result'>('loading');
+
+// Starry background
+const stars = ref(Array.from({ length: 50 }).map((_, i) => ({
+  id: i,
+  top: Math.random() * 100,
+  left: Math.random() * 100,
+  size: Math.random() * 2 + 1
+})));
+
+onMounted(() => {
+  setTimeout(() => {
+    stage.value = 'analyzing';
+  }, 100);
+  
+  setTimeout(() => {
+    stage.value = 'result';
+  }, 3500);
+});
+</script>
+
+<style scoped>
+.analysis-screen {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+  font-family: SimSun, "Songti SC", "Songti TC", "Noto Serif SC", STSong, serif;
+  color: #e2e2e2;
+}
+
+/* Background */
+.analysis-bg {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.analysis-bg-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, #050508, #10101a, #1a1a2e);
+}
+
+.analysis-star {
+  position: absolute;
+  border-radius: 50%;
+  background: white;
+  opacity: 0.2;
+  animation: twinkle 3s ease-in-out infinite;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(1.2); }
+}
+
+.analysis-bg-blur-1 {
+  position: absolute;
+  top: -10%;
+  left: -10%;
+  width: 50%;
+  height: 50%;
+  background: #2a3d5d;
+  opacity: 0.2;
+  filter: blur(100px);
+  border-radius: 50%;
+}
+
+.analysis-bg-blur-2 {
+  position: absolute;
+  bottom: -10%;
+  right: -10%;
+  width: 50%;
+  height: 50%;
+  background: #9c2a2a;
+  opacity: 0.1;
+  filter: blur(100px);
+  border-radius: 50%;
+}
+
+/* Loading Stage */
+.analysis-loading {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+}
+</style>