1

src/views/public/CommentGenerator.vue

@@ -43,7 +43,7 @@
           <div class="letter-nav">
             <el-button-group>
               <el-button size="small" :type="activeLetter === 'ALL' ? 'primary' : 'default'" @click="activeLetter = 'ALL'">全部</el-button>
-              <el-button v-for="ltr in letters" :key="ltr" size="small" :type="activeLetter === ltr ? 'primary' : 'default'" @click="activeLetter = ltr">{{ ltr }}</el-button>
+              <el-button v-for="ltr in availableLetters" :key="ltr" size="small" :type="activeLetter === ltr ? 'primary' : 'default'" @click="activeLetter = ltr">{{ ltr }}</el-button>
             </el-button-group>
             <el-button 
               type="primary" 
@@ -159,6 +159,10 @@
                 </span>
                 <span class="product-type">{{ statistics.productType }}</span>
               </div>
+              <div v-if="statistics.lastCommentUpdateTime" class="update-time">
+                <i class="el-icon-time"></i>
+                更新日期：{{ formatTime(statistics.lastCommentUpdateTime) }}
+              </div>
             </div>
             
             <div class="statistics-content">
@@ -287,6 +291,12 @@ export default {
     letters() {
       return Array.from('ABCDEFGHIJKLMNOPQRSTUVWXYZ')
     },
+    availableLetters() {
+      // 只返回有数据的字母
+      return this.letters.filter(ltr => {
+        return this.groupedByLetter[ltr] && this.groupedByLetter[ltr].length > 0
+      })
+    },
     groupedByLetter() {
       const groups = {}
       const items = Array.isArray(this.typeOptions) ? this.typeOptions.slice() : []
@@ -667,6 +677,7 @@ export default {
   user-select: none;
   transition: all .15s ease;
   background: #fff;
+  font-size: 13px;
 }
 .word-sea .item-tag:hover { border-color: #409eff; color: #409eff; }
 .word-sea .item-tag.active { background: #409eff; border-color: #409eff; color: #fff; }
@@ -893,6 +904,28 @@ export default {
     height: 44px;
     font-size: 15px;
   }
+  
+  /* 移动端缩小词条 */
+  .word-sea .item-tag {
+    padding: 4px 8px;
+    margin: 3px 6px 3px 0;
+    font-size: 11px;
+    border-radius: 12px;
+  }
+  
+  .letter-nav {
+    flex-wrap: wrap;
+  }
+  
+  .letter-nav .el-button-group {
+    flex-wrap: wrap;
+  }
+  
+  .letter-nav .el-button {
+    padding: 5px 8px;
+    font-size: 11px;
+    min-width: 28px;
+  }
 }
 
 @media (max-width: 360px) {
@@ -977,6 +1010,21 @@ export default {
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
+.update-time {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #909399;
+  margin-top: 8px;
+}
+
+.update-time i {
+  font-size: 14px;
+  color: #409eff;
 }
 
 .source-tag {