feat: add real-time autocomplete suggestions for common japanese verbs

Author: 许君山

frontend/src/App.vue

@@ -11,15 +11,31 @@
         <div class="card">
           <h2>动词活用工具</h2>
 
-          <div class="form-group">
+          <div class="form-group position-relative">
             <label for="verb">动词原形</label>
             <input
               id="verb"
               v-model="form.verb"
               type="text"
               placeholder="例如：飲む、食べる、nomu、taberu"
               @keyup.enter="conjugate"
+              @focus="showSuggestions = true"
+              @blur="hideSuggestionsWithDelay"
+              autocomplete="off"
             >
+            <!-- 自动补全下拉框 -->
+            <ul v-if="showSuggestions && suggestions.length > 0" class="suggestions-list">
+              <li 
+                v-for="(item, index) in suggestions" 
+                :key="index"
+                @mousedown.prevent="selectSuggestion(item)"
+              >
+                <span class="suggestion-kanji">{{ item.kanji }}</span>
+                <span class="suggestion-kana">{{ item.kana }}</span>
+                <span class="suggestion-romaji">{{ item.romaji }}</span>
+                <span class="suggestion-meaning">{{ item.meaning }}</span>
+              </li>
+            </ul>
           </div>
 
           <button @click="conjugate" class="btn-primary">
@@ -163,8 +179,9 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import axios from 'axios';
+import commonVerbs from './common-verbs.json';
 
 const form = ref({
   verb: ''
@@ -173,6 +190,7 @@ const form = ref({
 const result = ref(null);
 const loading = ref(false);
 const error = ref('');
+const showSuggestions = ref(false);
 
 const verbTypeMap = {
   GODAN: '五段动词',
@@ -181,6 +199,32 @@ const verbTypeMap = {
   KURU: 'カ变动词'
 };
 
+// 联想补全计算属性
+const suggestions = computed(() => {
+  const query = form.value.verb.toLowerCase().trim();
+  if (!query) return [];
+  
+  // 匹配 kanji, kana 或 romaji 中包含用户输入的动词
+  return commonVerbs.filter(verb => {
+    return verb.kanji.includes(query) || 
+           verb.kana.includes(query) || 
+           verb.romaji.includes(query) ||
+           verb.meaning.includes(query);
+  }).slice(0, 8); // 最多显示8个建议
+});
+
+const selectSuggestion = (item) => {
+  form.value.verb = item.kanji;
+  showSuggestions.value = false;
+  conjugate();
+};
+
+const hideSuggestionsWithDelay = () => {
+  setTimeout(() => {
+    showSuggestions.value = false;
+  }, 200);
+};
+
 const conjugate = async () => {
   error.value = '';
   result.value = null;
@@ -264,6 +308,71 @@ const conjugate = async () => {
   margin-bottom: 20px;
 }
 
+.position-relative {
+  position: relative;
+}
+
+.suggestions-list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  margin-top: 4px;
+  padding: 0;
+  list-style: none;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  z-index: 10;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.suggestions-list li {
+  padding: 10px 15px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #f5f5f5;
+  transition: background-color 0.2s;
+}
+
+.suggestions-list li:last-child {
+  border-bottom: none;
+}
+
+.suggestions-list li:hover {
+  background-color: #f8f9fa;
+}
+
+.suggestion-kanji {
+  font-weight: 600;
+  font-size: 1.1em;
+  color: #333;
+  min-width: 60px;
+}
+
+.suggestion-kana {
+  color: #667eea;
+  font-size: 0.9em;
+  margin-left: 10px;
+  min-width: 80px;
+}
+
+.suggestion-romaji {
+  color: #999;
+  font-size: 0.85em;
+  margin-left: 10px;
+  font-family: monospace;
+}
+
+.suggestion-meaning {
+  color: #666;
+  font-size: 0.85em;
+  margin-left: auto;
+}
+
 .form-group label {
   display: block;
   margin-bottom: 8px;

frontend/src/common-verbs.json

@@ -0,0 +1,82 @@
+[
+  {"kanji": "する", "kana": "する", "romaji": "suru", "meaning": "做 (do)"},
+  {"kanji": "来る", "kana": "くる", "romaji": "kuru", "meaning": "来 (come)"},
+  {"kanji": "行く", "kana": "いく", "romaji": "iku", "meaning": "去 (go)"},
+  {"kanji": "食べる", "kana": "たべる", "romaji": "taberu", "meaning": "吃 (eat)"},
+  {"kanji": "飲む", "kana": "のむ", "romaji": "nomu", "meaning": "喝 (drink)"},
+  {"kanji": "見る", "kana": "みる", "romaji": "miru", "meaning": "看 (see)"},
+  {"kanji": "寝る", "kana": "ねる", "romaji": "neru", "meaning": "睡觉 (sleep)"},
+  {"kanji": "起きる", "kana": "おきる", "romaji": "okiru", "meaning": "起床 (wake up)"},
+  {"kanji": "書く", "kana": "かく", "romaji": "kaku", "meaning": "写 (write)"},
+  {"kanji": "読む", "kana": "よむ", "romaji": "yomu", "meaning": "读 (read)"},
+  {"kanji": "話す", "kana": "はなす", "romaji": "hanasu", "meaning": "说 (speak)"},
+  {"kanji": "聞く", "kana": "きく", "romaji": "kiku", "meaning": "听 (listen)"},
+  {"kanji": "会う", "kana": "あう", "romaji": "au", "meaning": "见面 (meet)"},
+  {"kanji": "買う", "kana": "かう", "romaji": "kau", "meaning": "买 (buy)"},
+  {"kanji": "待つ", "kana": "まつ", "romaji": "matsu", "meaning": "等 (wait)"},
+  {"kanji": "持つ", "kana": "もつ", "romaji": "motsu", "meaning": "拿 (hold)"},
+  {"kanji": "帰る", "kana": "かえる", "romaji": "kaeru", "meaning": "回家 (return)"},
+  {"kanji": "分かる", "kana": "わかる", "romaji": "wakaru", "meaning": "懂 (understand)"},
+  {"kanji": "走る", "kana": "はしる", "romaji": "hashiru", "meaning": "跑 (run)"},
+  {"kanji": "歩く", "kana": "あるく", "romaji": "aruku", "meaning": "走 (walk)"},
+  {"kanji": "泳ぐ", "kana": "およぐ", "romaji": "oyogu", "meaning": "游泳 (swim)"},
+  {"kanji": "遊ぶ", "kana": "あそぶ", "romaji": "asobu", "meaning": "玩 (play)"},
+  {"kanji": "休む", "kana": "やすむ", "romaji": "yasumu", "meaning": "休息 (rest)"},
+  {"kanji": "働く", "kana": "はたらく", "romaji": "hataraku", "meaning": "工作 (work)"},
+  {"kanji": "勉強する", "kana": "べんきょうする", "romaji": "benkyousuru", "meaning": "学习 (study)"},
+  {"kanji": "終わる", "kana": "おわる", "romaji": "owaru", "meaning": "结束 (finish)"},
+  {"kanji": "始まる", "kana": "はじまる", "romaji": "hajimaru", "meaning": "开始 (begin)"},
+  {"kanji": "知る", "kana": "しる", "romaji": "shiru", "meaning": "知道 (know)"},
+  {"kanji": "使う", "kana": "つかう", "romaji": "tsukau", "meaning": "使用 (use)"},
+  {"kanji": "作る", "kana": "つくる", "romaji": "tsukuru", "meaning": "制作 (make)"},
+  {"kanji": "思う", "kana": "おもう", "romaji": "omou", "meaning": "想 (think)"},
+  {"kanji": "言う", "kana": "いう", "romaji": "iu", "meaning": "说 (say)"},
+  {"kanji": "立つ", "kana": "たつ", "romaji": "tatsu", "meaning": "站立 (stand)"},
+  {"kanji": "座る", "kana": "すわる", "romaji": "suwaru", "meaning": "坐 (sit)"},
+  {"kanji": "死ぬ", "kana": "しぬ", "romaji": "shinu", "meaning": "死 (die)"},
+  {"kanji": "飛ぶ", "kana": "とぶ", "romaji": "tobu", "meaning": "飞 (fly)"},
+  {"kanji": "呼ぶ", "kana": "よぶ", "romaji": "yobu", "meaning": "叫 (call)"},
+  {"kanji": "選ぶ", "kana": "えらぶ", "romaji": "erabu", "meaning": "选择 (choose)"},
+  {"kanji": "頼む", "kana": "たのむ", "romaji": "tanomu", "meaning": "请求 (request)"},
+  {"kanji": "探す", "kana": "さがす", "romaji": "sagasu", "meaning": "寻找 (search)"},
+  {"kanji": "返す", "kana": "かえす", "romaji": "kaesu", "meaning": "归还 (return)"},
+  {"kanji": "直す", "kana": "なおす", "romaji": "naosu", "meaning": "修理 (fix)"},
+  {"kanji": "貸す", "kana": "かす", "romaji": "kasu", "meaning": "借出 (lend)"},
+  {"kanji": "落とす", "kana": "おとす", "romaji": "otosu", "meaning": "掉落 (drop)"},
+  {"kanji": "勝つ", "kana": "かつ", "romaji": "katsu", "meaning": "赢 (win)"},
+  {"kanji": "洗う", "kana": "あらう", "romaji": "arau", "meaning": "洗 (wash)"},
+  {"kanji": "歌う", "kana": "うたう", "romaji": "utau", "meaning": "唱 (sing)"},
+  {"kanji": "払う", "kana": "はらう", "romaji": "harau", "meaning": "支付 (pay)"},
+  {"kanji": "もらう", "kana": "もらう", "romaji": "morau", "meaning": "收到 (receive)"},
+  {"kanji": "泣く", "kana": "なく", "romaji": "naku", "meaning": "哭 (cry)"},
+  {"kanji": "笑う", "kana": "わらう", "romaji": "warau", "meaning": "笑 (laugh)"},
+  {"kanji": "怒る", "kana": "おこる", "romaji": "okoru", "meaning": "生气 (get angry)"},
+  {"kanji": "開ける", "kana": "あける", "romaji": "akeru", "meaning": "打开 (open)"},
+  {"kanji": "閉める", "kana": "しめる", "romaji": "shimeru", "meaning": "关闭 (close)"},
+  {"kanji": "乗る", "kana": "のる", "romaji": "noru", "meaning": "乘坐 (ride)"},
+  {"kanji": "降りる", "kana": "おりる", "romaji": "oriru", "meaning": "下车 (get off)"},
+  {"kanji": "着る", "kana": "きる", "romaji": "kiru", "meaning": "穿 (wear)"},
+  {"kanji": "脱ぐ", "kana": "ぬぐ", "romaji": "nugu", "meaning": "脱 (take off)"},
+  {"kanji": "忘れる", "kana": "わすれる", "romaji": "wasureru", "meaning": "忘记 (forget)"},
+  {"kanji": "覚える", "kana": "おぼえる", "romaji": "oboeru", "meaning": "记住 (remember)"},
+  {"kanji": "教える", "kana": "おしえる", "romaji": "oshieru", "meaning": "教 (teach)"},
+  {"kanji": "習う", "kana": "ならう", "romaji": "narau", "meaning": "学习 (learn)"},
+  {"kanji": "見せる", "kana": "みせる", "romaji": "miseru", "meaning": "展示 (show)"},
+  {"kanji": "答える", "kana": "こたえる", "romaji": "kotaeru", "meaning": "回答 (answer)"},
+  {"kanji": "質問する", "kana": "しつもんする", "romaji": "shitsumonsuru", "meaning": "提问 (ask)"},
+  {"kanji": "信じる", "kana": "しんじる", "romaji": "shinjiru", "meaning": "相信 (believe)"},
+  {"kanji": "売る", "kana": "うる", "romaji": "uru", "meaning": "卖 (sell)"},
+  {"kanji": "切る", "kana": "きる", "romaji": "kiru", "meaning": "切 (cut)"},
+  {"kanji": "出す", "kana": "だす", "romaji": "dasu", "meaning": "拿出 (take out)"},
+  {"kanji": "入れる", "kana": "いれる", "romaji": "ireru", "meaning": "放入 (put in)"},
+  {"kanji": "置く", "kana": "おく", "romaji": "oku", "meaning": "放置 (put)"},
+  {"kanji": "住む", "kana": "すむ", "romaji": "sumu", "meaning": "居住 (live)"},
+  {"kanji": "働く", "kana": "はたらく", "romaji": "hataraku", "meaning": "工作 (work)"},
+  {"kanji": "手伝う", "kana": "てつだう", "romaji": "tetsudau", "meaning": "帮忙 (help)"},
+  {"kanji": "頑張る", "kana": "がんばる", "romaji": "ganbaru", "meaning": "加油 (do one's best)"},
+  {"kanji": "疲れる", "kana": "つかれる", "romaji": "tsukareru", "meaning": "累 (get tired)"},
+  {"kanji": "急ぐ", "kana": "いそぐ", "romaji": "isogu", "meaning": "着急 (hurry)"},
+  {"kanji": "遅れる", "kana": "おくれる", "romaji": "okureru", "meaning": "迟到 (be late)"},
+  {"kanji": "間に合う", "kana": "まにあう", "romaji": "maniau", "meaning": "赶上 (be in time)"},
+  {"kanji": "助ける", "kana": "たすける", "romaji": "tasukeru", "meaning": "救 (save)"}
+]