From 5bd0c81020f151c01439336a7859e29401944246 Mon Sep 17 00:00:00 2001
From: liulujian <liulujian@liantu.tech>
Date: Sat, 4 Jul 2026 23:41:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=B1=E6=80=A7=E8=83=BD=E5=8A=9B?=
 =?UTF-8?q?=E5=B9=B3=E5=8F=B0=E5=85=A8=E9=9D=A2=E4=BC=98=E5=8C=966?=
 =?UTF-8?q?=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

① 空状态/加载态替换为 EmptyState + SkeletonCard 组件
② 列表顶部增加统计摘要 (收录链接/覆盖分类/我的收藏)
③ 卡片去灰色实线边框,改用阴影,与列表页统一
④ 卡片 hover 上浮 -3px + 绿色阴影
⑤ '查看更多'按钮升级:箭头图标+hover圆角边框+绿色反馈
⑥ 收藏空态加引导按钮'浏览链接'

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/pages/index/views/gxnlpt/index.vue    | 74 +++++++++++++++----
 1 file changed, 59 insertions(+), 15 deletions(-)

diff --git a/txw-mhzc-web/src/pages/index/views/gxnlpt/index.vue b/txw-mhzc-web/src/pages/index/views/gxnlpt/index.vue
index e977c75..14f2f20 100644
--- a/txw-mhzc-web/src/pages/index/views/gxnlpt/index.vue
+++ b/txw-mhzc-web/src/pages/index/views/gxnlpt/index.vue
@@ -155,8 +155,15 @@
               <span class="gxnlpt-favorites-star" aria-hidden="true"></span>
               <h2 class="gxnlpt-block-title">我的收藏</h2>
             </header>
-            <div v-if="favoritesLoading" class="gxnlpt-state">加载中...</div>
-            <div v-else-if="!favoriteCards.length" class="gxnlpt-state">暂无收藏</div>
+            <SkeletonCard v-if="favoritesLoading" :count="3" />
+            <EmptyState
+              v-else-if="!favoriteCards.length"
+              type="empty"
+              text="暂无收藏"
+              hint="浏览共性能力链接，收藏感兴趣的内容"
+              action-text="浏览链接"
+              @action="contentView = 'list'"
+            />
             <div v-else class="gxnlpt-card-grid">
               <article
                 v-for="card in favoriteCards"
@@ -189,6 +196,10 @@
           </section>
 
           <template v-else>
+          <!-- 统计摘要 -->
+          <StatsSummary v-if="!pageLoading" :items="statsItems" />
+          <!-- 加载骨架 -->
+          <SkeletonCard v-if="pageLoading" :count="6" />
           <section
             v-for="{ item, index } in listSections"
             :key="item.id"
@@ -201,8 +212,12 @@
               <h2 class="gxnlpt-block-title">{{ item.title }}</h2>
             </header>
 
-            <div v-if="pageLoading && index === 0" class="gxnlpt-state">加载中...</div>
-            <div v-else-if="!pageLoading && !item.displayList.length" class="gxnlpt-state">暂无相关服务</div>
+            <div v-if="pageLoading && index === 0"></div>
+            <EmptyState
+              v-else-if="!pageLoading && !item.displayList.length"
+              type="empty"
+              text="暂无相关服务"
+            />
             <template v-else-if="item.displayList.length">
               <div class="gxnlpt-card-grid">
                 <article
@@ -235,7 +250,8 @@
                 class="gxnlpt-more-wrap"
               >
                 <button type="button" class="gxnlpt-more" @click="toggleViewMore(item)">
-                  {{ item.visibleCount >= item.cardList.length ? '收起' : '查看更多>>' }}
+                  <span>{{ item.visibleCount >= item.cardList.length ? '收起' : '查看更多' }}</span>
+                  <span class="gxnlpt-more-arrow" :class="{ 'is-reverse': item.visibleCount >= item.cardList.length }">›</span>
                 </button>
               </div>
             </template>
@@ -290,6 +306,9 @@
 
 <script>
 import GxnlptCardTags from '@/pages/index/views/gxnlpt/components/GxnlptCardTags.vue';
+import EmptyState from '@/pages/index/components/EmptyState.vue';
+import StatsSummary from '@/pages/index/components/StatsSummary.vue';
+import SkeletonCard from '@/pages/index/components/SkeletonCard.vue';
 // import api from '@/pages/index/api/gxnl/index.js';  // TODO 前端模拟数据，暂不请求后端
 // 兜底数据：204 条共性能力链接
 // 来源：可信碳共性能力网站导航.xlsx
@@ -705,7 +724,7 @@ const SUBMIT_FORM_EMPTY = () => ({
 export default {
   name: 'GxnlptIndex',
   mixins: [portalFigmaScaleMixin, comingSoonMixin],
-  components: { GxnlptCardTags },
+  components: { GxnlptCardTags, EmptyState, StatsSummary, SkeletonCard },
   data() {
     return {
       starOutline,
@@ -764,6 +783,16 @@ export default {
       });
       return list;
     },
+    statsItems() {
+      const totalLinks = this.categoryList.reduce((s, c) => s + c.cardList.length, 0);
+      const totalCats = this.categoryList.filter((c) => c.cardList.length > 0).length;
+      const totalFavs = this.favoriteCards.length;
+      return [
+        { label: '收录链接', value: totalLinks || 0 },
+        { label: '覆盖分类', value: totalCats || '—' },
+        { label: '我的收藏', value: totalFavs || 0 },
+      ];
+    },
   },
   created() {
     this.stackedNavLayout = readStackedNavLayout();
@@ -2454,15 +2483,16 @@ html.portal-figma-scale-active .gxnlpt-page {
   min-height: @gxnlpt-card-min-height;
   padding: @gxnlpt-card-padding-y @gxnlpt-card-padding-x;
   background: #fff;
-  border: 1px solid fade(#000, 10%);
+  border: none;
   border-radius: @gxnlpt-card-radius;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
   cursor: pointer;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-radius 0.2s ease;
 
   &:hover {
-    border-color: @home-color-primary-green;
+    transform: translateY(-3px);
     border-radius: @gxnlpt-card-radius-hover;
-    box-shadow: @home-shadow-card-green;
+    box-shadow: 0 8px 24px rgba(0, 154, 41, 0.12);
   }
 }
 
@@ -2579,9 +2609,11 @@ html.portal-figma-scale-active .gxnlpt-page {
 }
 
 .gxnlpt-more {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   margin: 0;
-  padding: 0;
+  padding: 4px 12px;
   font-family: @home-font-family;
   font-size: 14px;
   font-weight: 400;
@@ -2592,19 +2624,31 @@ html.portal-figma-scale-active .gxnlpt-page {
   cursor: pointer;
   appearance: none;
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
+  border-radius: 6px;
   outline: none;
+  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
 
   &:hover {
-    opacity: 0.75;
+    color: @home-color-primary-green;
+    border-color: fade(@home-color-primary-green, 30%);
+    background: fade(@home-color-primary-green, 4%);
   }
 
   &:focus-visible {
     box-shadow: 0 0 0 2px fade(@home-color-primary-dark, 25%);
-    border-radius: 2px;
+    border-radius: 6px;
   }
 }
 
+.gxnlpt-more-arrow {
+  display: inline-block;
+  font-size: 18px;
+  line-height: 1;
+  transition: transform 0.2s ease;
+  &.is-reverse { transform: rotate(180deg); }
+}
+
 /* 收录表单 */
 .gxnlpt-submit {
   display: flex;