1

src/views/public/CommentGenerator.vue

@@ -4,10 +4,28 @@
       <div slot="header">评论生成（公开）</div>
       <el-form :model="form" label-width="100px">
         <el-form-item label="型号/类型">
-          <el-select v-model="form.productType" filterable placeholder="请选择">
-            <el-option v-for="it in typeOptions" :key="it.value" :label="`${it.name}（${it.value}）`" :value="it.value" />
-          </el-select>
-          <el-button type="primary" size="mini" style="margin-left:8px;" @click="loadTypes">刷新</el-button>
+          <div class="letter-nav">
+            <el-button-group>
+              <el-button size="mini" :type="activeLetter === 'ALL' ? 'primary' : 'default'" @click="activeLetter = 'ALL'">全部</el-button>
+              <el-button v-for="ltr in letters" :key="ltr" size="mini" :type="activeLetter === ltr ? 'primary' : 'default'" @click="activeLetter = ltr">{{ ltr }}</el-button>
+            </el-button-group>
+            <el-button type="primary" size="mini" style="margin-left:8px;" @click="loadTypes">刷新</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.value"
+                  class="item-tag"
+                  :class="{ active: form.productType === it.value }"
+                  @click="selectType(it)"
+                >{{ it.name }}（{{ it.value }}）</span>
+              </div>
+            </div>
+          </div>
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="generate" :loading="loading">生成评论</el-button>
@@ -27,11 +45,47 @@
 export default {
   name: 'CommentGeneratorPublic',
   data() {
-    return { form: { productType: '' }, loading: false, result: null, typeOptions: [] }
+    return { form: { productType: '' }, loading: false, result: null, typeOptions: [], 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
     }
   },
   mounted() { this.loadTypes() },
@@ -42,6 +96,18 @@ export default {
         if (res && (res.code === 200 || res.msg === '操作成功')) this.typeOptions = res.data || []
       } catch(e) {}
     },
+    getInitial(it) {
+      const source = (it && (it.value || it.name) || '').toString().trim()
+      if (!source) return '#'
+      const ch = source[0]
+      const upper = ch.toUpperCase()
+      if (upper >= 'A' && upper <= 'Z') return upper
+      return '#'
+    },
+    selectType(it) {
+      if (!it) return
+      this.form.productType = it.value
+    },
     async generate() {
       if (!this.form.productType) { this.$message.error('请选择型号'); return }
       this.loading = true
@@ -70,6 +136,48 @@ export default {
 </script>
 
 <style scoped>
+.letter-nav {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+.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: 4px 8px;
+  margin: 4px 8px 4px 0;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  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;
+}
 </style>