From 073d063d2dfc4bed3c35e66064d3ca5da2cd05cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=9F=A5=E9=9B=A8?=
 <49756728+cetr@users.noreply.github.com>
Date: Sun, 19 Sep 2021 22:17:27 +0800
Subject: [PATCH] Improve avatar selector for comment setting tab (#357)

* perfect: supplementary avatar type

* perfect: supplementary avatar type

* perfect: supplementary avatar type

Co-authored-by: cetr <2058930674@qq.com>
---
 src/views/system/optiontabs/CommentTab.vue | 61 +++++++++++++++++++---
 1 file changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/views/system/optiontabs/CommentTab.vue b/src/views/system/optiontabs/CommentTab.vue
index 65358e5e..9fda4987 100644
--- a/src/views/system/optiontabs/CommentTab.vue
+++ b/src/views/system/optiontabs/CommentTab.vue
@@ -3,13 +3,15 @@
     <a-form-model ref="commentOptionsForm" :model="options" :rules="rules" layout="vertical" :wrapperCol="wrapperCol">
       <a-form-model-item label="评论者头像：">
         <a-select v-model="options.comment_gravatar_default">
-          <a-select-option value="mm">默认</a-select-option>
-          <a-select-option value="identicon">抽象几何图形</a-select-option>
-          <a-select-option value="monsterid">小怪物</a-select-option>
-          <a-select-option value="wavatar">Wavatar</a-select-option>
-          <a-select-option value="retro">复古</a-select-option>
-          <a-select-option value="robohash">机器人</a-select-option>
-          <a-select-option value="blank">不显示头像</a-select-option>
+          <a-select-option v-for="(avatarType, index) in avatarTypes" :key="index" :value="avatarType.value">
+            <a-avatar
+              class="comment_select_gravatar"
+              :size="18"
+              :src="options.gravatar_source + '?s=256&d=' + avatarType.value"
+            >
+            </a-avatar
+            >{{ avatarType.text }}
+          </a-select-option>
         </a-select>
       </a-form-model-item>
       <a-form-model-item label="评论审核后才显示：">
@@ -52,6 +54,41 @@
   </div>
 </template>
 <script>
+const avatarTypes = [
+  {
+    text: '默认',
+    value: ''
+  },
+  {
+    text: '匿名者',
+    value: 'mm'
+  },
+  {
+    text: '抽象几何图形',
+    value: 'identicon'
+  },
+  {
+    text: '小怪物',
+    value: 'monsterid'
+  },
+  {
+    text: 'Wavatar',
+    value: 'wavatar'
+  },
+  {
+    text: '复古',
+    value: 'retro'
+  },
+  {
+    text: '机器人',
+    value: 'robohash'
+  },
+  {
+    text: '不显示头像',
+    value: 'blank'
+  }
+]
+
 export default {
   name: 'CommentTab',
   props: {
@@ -76,7 +113,8 @@ export default {
         sm: { span: 12 },
         xs: { span: 24 }
       },
-      rules: {}
+      rules: {},
+      avatarTypes
     }
   },
   watch: {
@@ -106,3 +144,10 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.comment_select_gravatar {
+  border: 1px #c8c8ca solid;
+  margin: 0 5px 3px 0;
+}
+</style>