字母按钮

src/views/public/CommentGenerator.vue

@@ -40,24 +40,9 @@
         <!-- 产品类型选择区域 -->
         <div class="form-section">
           <div class="form-label">型号/类型</div>
-          <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 availableLetters" :key="ltr" size="small" :type="activeLetter === ltr ? 'primary' : 'default'" @click="activeLetter = ltr">{{ ltr }}</el-button>
-            </el-button-group>
-            <el-button 
-              type="primary" 
-              size="small" 
-              class="refresh-btn" 
-              @click="loadTypes"
-              icon="el-icon-refresh"
-            >
-              刷新
-            </el-button>
-          </div>
           <div class="word-sea">
-            <div v-if="Object.keys(filteredGroups).length === 0" class="empty-hint">暂无数据</div>
+            <div v-if="Object.keys(groupedByLetter).length === 0" class="empty-hint">暂无数据</div>
-            <div v-else v-for="(items, ltr) in filteredGroups" :key="ltr" class="group">
+            <div v-else v-for="(items, ltr) in groupedByLetter" :key="ltr" class="group">
               <div class="group-head">{{ ltr }}</div>
               <div class="group-items">
                 <span
@@ -272,7 +257,6 @@ export default {
       lastGenerateTime: 0,
       cooldownTime: 1000, // 5秒冷却时间
       isButtonDisabled: false,
-      activeLetter: 'ALL',
       currentIP: '',
       usageStatistics: {
         today: 0,
@@ -288,15 +272,6 @@ export default {
     pretty() {
       try { return this.result ? JSON.stringify(this.result, null, 2) : '' } catch(e) { return '' }
     },
-    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() : []
@@ -312,23 +287,21 @@ export default {
           return an.localeCompare(bn)
         })
       })
-      return groups
+      // 按字母顺序排序，确保显示顺序一致
-    },
+      const ordered = {}
-    filteredGroups() {
+      const letters = Array.from('ABCDEFGHIJKLMNOPQRSTUVWXYZ')
-      if (this.activeLetter === 'ALL') {
+      letters.concat('#').forEach(l => {
-        const ordered = {}
+        if (groups[l] && groups[l].length) {
-        this.letters.concat('#').forEach(l => {
+          ordered[l] = groups[l]
-          if (this.groupedByLetter[l] && this.groupedByLetter[l].length) {
+        }
-            ordered[l] = this.groupedByLetter[l]
+      })
-          }
+      // 如果有其他字母（不在A-Z范围内），也添加进去
-        })
+      Object.keys(groups).forEach(k => {
-        if (this.groupedByLetter['#'] && !ordered['#']) ordered['#'] = this.groupedByLetter['#']
+        if (!ordered[k] && groups[k].length) {
-        return ordered
+          ordered[k] = groups[k]
-      }
+        }
-      const letter = this.activeLetter
+      })
-      const res = {}
+      return ordered
-      if (this.groupedByLetter[letter]) res[letter] = this.groupedByLetter[letter]
-      return res
     },
     isGenerateButtonDisabled() {
       // 如果正在加载、手动禁用、没有选择产品类型，或者在冷却时间内，则禁用按钮
@@ -649,20 +622,7 @@ export default {
   min-width: 0;
 }
 
-.refresh-btn {
+/* 词海分组样式 */
-  flex-shrink: 0;
-  border-radius: 8px;
-}
-
-/* 词海字母导航与分组样式 */
-.letter-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 8px;
-}
 .word-sea .group { margin-bottom: 12px; }
 .word-sea .group-head { font-weight: 600; margin: 6px 0; color: #606266; }
 .word-sea .group-items { display: flex; flex-wrap: wrap; }
@@ -883,10 +843,6 @@ export default {
     gap: 8px;
   }
   
-  .refresh-btn {
-    width: 100%;
-  }
-  
   .image-grid {
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
     gap: 6px;
@@ -912,14 +868,6 @@ export default {
     font-size: 11px;
     border-radius: 12px;
   }
-  
-  .letter-nav {
-    flex-wrap: wrap;
-  }
-  
-  .letter-nav .el-button-group {
-    flex-wrap: wrap;
-  }
 }
 
 @media (max-width: 360px) {