feat(word): add word tags (#151)

e-dialect · Apr 15, 2024 · 47dd2e8 · 47dd2e8
1 parent 357bee7
commit 47dd2e8
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 4 deletions.
diff --git a/src/components/Tools/WordList.vue b/src/components/Tools/WordList.vue
@@ -25,6 +25,7 @@
             <span style="font-size: 80%;color: rgb(155,155,155);padding-left: 10px">
                 / {{ item.word.standard_ipa }}/
               </span>
+            <word-tag :tags="item.word.tags" style="margin-left: 10px"/>
             <PlaySoundButton
               :url="item.pronunciation.url"
               :ipa="item.word.standard_ipa"
@@ -48,10 +49,11 @@
 <script>
 import axios from 'axios'
 import PlaySoundButton from './PlaySoundButton'
+import WordTag from '@/components/Word/WordTag.vue'
 
 export default {
   name: 'WordList',
-  components: { PlaySoundButton },
+  components: { WordTag, PlaySoundButton },
   data () {
     return {
       listSource: null,

diff --git a/src/components/Word/WordList/SingleWordMode.vue b/src/components/Word/WordList/SingleWordMode.vue
@@ -3,10 +3,11 @@ import axios from 'axios'
 import PlaySoundButton from '@/components/Tools/PlaySoundButton.vue'
 import Definition from '@/components/Word/DefinitionShow.vue'
 import MarkdownViewer from '@/components/Articles/MarkdownViewer.vue'
+import WordTag from '@/components/Word/WordTag.vue'
 
 export default {
   name: 'SingleWordMode',
-  components: { MarkdownViewer, Definition, PlaySoundButton },
+  components: { WordTag, MarkdownViewer, Definition, PlaySoundButton },
   props: {
     list: {
       type: Array,
@@ -54,6 +55,7 @@ export default {
         <a-row style="font-size: 1.3em;color: #000;margin-bottom: 5px">发音<PlaySoundButton/></a-row>
         <a-row style="color: #222;font-size: 1.3em">{{thisPage.standard_pinyin}}</a-row>
         <a-row style="color: rgb(155,155,155)">/{{thisPage.standard_ipa}}/</a-row>
+        <word-tag :tags="thisPage.tags" style="margin-top: 10px"/>
       </a-row>
       <a-row style="margin-top: 20px" v-if="thisPage.definition.length">
         <a-row :span="2" class="card-tip">释义:</a-row>

diff --git a/src/components/Word/WordTag.vue b/src/components/Word/WordTag.vue
@@ -0,0 +1,43 @@
+<script>
+export default {
+  name: 'WordTag',
+  data () {
+    return {
+      maxLength: 10
+    }
+  },
+  props: {
+    tags: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {
+    stringToRBG (tag) {
+      let value = '#'
+      for (let i = 0; i < 3; ++i) {
+        if (i >= tag.length) {
+          value += '00'
+          break
+        }
+        const temp = tag.codePointAt(i) % 256
+        value += temp.toString(16)
+      }
+      return value
+    },
+    getTags (tag) {
+      return tag.length > this.maxLength ? tag.slice(0, this.maxLength - 3) + '...' : tag
+    }
+  }
+}
+</script>
+
+<template>
+  <div>
+    <a-tag v-for="tag in tags" :key="tag" :color="stringToRBG(tag)" bordered>{{ getTags(tag) }}</a-tag>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/Words/WordDetails.vue b/src/views/Words/WordDetails.vue
@@ -8,7 +8,8 @@
             {{ word.word }}
           </strong>
         </h1>
-        <span style="font-size: 100%;padding-left: 50px">
+        <word-tag :tags="word.tags" style="margin-left: 30px;margin-bottom: 10px"/>
+        <span style="font-size: 100%;padding-left: 30px">
           {{ word.standard_pinyin }}
         </span>
         <span style="font-size: 100%;color: rgb(155,155,155);padding-left: 18px">
@@ -138,11 +139,13 @@ import DefinitionShow from '../../components/Word/DefinitionShow'
 import PlaySoundButton from '../../components/Tools/PlaySoundButton'
 import MarkdownViewer from '../../components/Articles/MarkdownViewer'
 import { getWordDetails } from '@/services/words'
+import WordTag from '@/components/Word/WordTag.vue'
 
 export default {
   name: 'WordDetails',
   props: ['id'],
   components: {
+    WordTag,
     MarkdownViewer,
     PlaySoundButton,
     Definition: DefinitionShow,

diff --git a/src/views/Words/WordEdit.vue b/src/views/Words/WordEdit.vue
@@ -16,6 +16,9 @@
         <a-form-model-item label="IPA">
           <a-input v-model="word.standard_ipa" placeholder="词条的IPA（实际发音），实在不会可以留空找管理员帮忙"/>
         </a-form-model-item>
+        <a-form-model-item label="标签">
+          <LineTags v-model="word.tags" tips="词条标签"/>
+        </a-form-model-item>
         <a-form-model-item label="释义">
           <DefinitionEdit v-model="word.definition"/>
         </a-form-model-item>

diff --git a/src/views/Words/WordList/WordList.vue b/src/views/Words/WordList/WordList.vue
@@ -1,4 +1,6 @@
 <script>
+import axios from 'axios'
+
 export default {
   name: 'WordList',
   data () {
@@ -60,7 +62,7 @@ export default {
   },
   methods: {
     async getList () {
-      await this.$axios.get('/lists').then(res => {
+      await axios.get('/lists').then(res => {
         this.list = res.data.lists
       }).catch(() => {
         this.$message.error('拉取词单列表失败')