From 3ede84b678b88b0d5e93ef9663588a68d1f5b7a5 Mon Sep 17 00:00:00 2001
From: liqi <qiqiqiyoucili@163.com>
Date: Wed, 7 May 2025 23:53:52 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A9=BA=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/frontend/Home.vue     | 76 ++++++++++++++++-------------
 src/views/frontend/Projects.vue | 86 +++++++++++++++++++--------------
 2 files changed, 94 insertions(+), 68 deletions(-)

diff --git a/src/views/frontend/Home.vue b/src/views/frontend/Home.vue
index c464814..1989673 100644
--- a/src/views/frontend/Home.vue
+++ b/src/views/frontend/Home.vue
@@ -42,35 +42,7 @@ const projects = ref([
   }
 ])
 
-const carousel = ref([
-  {
-    id: 1,
-    title: '电商平台',
-    labels: ['Vue3', 'Node.js', 'PHP'],
-    category: ['Web', 'Uni app', '微信小程序'],
-    description: '基于Vue3和Node.js开发的电商平台，提供完整的购物流程，包括注册、登录、购物、支付等功能。',
-    cover: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
-    route: '1'
-  },
-  {
-    id: 2,
-    title: 'OA系统',
-    labels: ['React', 'PHP'],
-    category: ['Web', 'Uni app', '微信小程序'],
-    description: '基于React和PHP开发的OA系统，提供完整的流程管理、审批、报表等功能。亮点：1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统',
-    cover: 'https://img2.baidu.com/it/u=1629222614,1358629025&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
-    route: '2'
-  },
-  {
-    id: 2,
-    title: '团购app',
-    labels: ['React', 'PHP'],
-    category: ['Web', 'Uni app', '微信小程序'],
-    description: '基于React和PHP开发的OA系统，提供完整的流程管理、审批、报表等功能。亮点：1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统',
-    cover: 'https://img1.baidu.com/it/u=362305842,3264792867&fm=253&fmt=auto?w=712&h=712',
-    route: '2'
-  }
-])
+const carousel = ref([])
 
 const testimonials = [
   {
@@ -102,21 +74,27 @@ const partners = [
   { name: 'Microsoft', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
 ]
 
+const projectLoading  = ref(false);
 const getProjectList = () => {
+  projectLoading.value = true;
   homeProjectListApi({
     page: 1,
     pageSize: 6
   }).then((res) => {
-    projects.value = res.items
+    projects.value = res.items;
+    projectLoading.value = false
   })
 }
 
+const swiperOptionsLoading = ref(false);
 const getCarouseList = () => {
+  swiperOptionsLoading.value = true;
   homeCarouselListApi({
     page: 1,
     pageSize: 6
   }).then((res) => {
-    carousel.value = res.items
+    carousel.value = res.items;
+    swiperOptionsLoading.value = false
   })
 }
 
@@ -155,7 +133,12 @@ const breakpoints = {
   <div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
       <!-- 高端轮播图 -->
-      <div class="mb-20 lg:mb-28" data-aos="fade-up">
+
+      <div v-if="swiperOptionsLoading" class="col-span-full text-center text-gray-500 dark:text-gray-400">
+        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-rose-500 mx-auto mb-4"></div>
+        加载中...
+      </div>
+      <div v-else class="mb-20 lg:mb-28" data-aos="fade-up">
         <swiper
             :modules="modules"
             :effect="'fade'"
@@ -169,7 +152,20 @@ const breakpoints = {
             :loop="true"
             class="rounded-[2rem] overflow-hidden shadow-[0_20px_50px_rgba(8,112,184,0.01)] hover:shadow-[0_25px_60px_rgba(8,112,184,0.2)] transition-all duration-700"
         >
+          <swiper-slide v-if="carousel.length === 0">
+
+            <div class="relative h-[70vh] max-h-[800px] min-h-[500px] w-full overflow-hidden col-span-full text-center text-gray-500 dark:text-gray-400 items-center">
+
+              <div style="margin: 200px auto;">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                管理员没有设置轮播图
+              </div>
+            </div>
+          </swiper-slide>
           <swiper-slide
+              v-else
               v-for="(project, index) in carousel"
               :key="project.id"
               class="group cursor-pointer"
@@ -262,8 +258,22 @@ const breakpoints = {
           </a>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
+        <div v-if="projectLoading" class="col-span-full text-center text-gray-500 dark:text-gray-400">
+          <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-rose-500 mx-auto mb-4"></div>
+          加载中...
+        </div>
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
+          <div v-if="projects.length === 0" class="group bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 hover:scale-[1.02] cursor-pointer">
+
+              <div class=" text-center text-gray-500 dark:text-gray-400 items-center" style="margin: 200px auto;">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                暂时没有精选项目
+              </div>
+          </div>
           <div
+              v-else
               v-for="(project, index) in projects"
               :key="project.id"
               class="group bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 hover:scale-[1.02] cursor-pointer"
diff --git a/src/views/frontend/Projects.vue b/src/views/frontend/Projects.vue
index e4015b0..d845cb0 100644
--- a/src/views/frontend/Projects.vue
+++ b/src/views/frontend/Projects.vue
@@ -52,8 +52,13 @@ const pageSize = ref(8)
 const totalItems = ref(0)
 const pageCount = ref(0)
 
+// 新增 loading 状态
+const loading = ref(false)
+
 const getList = () => {
+  loading.value = true // 开始加载
   projectListApi({
+    title: searchQuery.value,
     page: currentPage.value,
     pageSize: pageSize.value,
   }).then((res) => {
@@ -62,6 +67,9 @@ const getList = () => {
     pageSize.value = res.size;
     totalItems.value = res.total;
     pageCount.value = res.page_count;
+    loading.value = false // 加载结束
+  }).catch(() => {
+    loading.value = false // 加载出错
   })
 }
 // 筛选排序逻辑
@@ -144,8 +152,12 @@ const changePage = (page) => {
   currentPage.value = page
   getList();
 }
-</script>
 
+const reset = () => {
+  searchQuery.value = '';
+  getList();
+}
+</script>
 <template>
   <div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen py-12">
     <div class="max-w-6xl mx-auto px-6">
@@ -166,7 +178,7 @@ const changePage = (page) => {
       <!-- 过滤排序栏 -->
       <div class="mb-10" data-aos="fade-up">
         <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
-          <div class="grid grid-cols-1 md:grid-cols-1 gap-6">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <!-- 搜索框 -->
             <div class="relative">
               <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -184,48 +196,53 @@ const changePage = (page) => {
               />
             </div>
 
-<!--            &lt;!&ndash; 分类选择 &ndash;&gt;-->
-<!--            <div>-->
-<!--              <select-->
-<!--                  v-model="selectedCategory"-->
-<!--                  class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl px-4 py-2 focus:ring-rose-500 focus:border-rose-500 dark:text-white"-->
-<!--              >-->
-<!--                <option-->
-<!--                    v-for="category in categories"-->
-<!--                    :key="category.id"-->
-<!--                    :value="category.value"-->
-<!--                >-->
-<!--                  {{ category.name }}-->
-<!--                </option>-->
-<!--              </select>-->
-<!--            </div>-->
+            <div class="relative flex">
+              <!-- 查询按钮  -->
+              <button
+                  class="w-30 px-5 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
+                  @click="getList()"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+                &emsp;
+                搜索
+              </button>
 
-<!--            &lt;!&ndash; 排序选择 &ndash;&gt;-->
-<!--            <div>-->
-<!--              <select-->
-<!--                  v-model="sortBy"-->
-<!--                  class="w-full bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl px-4 py-2 focus:ring-rose-500 focus:border-rose-500 dark:text-white"-->
-<!--              >-->
-<!--                <option-->
-<!--                    v-for="option in sortOptions"-->
-<!--                    :key="option.value"-->
-<!--                    :value="option.value"-->
-<!--                >-->
-<!--                  {{ option.label }}-->
-<!--                </option>-->
-<!--              </select>-->
-<!--            </div>-->
+              <!-- 重置按钮  -->
+              <button
+                  class="w-30 px-5 py-2 ml-2 bg-gray-200 hover:bg-gray-300 text-gray-600 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center cursor-pointer"
+                  @click="reset()"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                </svg>
+                &emsp;
+                重置
+              </button>
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="text-rose-900 mb-6 font-bold">
+      <div class="text-rose-900 mb-6 font-bold font-">
         共 {{ totalItems }} 个项目
       </div>
       <!-- 项目卡片网格 -->
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <div v-if="loading" class="col-span-full text-center text-gray-500 dark:text-gray-400">
+          <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-rose-500 mx-auto mb-4"></div>
+          加载中...
+        </div>
+        <div v-else-if="projects.length === 0" class="col-span-full text-center text-gray-500 dark:text-gray-400">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          没有相关项目
+        </div>
         <div
-            v-for="(project, index) in filteredProjects"
+            v-else
+            v-for="(project, index) in projects"
             :key="project.id"
             class="group bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 cursor-pointer"
             :data-aos="getAosEffect(index)"
@@ -286,7 +303,6 @@ const changePage = (page) => {
         </div>
       </div>
 
-      <!-- 分页 -->
       <!-- 分页 -->
       <div class="mt-16 flex justify-center" data-aos="fade-up">
         <nav class="flex items-center space-x-2">