1

src/views/public/CommentGenerator.vue

@@ -9,19 +9,14 @@
         <!-- 产品类型选择区域 -->
         <div class="form-section">
           <div class="form-label">型号/类型</div>
-          <div class="select-row">
+          <div class="letter-nav">
-            <el-select 
+            <el-button-group>
-              v-model="form.productType" 
+              <el-button size="mini" :type="activeLetter === 'ALL' ? 'primary' : 'default'" @click="activeLetter = 'ALL'">全部</el-button>
-              filterable 
+              <el-button v-for="ltr in letters" :key="ltr" size="mini" :type="activeLetter === ltr ? 'primary' : 'default'" @click="activeLetter = ltr">{{ ltr }}</el-button>
-              placeholder="请选择型号/类型"
+            </el-button-group>
-              class="mobile-select"
-              size="medium"
-            >
-              <el-option v-for="it in typeOptions" :key="it.name" :label="it.name" :value="it.name" />
-            </el-select>
             <el-button 
               type="primary" 
-              size="medium" 
+              size="mini" 
               class="refresh-btn" 
               @click="loadTypes"
               icon="el-icon-refresh"
@@ -29,6 +24,21 @@
               刷新
             </el-button>
           </div>
+          <div class="word-sea">
+            <div v-if="Object.keys(filteredGroups).length === 0" class="empty-hint">暂无数据</div>
+            <div v-else v-for="(items, ltr) in filteredGroups" :key="ltr" class="group">
+              <div class="group-head">{{ ltr }}</div>
+              <div class="group-items">
+                <span
+                  v-for="it in items"
+                  :key="it.name"
+                  class="item-tag"
+                  :class="{ active: form.productType === it.name }"
+                  @click="selectType(it)"
+                >{{ it.name }}</span>
+              </div>
+            </div>
+          </div>
         </div>
 
         <!-- 生成按钮区域 -->
@@ -176,13 +186,50 @@ export default {
       statistics: null,
       lastGenerateTime: 0,
       cooldownTime: 1000, // 5秒冷却时间
-      isButtonDisabled: false
+      isButtonDisabled: false,
+      activeLetter: 'ALL'
     }
   },
   computed: {
     pretty() {
       try { return this.result ? JSON.stringify(this.result, null, 2) : '' } catch(e) { return '' }
     },
+    letters() {
+      return Array.from('ABCDEFGHIJKLMNOPQRSTUVWXYZ')
+    },
+    groupedByLetter() {
+      const groups = {}
+      const items = Array.isArray(this.typeOptions) ? this.typeOptions.slice() : []
+      items.forEach(it => {
+        const ltr = this.getInitial(it)
+        if (!groups[ltr]) groups[ltr] = []
+        groups[ltr].push(it)
+      })
+      Object.keys(groups).forEach(k => {
+        groups[k].sort((a, b) => {
+          const an = (a.name || '').toString()
+          const bn = (b.name || '').toString()
+          return an.localeCompare(bn)
+        })
+      })
+      return groups
+    },
+    filteredGroups() {
+      if (this.activeLetter === 'ALL') {
+        const ordered = {}
+        this.letters.concat('#').forEach(l => {
+          if (this.groupedByLetter[l] && this.groupedByLetter[l].length) {
+            ordered[l] = this.groupedByLetter[l]
+          }
+        })
+        if (this.groupedByLetter['#'] && !ordered['#']) ordered['#'] = this.groupedByLetter['#']
+        return ordered
+      }
+      const letter = this.activeLetter
+      const res = {}
+      if (this.groupedByLetter[letter]) res[letter] = this.groupedByLetter[letter]
+      return res
+    },
     isGenerateButtonDisabled() {
       // 如果正在加载、手动禁用、没有选择产品类型，或者在冷却时间内，则禁用按钮
       return this.loading || 
@@ -228,7 +275,7 @@ export default {
       } catch(e) {}
     },
     getInitial(it) {
-      const source = (it && (it.value || it.name) || '').toString().trim()
+      const source = (it && (it.name || it.value) || '').toString().trim()
       if (!source) return '#'
       const ch = source[0]
       const upper = ch.toUpperCase()
@@ -237,7 +284,7 @@ export default {
     },
     selectType(it) {
       if (!it) return
-      this.form.productType = it.value
+      this.form.productType = it.name
     },
     async generate() {
       // 检查按钮是否被禁用
@@ -415,6 +462,34 @@ export default {
   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; }
+.word-sea .item-tag {
+  display: inline-block;
+  padding: 6px 10px;
+  margin: 4px 8px 4px 0;
+  border: 1px solid #dcdfe6;
+  border-radius: 16px;
+  cursor: pointer;
+  color: #606266;
+  user-select: none;
+  transition: all .15s ease;
+  background: #fff;
+}
+.word-sea .item-tag:hover { border-color: #409eff; color: #409eff; }
+.word-sea .item-tag.active { background: #409eff; border-color: #409eff; color: #fff; }
+.word-sea .empty-hint { color: #909399; }
+
 /* 生成按钮样式 */
 .generate-btn {
   width: 100%;