Update: 単語一覧に優先度を表示する

Aivis-Project · Jan 12, 2025 · 378353a · 378353a
1 parent 502ae49
commit 378353a
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
@@ -60,14 +60,18 @@
                 tag="label"
                 clickable
                 :active="selectedId === key"
+                class="word-list-item"
                 activeClass="active-word"
                 @click="selectWord(key)"
               >
                 <QItemSection>
                   <QItemLabel class="text-display">{{
                     value.surface
                   }}</QItemLabel>
-                  <QItemLabel caption>{{ value.yomi }} [{{ wordTypeLabels[getWordTypeFromPartOfSpeech(value)] }}]</QItemLabel>
+                  <QItemLabel caption class="row">
+                    <span>{{ value.yomi }} [{{ wordTypeLabels[getWordTypeFromPartOfSpeech(value)] }}]</span>
+                    <span class="q-ml-auto">優先度:{{ value.priority }}</span>
+                  </QItemLabel>
                 </QItemSection>
               </QItem>
             </QList>
@@ -543,11 +547,16 @@ provide<DictionaryManageDialogContext>(dictionaryManageDialogContextKey, {
   );
   width: 100%;
   overflow-y: auto;
-}
 
-.active-word {
-  background: hsl(206 66% 32% / 1);
-  border-right: 4px solid colors.$primary;
+  .word-list-item {
+    padding-right: 16px;
+
+    &.active-word {
+      background: hsl(206 66% 32% / 1);
+      padding-right: 12px;
+      border-right: 4px solid colors.$primary;
+    }
+  }
 }
 
 .loading-dict {