From cd107feec210556edc4276a114e885e22e33f15e Mon Sep 17 00:00:00 2001
From: ApplePine <djl@applepine.cn>
Date: Sat, 21 Jun 2025 11:36:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(Search):=20=E6=B7=BB=E5=8A=A0=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=20Loading=20=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 free-video-backend/package.json |  2 +-
 rsbuild.config.mjs              |  2 +-
 src/views/VideoSearch.vue       | 38 +++++++++++++++++++++++++++++++--
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/free-video-backend/package.json b/free-video-backend/package.json
index f641954..6fc37a4 100644
--- a/free-video-backend/package.json
+++ b/free-video-backend/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "free_backend",
 	"scripts": {
-		"dev": "bun run --hot src/index.ts",
+		"dev": "bun run --hot server.ts",
 		"build": "bun build ./server.ts --outdir=./dist --target bun",
 		"compile": "bun build ./server.ts --compile --outfile server",
 		"start": "bun run ./dist/server.js"
diff --git a/rsbuild.config.mjs b/rsbuild.config.mjs
index aa477e7..ac29c51 100644
--- a/rsbuild.config.mjs
+++ b/rsbuild.config.mjs
@@ -8,7 +8,7 @@ export default defineConfig({
 		open: true,
 		proxy: {
 			'/api': {
-				target: 'http://localhost:3000',
+				target: 'http://localhost:30002',
 				changeOrigin: true,
 				secure: false,
 			},
diff --git a/src/views/VideoSearch.vue b/src/views/VideoSearch.vue
index 4d85771..733128b 100644
--- a/src/views/VideoSearch.vue
+++ b/src/views/VideoSearch.vue
@@ -98,9 +98,15 @@
 				</el-card>
 			</div>
 
+			<!-- 加载中状态 -->
+			<div v-if="isSearching" class="loading-container">
+				<el-icon class="loading-icon is-loading" size="48"><Loading /></el-icon>
+				<p>正在搜索中...</p>
+			</div>
+
 			<!-- 无搜索结果时的提示 -->
 			<el-empty
-				v-if="hasSearched && searchResults.length === 0"
+				v-if="hasSearched && !isSearching && searchResults.length === 0"
 				description="没有找到相关视频"
 			></el-empty>
 
@@ -152,7 +158,7 @@
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { Search, VideoPlay, Timer } from '@element-plus/icons-vue'
+import { Search, VideoPlay, Timer, Loading } from '@element-plus/icons-vue'
 import { ElMessage } from 'element-plus'
 import { useStore } from '../store/index'
 import axios from 'axios'
@@ -636,4 +642,32 @@ onUnmounted(() => {
 :deep(.el-empty__description) {
 	color: white;
 }
+
+.loading-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	margin: 40px 0;
+	color: white;
+}
+
+.loading-container p {
+	margin-top: 20px;
+	font-size: 16px;
+}
+
+.loading-icon {
+	animation: rotating 2s linear infinite;
+	color: #409eff;
+}
+
+@keyframes rotating {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
 </style>