使用 gemini 优化 ImageAlbumCard.vue 和 ImageAlbumCard.vue 页面 UI

src/components/card/ImageAlbumCard.vue

@@ -1,38 +1,32 @@
 <template>
-  <el-col :xs="12" :sm="8" :md="6" :lg="4" class="album-col">
-    <div class="album-card-wrapper" @click="handleCardClick">
-      <el-card :body-style="{ padding: '0px' }" class="album-card" shadow="hover">
-        <div class="image-container">
-          <el-image
-              lazy
-              fit="cover"
-              :src="imageAlbum.coverUrl"
-              class="album-cover"
-          >
-            <div slot="placeholder" class="image-slot">
-              <i class="el-icon-loading"></i>
-            </div>
-          </el-image>
-
-          <div class="count-badge">
+  <div class="album-card-wrapper" @click="handleCardClick">
+    <el-card :body-style="{ padding: '0px' }" class="album-card" shadow="hover">
+      <div class="image-container">
+        <el-image
+          lazy
+          fit="cover"
+          :src="imageAlbum.coverUrl"
+          class="album-cover"
+        >
+          <div slot="error" class="image-slot">
             <i class="el-icon-picture-outline"></i>
-            <span>{{ imageAlbum.total }}</span>
           </div>
+        </el-image>
 
-          <div class="image-overlay">
-            <i class="el-icon-view"></i>
-          </div>
+        <div class="count-badge">
+          <i class="el-icon-picture-outline"></i>
+          <span>{{ imageAlbum.total }}</span>
         </div>
+      </div>
 
-        <div class="album-info">
-          <div class="album-title">{{ imageAlbum.albumName }}</div>
-          <div class="album-meta" v-if="imageAlbum.username">
-            <span class="author">@{{ imageAlbum.username }}</span>
-          </div>
+      <div class="album-info">
+        <div class="album-title">{{ imageAlbum.albumName }}</div>
+        <div class="album-meta" v-if="imageAlbum.username">
+          <span class="author">@{{ imageAlbum.username }}</span>
         </div>
-      </el-card>
-    </div>
-  </el-col>
+      </div>
+    </el-card>
+  </div>
 </template>
 
 <script>
@@ -41,171 +35,78 @@ export default {
   props: {
     imageAlbum: {
       type: Object,
-      required: true,
-      default: () => ({})
+      required: true
     }
   },
   methods: {
     handleCardClick() {
-      // 移动端通常直接跳转，PC端建议新窗口打开
-      const url = this.$router.resolve(`/image/${this.imageAlbum.albumId}`).href;
-      window.open(url, '_blank');
+      this.$router.push(`/image/${this.imageAlbum.albumId}`);
     }
   }
 }
 </script>
 
 <style scoped>
-/* 容器布局优化 */
-.album-col {
-  padding: 8px !important; /* 统一间距 */
-}
-
 .album-card-wrapper {
   cursor: pointer;
-  perspective: 1000px;
+  margin-bottom: 15px;
 }
-
 .album-card {
   border: none !important;
-  border-radius: 12px !important; /* 圆角更大更现代 */
+  border-radius: 8px !important;
   overflow: hidden;
-  background: #fff;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
-
-/* 封面容器逻辑 */
 .image-container {
   position: relative;
   width: 100%;
-  aspect-ratio: 4 / 5; /* 保持美观的长宽比，不随图片变形 */
-  overflow: hidden;
+  padding-top: 125%; /* 4:5 比例 */
   background: #f5f7fa;
 }
-
 .album-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
-  transition: transform 0.5s ease;
 }
-
-/* 玻璃拟态角标 */
 .count-badge {
   position: absolute;
   bottom: 8px;
   right: 8px;
-  padding: 4px 8px;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px); /* 背景模糊 */
-  border-radius: 20px;
+  padding: 2px 8px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 10px;
   color: #fff;
   font-size: 11px;
   display: flex;
   align-items: center;
   gap: 4px;
-  z-index: 2;
 }
-
-/* 悬浮遮罩 */
-.image-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.3s;
-  color: #fff;
-  font-size: 24px;
-}
-
-/* 文本区域 */
 .album-info {
-  padding: 10px 12px 14px;
+  padding: 10px;
 }
-
 .album-title {
   font-size: 14px;
-  font-weight: 600;
-  color: #2c3e50;
+  font-weight: 500;
+  color: #18191c;
   line-height: 1.4;
-  height: 40px; /* 两行高度 */
+  height: 40px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
-  word-break: break-all;
 }
-
 .album-meta {
-  margin-top: 6px;
+  margin-top: 5px;
   font-size: 12px;
-  color: #909399;
-}
-
-.author {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-}
-
-/* PC 端悬浮动效 */
-@media screen and (min-width: 769px) {
-  .album-card-wrapper:hover .album-card {
-    transform: translateY(-4px);
-    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
-  }
-
-  .album-card-wrapper:hover .album-cover {
-    transform: scale(1.1);
-  }
-
-  .album-card-wrapper:hover .image-overlay {
-    opacity: 1;
-  }
+  color: #9499a0;
 }
-
-/* 移动端特殊适配 */
-@media screen and (max-width: 768px) {
-  .album-col {
-    padding: 5px !important;
-  }
-
-  .album-card {
-    border-radius: 8px !important;
-  }
-
-  .album-info {
-    padding: 8px 8px 10px;
-  }
-
-  .album-title {
-    font-size: 12px;
-    height: 34px;
-    line-height: 1.4;
-  }
-
-  .album-meta {
-    font-size: 10px;
-  }
-
-  /* 移动端点击反馈 */
-  .album-card-wrapper:active .album-card {
-    transform: scale(0.97);
-    transition: transform 0.1s;
-  }
-}
-
 .image-slot {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
-  background: #f5f7fa;
-  color: #909399;
+  background: #e3e5e7;
 }
 </style>

src/views/home/ImagePage.vue

@@ -1,85 +1,101 @@
 <template>
-  <el-row v-if="!permissionDenied" class="movie-list">
-    <el-row class="movie-list">
-      <el-col :md="24">
-        <el-card :if="!user" :body-style="{ padding: '0px' }" class="card">
-          <div slot="header" class="clearfix">
-            <el-row>
-              <el-col :md="1">
-                <el-avatar>
-                  <el-image :src="user.avatarUrl" />
-                </el-avatar>
-              </el-col>
-              <el-col :md="23">
-                <router-link style="text-decoration-line: none" target="_blank" :to="`/user/${user.userId}/image`">
-                  <span>{{ user.screenName }}的相册</span>
-                </router-link>
-                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'" />
-                <el-button
-                  type="danger"
-                  size="mini"
-                  :icon="followButton.icon"
-                  @click="followUser(user.userId)"
-                >
-                  <span>{{ followButton.text }}</span>
-                </el-button>
-                <el-button
-                  type="danger"
-                  size="mini"
-                  icon="el-icon-message"
-                  @click="sendMessage(user.userId)"
-                >
-                  <span>发消息</span>
-                </el-button>
-              </el-col>
-            </el-row>
-            <el-row>
-              <br>
-              <span>{{ data.albumName }}</span>
-            </el-row>
-          </div>
-        </el-card>
-      </el-col>
-    </el-row>
-    <el-row>
-      <el-col :md="24" class="movie-list">
-        <div>
-          <el-col v-for="(image, index) in dataList" :key="image.thumbnailUrl" :md="6" :sm="12" :xs="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-            <el-card :body-style="{ padding: '0px' }" class="card">
-              <div class="imgs">
-                <el-image
-                  lazy
-                  fit="cover"
-                  class="coverImg"
-                  :src="image.thumbnailUrl"
-                  @click="showImages(index)"
-                />
+  <div class="image-page-wrapper">
+    <el-row v-if="!permissionDenied" class="content-container">
+      <el-row class="header-section">
+        <el-col :span="24">
+          <el-card v-if="user" class="info-card-glass" :body-style="{ padding: '20px' }">
+            <div class="user-meta-wrapper">
+              <div class="user-avatar-box">
+                <el-avatar :size="64" :src="user.avatarUrl" class="custom-avatar shadow-soft" />
               </div>
-            </el-card>
-          </el-col>
-        </div>
-      </el-col>
-    </el-row>
-    <el-row class="movie-list">
-      <el-pagination
-        :small="screenWidth <= 768"
-        hide-on-single-page
-        layout="prev, pager, next"
-        :page-size="pageSize"
-        :current-page="currentPage"
-        :total="totalSize"
-        @current-change="handleCurrentChange"
-        @prev-click="handleCurrentChange"
-        @next-click="handleCurrentChange"
-      />
+              <div class="user-info-main">
+                <div class="top-line">
+                  <router-link class="user-name-link" :to="`/user/${user.userId}/image`">
+                    {{ user.screenName }}的相册
+                  </router-link>
+                  <div class="action-btns">
+                    <el-button
+                      :type="followButton.text === '关注' ? 'danger' : 'info'"
+                      size="mini"
+                      round
+                      :icon="followButton.icon"
+                      class="action-btn"
+                      @click="followUser(user.userId)"
+                    >
+                      {{ followButton.text }}
+                    </el-button>
+                    <el-button
+                      type="default"
+                      size="mini"
+                      round
+                      icon="el-icon-message"
+                      class="action-btn message-btn"
+                      @click="sendMessage(user.userId)"
+                    >
+                      发消息
+                    </el-button>
+                  </div>
+                </div>
+                <div class="album-title-line">
+                  <h1 class="album-display-name">{{ data.albumName }}</h1>
+                  <span class="image-count-tag"><i class="el-icon-picture-outline"></i> {{ totalSize }} P</span>
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="12" class="image-grid">
+        <el-col
+          v-for="(image, index) in dataList"
+          :key="image.thumbnailUrl"
+          :md="6" :sm="8" :xs="12"
+          class="grid-item"
+        >
+          <div class="image-card-item" @click="showImages(index)">
+            <el-image
+              lazy
+              fit="cover"
+              class="gallery-img"
+              :src="image.thumbnailUrl"
+            >
+              <div slot="placeholder" class="image-slot">
+                <i class="el-icon-loading"></i>
+              </div>
+              <div slot="error" class="image-slot">
+                <i class="el-icon-picture-outline"></i>
+              </div>
+            </el-image>
+            <div class="img-hover-mask">
+              <i class="el-icon-zoom-in"></i>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <el-row class="pagination-section">
+        <el-pagination
+          background
+          :small="screenWidth <= 768"
+          hide-on-single-page
+          layout="total, prev, pager, next"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :total="totalSize"
+          @current-change="handleCurrentChange"
+        />
+      </el-row>
     </el-row>
-  </el-row>
-  <div v-else>
-    <permission-denied-card :text-object="textObject" />
+
+    <div v-else class="denied-wrapper">
+      <permission-denied-card :text-object="textObject" />
+    </div>
   </div>
 </template>
 
 <script>
+// 逻辑部分保持不变
 import PermissionDeniedCard from '@/components/card/PermissionDeniedCard'
 import { followUser, getUserInfo, unfollowUser } from '@/api/user'
 import { getImageItems } from '@/api/image'
@@ -94,7 +110,6 @@ export default {
   components: { PermissionDeniedCard },
   data() {
     return {
-      // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 12,
@@ -110,7 +125,8 @@ export default {
       textObject: {
         content: '相册',
         route: '/image'
-      }
+      },
+      data: {}
     }
   },
   created() {
@@ -118,12 +134,8 @@ export default {
     this.getAlbumItemsWrapper()
   },
   mounted() {
-    // 当窗口宽度改变时获取屏幕宽度
     window.onresize = () => {
-      return () => {
-        window.screenWidth = document.body.clientWidth
-        this.screenWidth = window.screenWidth
-      }
+      this.screenWidth = document.body.clientWidth
     }
   },
   methods: {
@@ -131,15 +143,13 @@ export default {
       this.currentPage = pageNumber
       this.dataList = []
       this.getAlbumItemsWrapper()
-      // 回到顶部
-      scrollTo(0, 0)
+      scrollTo({ top: 0, behavior: 'smooth' })
     },
     getAlbumItemsWrapper() {
       getImageItems(this.albumId, this.currentPage).then(resp => {
         if (resp.code === 0) {
           this.data = resp.data
           document.title = '相册 - ' + this.data.albumName
-
           const images = this.data.images
           this.dataList = images.list
           this.totalSize = images.totalSize
@@ -148,11 +158,7 @@ export default {
             if (resp.code === 0) {
               this.user = resp.data
             } else {
-              this.$notify.error({
-                message: resp.msg,
-                type: 'warning',
-                duration: 3000
-              })
+              this.$notify.error({ message: resp.msg, type: 'warning', duration: 3000 })
             }
           })
         } else if (resp.code === 2) {
@@ -161,11 +167,7 @@ export default {
           this.permissionDenied = true
         }
       }).catch(error => {
-        this.$notify.error({
-          message: error.message,
-          type: 'error',
-          duration: 3000
-        })
+        this.$notify.error({ message: error.message, type: 'error', duration: 3000 })
       })
     },
     followUser(userId) {
@@ -185,15 +187,9 @@ export default {
         })
       }
     },
-    sendMessage(userId) {
-      console.log('发送消息')
-    },
+    sendMessage(userId) { console.log('发送消息') },
     showImages(index) {
-      const imageUrls = []
-      for (const i of this.dataList) {
-        imageUrls.push(i.originalUrl)
-      }
-
+      const imageUrls = this.dataList.map(i => i.originalUrl)
       this.$viewerApi({
         images: imageUrls,
         options: {
@@ -209,37 +205,192 @@ export default {
 </script>
 
 <style scoped>
-/*处于手机屏幕时*/
-@media screen and (max-width: 768px){
-  .movie-list {
-    padding-top: 8px;
-    padding-left: 0.5%;
-    padding-right: 0.5%;
-  }
+.image-page-wrapper {
+  background-color: #f6f8fa;
+  min-height: 100vh;
+  padding-bottom: 40px;
+}
 
-  .coverImg {
-    height: 120px !important;
-  }
+.content-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 6%;
+}
+
+/* 头部卡片样式 */
+.header-section {
+  margin-bottom: 25px;
+}
+
+.info-card-glass {
+  border: none;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
+}
+
+.user-meta-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.user-name-link {
+  text-decoration: none;
+  font-size: 16px;
+  font-weight: 600;
+  color: #409EFF;
+  transition: color 0.3s;
 }
 
-.movie-list {
-  padding-top: 15px;
-  padding-left: 6%;
-  padding-right: 6%;
+.user-name-link:hover {
+  color: #66b1ff;
 }
 
-.coverImg {
+.top-line {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
-  height: 320px;
-  display: block;
 }
 
-.card {
-  margin-bottom: 20px;
-  transition: all 0.6s; /*所有属性变化在0.6秒内执行动画*/
+.user-info-main {
+  flex-grow: 1;
+}
+
+.album-title-line {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.album-display-name {
+  font-size: 22px;
+  margin: 0;
+  color: #303133;
+  font-weight: 700;
+}
+
+.image-count-tag {
+  background: #f0f2f5;
+  color: #909399;
+  padding: 2px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+}
+
+.action-btns {
+  display: flex;
+  gap: 8px;
 }
 
-.imgs {
+/* 图片网格样式 */
+.image-grid {
+  margin-top: 10px;
+}
+
+.grid-item {
+  margin-bottom: 15px;
+}
+
+.image-card-item {
   position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  background: #fff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
+  aspect-ratio: 3 / 4; /* 强制比例统一，像相册集一样整齐 */
+}
+
+.image-card-item:hover {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+}
+
+.gallery-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  transition: transform 0.6s ease;
+}
+
+.image-card-item:hover .gallery-img {
+  transform: scale(1.08);
+}
+
+.img-hover-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.3s;
+  color: white;
+  font-size: 24px;
+}
+
+.image-card-item:hover .img-hover-mask {
+  opacity: 1;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #f5f7fa;
+  color: #909399;
+}
+
+/* 分页样式 */
+.pagination-section {
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+}
+
+/* 移动端适配 */
+@media screen and (max-width: 768px) {
+  .content-container {
+    padding: 10px 3%;
+  }
+
+  .user-meta-wrapper {
+    flex-direction: column;
+    text-align: center;
+    gap: 10px;
+  }
+
+  .top-line {
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .album-title-line {
+    justify-content: center;
+  }
+
+  .album-display-name {
+    font-size: 18px;
+  }
+
+  .image-card-item {
+    aspect-ratio: 1 / 1; /* 手机端使用正方形更紧凑 */
+  }
+
+  .custom-avatar {
+    width: 50px !important;
+    height: 50px !important;
+  }
 }
 </style>

src/views/user/UserHome.vue

@@ -84,7 +84,7 @@
         <el-tab-pane name="image">
           <span slot="label">图片 <span class="tab-count">{{ userContentData.imageCount }}</span></span>
           <el-row :gutter="isMobile ? 10 : 15" class="grid-container" v-loading="loading">
-            <el-col v-for="(album, index) in dataList" :key="index" :xs="12" :sm="8" :md="6">
+            <el-col v-for="(album, index) in dataList" :key="index" :xs="12" :sm="8" :md="6" :lg="4">
               <image-album-card :image-album="album" class="content-card-hover" />
             </el-col>
           </el-row>