空状态

2025-05-07 23:53:52 +08:00
parent cfc763decf
commit 3ede84b678
2 changed files with 94 additions and 68 deletions
--- 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"
--- 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">