From 659cdf86cc1dc8b95b126b2ff8b396b3419d5c2f Mon Sep 17 00:00:00 2001
From: jdkfx <amateurranch@gmail.com>
Date: Mon, 30 Sep 2024 23:09:52 +0900
Subject: [PATCH 01/10] =?UTF-8?q?=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD?=
 =?UTF-8?q?=E3=82=B0=E3=81=AE=E8=A4=87=E8=A3=BD=E3=81=A8=E3=83=86=E3=83=B3?=
 =?UTF-8?q?=E3=83=97=E3=83=AC=E3=83=BC=E3=83=88=E9=83=A8=E5=88=86=E3=81=AE?=
 =?UTF-8?q?=E5=88=87=E3=82=8A=E5=87=BA=E3=81=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 677 ++++++++++++++++++
 .../Dialog/DictionaryManageDialog.vue         | 267 +------
 2 files changed, 679 insertions(+), 265 deletions(-)
 create mode 100644 src/components/Dialog/DictionaryEditWordDialog.vue

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
new file mode 100644
index 0000000000..6b86ca9b45
--- /dev/null
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -0,0 +1,677 @@
+<template>
+  <div v-show="wordEditing" class="col-8 no-wrap text-no-wrap word-editor">
+    <div class="row q-pl-md q-mt-md">
+      <div class="text-h6">単語</div>
+      <QInput
+        ref="surfaceInput"
+        v-model="surface"
+        class="word-input"
+        dense
+        :disable="uiLocked"
+        @focus="clearSurfaceInputSelection()"
+        @blur="setSurface(surface)"
+        @keydown.enter="yomiFocus"
+      >
+        <ContextMenu
+          ref="surfaceContextMenu"
+          :header="surfaceContextMenuHeader"
+          :menudata="surfaceContextMenudata"
+          @beforeShow="startSurfaceContextMenuOperation()"
+          @beforeHide="endSurfaceContextMenuOperation()"
+        />
+      </QInput>
+    </div>
+    <div class="row q-pl-md q-pt-sm">
+      <div class="text-h6">読み</div>
+      <QInput
+        ref="yomiInput"
+        v-model="yomi"
+        class="word-input q-pb-none"
+        dense
+        :error="!isOnlyHiraOrKana"
+        :disable="uiLocked"
+        @focus="clearYomiInputSelection()"
+        @blur="setYomi(yomi)"
+        @keydown.enter="setYomiWhenEnter"
+      >
+        <template #error>
+          読みに使える文字はひらがなとカタカナのみです。
+        </template>
+        <ContextMenu
+          ref="yomiContextMenu"
+          :header="yomiContextMenuHeader"
+          :menudata="yomiContextMenudata"
+          @beforeShow="startYomiContextMenuOperation()"
+          @beforeHide="endYomiContextMenuOperation()"
+        />
+      </QInput>
+    </div>
+    <div class="row q-pl-md q-mt-lg text-h6">アクセント調整</div>
+    <div class="row q-pl-md desc-row">
+      語尾のアクセントを考慮するため、「が」が自動で挿入されます。
+    </div>
+    <div class="row q-px-md" style="height: 130px">
+      <div class="play-button">
+        <QBtn
+          v-if="!nowPlaying && !nowGenerating"
+          fab
+          color="primary"
+          textColor="display-on-primary"
+          icon="play_arrow"
+          @click="play"
+        />
+        <QBtn
+          v-else
+          fab
+          color="primary"
+          textColor="display-on-primary"
+          icon="stop"
+          :disable="nowGenerating"
+          @click="stop"
+        />
+      </div>
+      <div
+        ref="accentPhraseTable"
+        class="accent-phrase-table overflow-hidden-y"
+      >
+        <div v-if="accentPhrase" class="mora-table">
+          <AudioAccent
+            :accentPhrase
+            :accentPhraseIndex="0"
+            :uiLocked
+            :onChangeAccent="changeAccent"
+          />
+          <template
+            v-for="(mora, moraIndex) in accentPhrase.moras"
+            :key="moraIndex"
+          >
+            <div
+              class="text-cell"
+              :style="{
+                gridColumn: `${moraIndex * 2 + 1} / span 1`,
+              }"
+            >
+              {{ mora.text }}
+            </div>
+            <div
+              v-if="moraIndex < accentPhrase.moras.length - 1"
+              class="splitter-cell"
+              :style="{
+                gridColumn: `${moraIndex * 2 + 2} / span 1`,
+              }"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="row q-pl-md q-pt-lg text-h6">単語優先度</div>
+    <div class="row q-pl-md desc-row">
+      単語を登録しても反映されない場合は優先度を高くしてください。
+    </div>
+    <div
+      class="row q-px-md"
+      :style="{
+        justifyContent: 'center',
+      }"
+    >
+      <QSlider
+        v-model="wordPriority"
+        snap
+        dense
+        color="primary"
+        markers
+        :min="0"
+        :max="10"
+        :step="1"
+        :markerLabels="wordPriorityLabels"
+        :style="{
+          width: '80%',
+        }"
+      />
+    </div>
+    <div class="row q-px-md save-delete-reset-buttons">
+      <QSpace />
+      <QBtn
+        v-show="!!selectedId"
+        outline
+        textColor="display"
+        class="text-no-wrap text-bold q-mr-sm"
+        :disable="uiLocked || !isWordChanged"
+        @click="resetWord(selectedId)"
+        >リセット</QBtn
+      >
+      <QBtn
+        outline
+        textColor="display"
+        class="text-no-wrap text-bold q-mr-sm"
+        :disable="uiLocked"
+        @click="discardOrNotDialog(cancel)"
+        >キャンセル</QBtn
+      >
+      <QBtn
+        outline
+        textColor="display"
+        class="text-no-wrap text-bold q-mr-sm"
+        :disable="uiLocked || !isWordChanged"
+        @click="saveWord"
+        >保存</QBtn
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { QInput } from "quasar";
+import AudioAccent from "@/components/Talk/AudioAccent.vue";
+import ContextMenu from "@/components/Menu/ContextMenu.vue";
+import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
+import { useStore } from "@/store";
+import type { FetchAudioResult } from "@/store/type";
+import { AccentPhrase, UserDictWord } from "@/openapi";
+import {
+  convertHiraToKana,
+  convertLongVowel,
+  createKanaRegex,
+} from "@/domain/japanese";
+
+const defaultDictPriority = 5;
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits<{
+  (e: "update:modelValue", v: boolean): void;
+}>();
+
+const store = useStore();
+
+const dictionaryManageDialogOpenedComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+const uiLocked = ref(false); // ダイアログ内でstore.getters.UI_LOCKEDは常にtrueなので独自に管理
+const nowGenerating = ref(false);
+const nowPlaying = ref(false);
+
+// word-list の要素のうち、どの要素がホバーされているか
+const hoveredKey = ref<string | undefined>(undefined);
+
+const loadingDictState = ref<null | "loading" | "synchronizing">("loading");
+const userDict = ref<Record<string, UserDictWord>>({});
+
+const createUILockAction = function <T>(action: Promise<T>) {
+  uiLocked.value = true;
+  return action.finally(() => {
+    uiLocked.value = false;
+  });
+};
+
+const loadingDictProcess = async () => {
+  if (store.state.engineIds.length === 0)
+    throw new Error(`assert engineId.length > 0`);
+
+  loadingDictState.value = "loading";
+  try {
+    userDict.value = await createUILockAction(
+      store.dispatch("LOAD_ALL_USER_DICT"),
+    );
+  } catch {
+    const result = await store.dispatch("SHOW_ALERT_DIALOG", {
+      title: "辞書の取得に失敗しました",
+      message: "エンジンの再起動をお試しください。",
+    });
+    if (result === "OK") {
+      dictionaryManageDialogOpenedComputed.value = false;
+    }
+  }
+  loadingDictState.value = "synchronizing";
+  try {
+    await createUILockAction(store.dispatch("SYNC_ALL_USER_DICT"));
+  } catch {
+    await store.dispatch("SHOW_ALERT_DIALOG", {
+      title: "辞書の同期に失敗しました",
+      message: "エンジンの再起動をお試しください。",
+    });
+  }
+  loadingDictState.value = null;
+};
+watch(dictionaryManageDialogOpenedComputed, async (newValue) => {
+  if (newValue) {
+    await loadingDictProcess();
+    toInitialState();
+  }
+});
+
+const wordEditing = ref(false);
+
+const surfaceInput = ref<QInput>();
+const yomiInput = ref<QInput>();
+const yomiFocus = (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  yomiInput.value?.focus();
+};
+const setYomiWhenEnter = (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  void setYomi(yomi.value);
+};
+
+const selectedId = ref("");
+const surface = ref("");
+const yomi = ref("");
+
+const voiceComputed = computed(() => {
+  const userOrderedCharacterInfos =
+    store.getters.USER_ORDERED_CHARACTER_INFOS("talk");
+  if (userOrderedCharacterInfos == undefined)
+    throw new Error("assert USER_ORDERED_CHARACTER_INFOS");
+  if (store.state.engineIds.length === 0)
+    throw new Error("assert engineId.length > 0");
+  const characterInfo = userOrderedCharacterInfos[0].metas;
+  const speakerId = characterInfo.speakerUuid;
+  const { engineId, styleId } = characterInfo.styles[0];
+  return { engineId, speakerId, styleId };
+});
+
+const kanaRegex = createKanaRegex();
+const isOnlyHiraOrKana = ref(true);
+const accentPhrase = ref<AccentPhrase | undefined>();
+const accentPhraseTable = ref<HTMLElement>();
+
+const convertHankakuToZenkaku = (text: string) => {
+  // " "などの目に見えない文字をまとめて全角スペース(0x3000)に置き換える
+  text = text.replace(/\p{Z}/gu, () => String.fromCharCode(0x3000));
+
+  // "!"から"~"までの範囲の文字(数字やアルファベット)を全角に置き換える
+  return text.replace(/[\u0021-\u007e]/g, (s) => {
+    return String.fromCharCode(s.charCodeAt(0) + 0xfee0);
+  });
+};
+const setSurface = (text: string) => {
+  // surfaceを全角化する
+  // 入力は半角でも問題ないが、登録時に全角に変換され、isWordChangedの判断がおかしくなることがあるので、
+  // 入力後に自動で変換するようにする
+  surface.value = convertHankakuToZenkaku(text);
+};
+const setYomi = async (text: string, changeWord?: boolean) => {
+  const { engineId, styleId } = voiceComputed.value;
+
+  // テキスト長が0の時にエラー表示にならないように、テキスト長を考慮する
+  isOnlyHiraOrKana.value = !text.length || kanaRegex.test(text);
+  // 読みが変更されていない場合は、アクセントフレーズに変更を加えない
+  // ただし、読みが同じで違う単語が存在する場合が考えられるので、changeWordフラグを考慮する
+  // 「ガ」が自動挿入されるので、それを考慮してsliceしている
+  if (
+    text ==
+      accentPhrase.value?.moras
+        .map((v) => v.text)
+        .join("")
+        .slice(0, -1) &&
+    !changeWord
+  ) {
+    return;
+  }
+  if (isOnlyHiraOrKana.value && text.length) {
+    text = convertHiraToKana(text);
+    text = convertLongVowel(text);
+    accentPhrase.value = (
+      await createUILockAction(
+        store.dispatch("FETCH_ACCENT_PHRASES", {
+          text: text + "ガ'",
+          engineId,
+          styleId,
+          isKana: true,
+        }),
+      )
+    )[0];
+    if (selectedId.value && userDict.value[selectedId.value].yomi === text) {
+      accentPhrase.value.accent = computeDisplayAccent();
+    }
+  } else {
+    accentPhrase.value = undefined;
+  }
+  yomi.value = text;
+};
+
+const changeAccent = async (_: number, accent: number) => {
+  const { engineId, styleId } = voiceComputed.value;
+
+  if (accentPhrase.value) {
+    accentPhrase.value.accent = accent;
+    accentPhrase.value = (
+      await createUILockAction(
+        store.dispatch("FETCH_MORA_DATA", {
+          accentPhrases: [accentPhrase.value],
+          engineId,
+          styleId,
+        }),
+      )
+    )[0];
+  }
+};
+
+const play = async () => {
+  if (!accentPhrase.value) return;
+
+  nowGenerating.value = true;
+  const audioItem = await store.dispatch("GENERATE_AUDIO_ITEM", {
+    text: yomi.value,
+    voice: voiceComputed.value,
+  });
+
+  if (audioItem.query == undefined)
+    throw new Error(`assert audioItem.query !== undefined`);
+
+  audioItem.query.accentPhrases = [accentPhrase.value];
+
+  let fetchAudioResult: FetchAudioResult;
+  try {
+    fetchAudioResult = await store.dispatch("FETCH_AUDIO_FROM_AUDIO_ITEM", {
+      audioItem,
+    });
+  } catch (e) {
+    window.backend.logError(e);
+    nowGenerating.value = false;
+    void store.dispatch("SHOW_ALERT_DIALOG", {
+      title: "生成に失敗しました",
+      message: "エンジンの再起動をお試しください。",
+    });
+    return;
+  }
+
+  const { blob } = fetchAudioResult;
+  nowGenerating.value = false;
+  nowPlaying.value = true;
+  await store.dispatch("PLAY_AUDIO_BLOB", { audioBlob: blob });
+  nowPlaying.value = false;
+};
+const stop = () => {
+  void store.dispatch("STOP_AUDIO");
+};
+
+// accent phraseにあるaccentと実際に登録するアクセントには差が生まれる
+// アクセントが自動追加される「ガ」に指定されている場合、
+// 実際に登録するaccentの値は0となるので、そうなるように処理する
+const computeRegisteredAccent = () => {
+  if (!accentPhrase.value) throw new Error();
+  let accent = accentPhrase.value.accent;
+  accent = accent === accentPhrase.value.moras.length ? 0 : accent;
+  return accent;
+};
+// computeの逆
+// 辞書から得たaccentが0の場合に、自動で追加される「ガ」の位置にアクセントを表示させるように処理する
+const computeDisplayAccent = () => {
+  if (!accentPhrase.value || !selectedId.value) throw new Error();
+  let accent = userDict.value[selectedId.value].accentType;
+  accent = accent === 0 ? accentPhrase.value.moras.length : accent;
+  return accent;
+};
+
+const wordPriority = ref(defaultDictPriority);
+const wordPriorityLabels = {
+  0: "最低",
+  3: "低",
+  5: "標準",
+  7: "高",
+  10: "最高",
+};
+
+// 操作（ステートの移動）
+const isWordChanged = computed(() => {
+  if (selectedId.value === "") {
+    return surface.value && yomi.value && accentPhrase.value;
+  }
+  // 一旦代入することで、userDictそのものが更新された時もcomputedするようにする
+  const dict = userDict.value;
+  const dictData = dict[selectedId.value];
+  return (
+    dictData &&
+    (dictData.surface !== surface.value ||
+      dictData.yomi !== yomi.value ||
+      dictData.accentType !== computeRegisteredAccent() ||
+      dictData.priority !== wordPriority.value)
+  );
+});
+const saveWord = async () => {
+  if (!accentPhrase.value) throw new Error(`accentPhrase === undefined`);
+  const accent = computeRegisteredAccent();
+  if (selectedId.value) {
+    try {
+      await store.dispatch("REWRITE_WORD", {
+        wordUuid: selectedId.value,
+        surface: surface.value,
+        pronunciation: yomi.value,
+        accentType: accent,
+        priority: wordPriority.value,
+      });
+    } catch {
+      void store.dispatch("SHOW_ALERT_DIALOG", {
+        title: "単語の更新に失敗しました",
+        message: "エンジンの再起動をお試しください。",
+      });
+      return;
+    }
+  } else {
+    try {
+      await createUILockAction(
+        store.dispatch("ADD_WORD", {
+          surface: surface.value,
+          pronunciation: yomi.value,
+          accentType: accent,
+          priority: wordPriority.value,
+        }),
+      );
+    } catch {
+      void store.dispatch("SHOW_ALERT_DIALOG", {
+        title: "単語の登録に失敗しました",
+        message: "エンジンの再起動をお試しください。",
+      });
+      return;
+    }
+  }
+  await loadingDictProcess();
+  toInitialState();
+};
+const deleteWord = async () => {
+  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
+    title: "登録された単語を削除しますか？",
+    message: "削除された単語は元に戻せません。",
+    actionName: "削除",
+  });
+  if (result === "OK") {
+    try {
+      await createUILockAction(
+        store.dispatch("DELETE_WORD", {
+          wordUuid: selectedId.value,
+        }),
+      );
+    } catch {
+      void store.dispatch("SHOW_ALERT_DIALOG", {
+        title: "単語の削除に失敗しました",
+        message: "エンジンの再起動をお試しください。",
+      });
+      return;
+    }
+    await loadingDictProcess();
+    toInitialState();
+  }
+};
+const resetWord = async (id: string) => {
+  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
+    title: "単語の変更をリセットしますか？",
+    message: "単語の変更は破棄されてリセットされます。",
+    actionName: "リセット",
+  });
+  if (result === "OK") {
+    selectedId.value = id;
+    surface.value = userDict.value[id].surface;
+    void setYomi(userDict.value[id].yomi, true);
+    wordPriority.value = userDict.value[id].priority;
+    toWordEditingState();
+  }
+};
+const discardOrNotDialog = async (okCallback: () => void) => {
+  if (isWordChanged.value) {
+    const result = await store.dispatch("SHOW_WARNING_DIALOG", {
+      title: "単語の追加・変更を破棄しますか？",
+      message: "破棄すると、単語の追加・変更はリセットされます。",
+      actionName: "破棄",
+    });
+    if (result === "OK") {
+      okCallback();
+    }
+  } else {
+    okCallback();
+  }
+};
+const newWord = () => {
+  selectedId.value = "";
+  surface.value = "";
+  void setYomi("");
+  wordPriority.value = defaultDictPriority;
+  editWord();
+};
+const editWord = () => {
+  toWordEditingState();
+};
+const selectWord = (id: string) => {
+  selectedId.value = id;
+  surface.value = userDict.value[id].surface;
+  void setYomi(userDict.value[id].yomi, true);
+  wordPriority.value = userDict.value[id].priority;
+  toWordSelectedState();
+};
+const cancel = () => {
+  toInitialState();
+};
+const closeDialog = () => {
+  toDialogClosedState();
+};
+
+// ステートの移動
+// 初期状態
+const toInitialState = () => {
+  wordEditing.value = false;
+  selectedId.value = "";
+  surface.value = "";
+  void setYomi("");
+  wordPriority.value = defaultDictPriority;
+};
+// 単語が選択されているだけの状態
+const toWordSelectedState = () => {
+  wordEditing.value = false;
+};
+// 単語が編集されている状態
+const toWordEditingState = () => {
+  wordEditing.value = true;
+  surfaceInput.value?.focus();
+};
+// ダイアログが閉じている状態
+const toDialogClosedState = () => {
+  dictionaryManageDialogOpenedComputed.value = false;
+};
+
+const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
+const yomiContextMenu = ref<InstanceType<typeof ContextMenu>>();
+
+const {
+  contextMenuHeader: surfaceContextMenuHeader,
+  contextMenudata: surfaceContextMenudata,
+  startContextMenuOperation: startSurfaceContextMenuOperation,
+  clearInputSelection: clearSurfaceInputSelection,
+  endContextMenuOperation: endSurfaceContextMenuOperation,
+} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surface);
+
+const {
+  contextMenuHeader: yomiContextMenuHeader,
+  contextMenudata: yomiContextMenudata,
+  startContextMenuOperation: startYomiContextMenuOperation,
+  clearInputSelection: clearYomiInputSelection,
+  endContextMenuOperation: endYomiContextMenuOperation,
+} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomi);
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles/colors" as colors;
+@use "@/styles/variables" as vars;
+
+.word-editor {
+  display: flex;
+  flex-flow: column;
+  height: calc(
+    100vh - #{vars.$menubar-height + vars.$toolbar-height +
+      vars.$window-border-width}
+  ) !important;
+  overflow: auto;
+}
+
+.word-input {
+  padding-left: 10px;
+  width: calc(66vw - 80px);
+
+  :deep(.q-field__control) {
+    height: 2rem;
+  }
+
+  :deep(.q-placeholder) {
+    padding: 0;
+    font-size: 20px;
+  }
+
+  :deep(.q-field__after) {
+    height: 2rem;
+  }
+}
+
+.desc-row {
+  color: rgba(colors.$display-rgb, 0.5);
+  font-size: 12px;
+}
+
+.play-button {
+  margin: auto 0;
+  padding-right: 16px;
+}
+
+.accent-phrase-table {
+  flex-grow: 1;
+  align-self: stretch;
+
+  display: flex;
+  height: 130px;
+  overflow-x: scroll;
+  width: calc(66vw - 140px);
+
+  .mora-table {
+    display: inline-grid;
+    align-self: stretch;
+    grid-template-rows: 1fr 60px 30px;
+
+    .text-cell {
+      padding: 0;
+      min-width: 20px;
+      max-width: 20px;
+      grid-row-start: 3;
+      text-align: center;
+      white-space: nowrap;
+      color: colors.$display;
+      position: relative;
+    }
+
+    .splitter-cell {
+      min-width: 20px;
+      max-width: 20px;
+      grid-row: 3 / span 1;
+      z-index: vars.$detail-view-splitter-cell-z-index;
+    }
+  }
+}
+
+.save-delete-reset-buttons {
+  padding: 20px;
+
+  display: flex;
+  flex: 1;
+  align-items: flex-end;
+}
+</style>
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 2d4c1dcfb0..3b4c4dd55b 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -116,169 +116,7 @@
             </QList>
           </div>
 
-          <!-- 右側のpane -->
-          <div
-            v-show="wordEditing"
-            class="col-8 no-wrap text-no-wrap word-editor"
-          >
-            <div class="row q-pl-md q-mt-md">
-              <div class="text-h6">単語</div>
-              <QInput
-                ref="surfaceInput"
-                v-model="surface"
-                class="word-input"
-                dense
-                :disable="uiLocked"
-                @focus="clearSurfaceInputSelection()"
-                @blur="setSurface(surface)"
-                @keydown.enter="yomiFocus"
-              >
-                <ContextMenu
-                  ref="surfaceContextMenu"
-                  :header="surfaceContextMenuHeader"
-                  :menudata="surfaceContextMenudata"
-                  @beforeShow="startSurfaceContextMenuOperation()"
-                  @beforeHide="endSurfaceContextMenuOperation()"
-                />
-              </QInput>
-            </div>
-            <div class="row q-pl-md q-pt-sm">
-              <div class="text-h6">読み</div>
-              <QInput
-                ref="yomiInput"
-                v-model="yomi"
-                class="word-input q-pb-none"
-                dense
-                :error="!isOnlyHiraOrKana"
-                :disable="uiLocked"
-                @focus="clearYomiInputSelection()"
-                @blur="setYomi(yomi)"
-                @keydown.enter="setYomiWhenEnter"
-              >
-                <template #error>
-                  読みに使える文字はひらがなとカタカナのみです。
-                </template>
-                <ContextMenu
-                  ref="yomiContextMenu"
-                  :header="yomiContextMenuHeader"
-                  :menudata="yomiContextMenudata"
-                  @beforeShow="startYomiContextMenuOperation()"
-                  @beforeHide="endYomiContextMenuOperation()"
-                />
-              </QInput>
-            </div>
-            <div class="row q-pl-md q-mt-lg text-h6">アクセント調整</div>
-            <div class="row q-pl-md desc-row">
-              語尾のアクセントを考慮するため、「が」が自動で挿入されます。
-            </div>
-            <div class="row q-px-md" style="height: 130px">
-              <div class="play-button">
-                <QBtn
-                  v-if="!nowPlaying && !nowGenerating"
-                  fab
-                  color="primary"
-                  textColor="display-on-primary"
-                  icon="play_arrow"
-                  @click="play"
-                />
-                <QBtn
-                  v-else
-                  fab
-                  color="primary"
-                  textColor="display-on-primary"
-                  icon="stop"
-                  :disable="nowGenerating"
-                  @click="stop"
-                />
-              </div>
-              <div
-                ref="accentPhraseTable"
-                class="accent-phrase-table overflow-hidden-y"
-              >
-                <div v-if="accentPhrase" class="mora-table">
-                  <AudioAccent
-                    :accentPhrase
-                    :accentPhraseIndex="0"
-                    :uiLocked
-                    :onChangeAccent="changeAccent"
-                  />
-                  <template
-                    v-for="(mora, moraIndex) in accentPhrase.moras"
-                    :key="moraIndex"
-                  >
-                    <div
-                      class="text-cell"
-                      :style="{
-                        gridColumn: `${moraIndex * 2 + 1} / span 1`,
-                      }"
-                    >
-                      {{ mora.text }}
-                    </div>
-                    <div
-                      v-if="moraIndex < accentPhrase.moras.length - 1"
-                      class="splitter-cell"
-                      :style="{
-                        gridColumn: `${moraIndex * 2 + 2} / span 1`,
-                      }"
-                    />
-                  </template>
-                </div>
-              </div>
-            </div>
-            <div class="row q-pl-md q-pt-lg text-h6">単語優先度</div>
-            <div class="row q-pl-md desc-row">
-              単語を登録しても反映されない場合は優先度を高くしてください。
-            </div>
-            <div
-              class="row q-px-md"
-              :style="{
-                justifyContent: 'center',
-              }"
-            >
-              <QSlider
-                v-model="wordPriority"
-                snap
-                dense
-                color="primary"
-                markers
-                :min="0"
-                :max="10"
-                :step="1"
-                :markerLabels="wordPriorityLabels"
-                :style="{
-                  width: '80%',
-                }"
-              />
-            </div>
-            <div class="row q-px-md save-delete-reset-buttons">
-              <QSpace />
-              <QBtn
-                v-show="!!selectedId"
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || !isWordChanged"
-                @click="resetWord(selectedId)"
-                >リセット</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked"
-                @click="discardOrNotDialog(cancel)"
-                >キャンセル</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || !isWordChanged"
-                @click="saveWord"
-                >保存</QBtn
-              >
-            </div>
-          </div>
+          <DictionaryEditWordDialog></DictionaryEditWordDialog>
         </QPage>
       </QPageContainer>
     </QLayout>
@@ -288,9 +126,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { QInput } from "quasar";
-import AudioAccent from "@/components/Talk/AudioAccent.vue";
-import ContextMenu from "@/components/Menu/ContextMenu.vue";
-import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
+import DictionaryEditWordDialog from "./DictionaryEditWordDialog.vue";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";
 import { AccentPhrase, UserDictWord } from "@/openapi";
@@ -695,25 +531,6 @@ const toWordEditingState = () => {
 const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
-
-const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
-const yomiContextMenu = ref<InstanceType<typeof ContextMenu>>();
-
-const {
-  contextMenuHeader: surfaceContextMenuHeader,
-  contextMenudata: surfaceContextMenudata,
-  startContextMenuOperation: startSurfaceContextMenuOperation,
-  clearInputSelection: clearSurfaceInputSelection,
-  endContextMenuOperation: endSurfaceContextMenuOperation,
-} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surface);
-
-const {
-  contextMenuHeader: yomiContextMenuHeader,
-  contextMenudata: yomiContextMenudata,
-  startContextMenuOperation: startYomiContextMenuOperation,
-  clearInputSelection: clearYomiInputSelection,
-  endContextMenuOperation: endYomiContextMenuOperation,
-} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomi);
 </script>
 
 <style lang="scss" scoped>
@@ -778,84 +595,4 @@ const {
   position: absolute;
   z-index: 10;
 }
-
-.word-editor {
-  display: flex;
-  flex-flow: column;
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  ) !important;
-  overflow: auto;
-}
-
-.word-input {
-  padding-left: 10px;
-  width: calc(66vw - 80px);
-
-  :deep(.q-field__control) {
-    height: 2rem;
-  }
-
-  :deep(.q-placeholder) {
-    padding: 0;
-    font-size: 20px;
-  }
-
-  :deep(.q-field__after) {
-    height: 2rem;
-  }
-}
-
-.desc-row {
-  color: rgba(colors.$display-rgb, 0.5);
-  font-size: 12px;
-}
-
-.play-button {
-  margin: auto 0;
-  padding-right: 16px;
-}
-
-.accent-phrase-table {
-  flex-grow: 1;
-  align-self: stretch;
-
-  display: flex;
-  height: 130px;
-  overflow-x: scroll;
-  width: calc(66vw - 140px);
-
-  .mora-table {
-    display: inline-grid;
-    align-self: stretch;
-    grid-template-rows: 1fr 60px 30px;
-
-    .text-cell {
-      padding: 0;
-      min-width: 20px;
-      max-width: 20px;
-      grid-row-start: 3;
-      text-align: center;
-      white-space: nowrap;
-      color: colors.$display;
-      position: relative;
-    }
-
-    .splitter-cell {
-      min-width: 20px;
-      max-width: 20px;
-      grid-row: 3 / span 1;
-      z-index: vars.$detail-view-splitter-cell-z-index;
-    }
-  }
-}
-
-.save-delete-reset-buttons {
-  padding: 20px;
-
-  display: flex;
-  flex: 1;
-  align-items: flex-end;
-}
 </style>

From 4298f647278bcdcdae8b4273d714290a85567a2f Mon Sep 17 00:00:00 2001
From: jdkfx <htazoe@jdkfx.com>
Date: Tue, 3 Dec 2024 23:54:18 +0900
Subject: [PATCH 02/10] =?UTF-8?q?=E9=9F=B3=E5=A3=B0=E5=86=8D=E7=94=9F?=
 =?UTF-8?q?=E6=A9=9F=E6=A7=8B=E3=81=AE=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 366 +-----------------
 .../Dialog/DictionaryManageDialog.vue         |  41 --
 2 files changed, 7 insertions(+), 400 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index 1e95935b6c..cc6452f8f1 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -175,186 +175,15 @@ import {
   createKanaRegex,
 } from "@/domain/japanese";
 
-const defaultDictPriority = 5;
-
-const props = defineProps<{
-  modelValue: boolean;
-}>();
-const emit = defineEmits<{
-  (e: "update:modelValue", v: boolean): void;
-}>();
-
-const store = useStore();
-
-const dictionaryManageDialogOpenedComputed = computed({
-  get: () => props.modelValue,
-  set: (val) => emit("update:modelValue", val),
-});
-const uiLocked = ref(false); // ダイアログ内でstore.getters.UI_LOCKEDは常にtrueなので独自に管理
+// 音声再生機構
 const nowGenerating = ref(false);
 const nowPlaying = ref(false);
 
-// word-list の要素のうち、どの要素がホバーされているか
-const hoveredKey = ref<string | undefined>(undefined);
-
-const loadingDictState = ref<null | "loading" | "synchronizing">("loading");
-const userDict = ref<Record<string, UserDictWord>>({});
-
-const createUILockAction = function <T>(action: Promise<T>) {
-  uiLocked.value = true;
-  return action.finally(() => {
-    uiLocked.value = false;
-  });
-};
-
-const loadingDictProcess = async () => {
-  if (store.state.engineIds.length === 0)
-    throw new Error(`assert engineId.length > 0`);
-
-  loadingDictState.value = "loading";
-  try {
-    userDict.value = await createUILockAction(
-      store.dispatch("LOAD_ALL_USER_DICT"),
-    );
-  } catch {
-    const result = await store.dispatch("SHOW_ALERT_DIALOG", {
-      title: "辞書の取得に失敗しました",
-      message: "エンジンの再起動をお試しください。",
-    });
-    if (result === "OK") {
-      dictionaryManageDialogOpenedComputed.value = false;
-    }
-  }
-  loadingDictState.value = "synchronizing";
-  try {
-    await createUILockAction(store.dispatch("SYNC_ALL_USER_DICT"));
-  } catch {
-    await store.dispatch("SHOW_ALERT_DIALOG", {
-      title: "辞書の同期に失敗しました",
-      message: "エンジンの再起動をお試しください。",
-    });
-  }
-  loadingDictState.value = null;
-};
-watch(dictionaryManageDialogOpenedComputed, async (newValue) => {
-  if (newValue) {
-    await loadingDictProcess();
-    toInitialState();
-  }
-});
-
-const wordEditing = ref(false);
-
-const surfaceInput = ref<QInput>();
-const yomiInput = ref<QInput>();
-const yomiFocus = (event?: KeyboardEvent) => {
-  if (event && event.isComposing) return;
-  yomiInput.value?.focus();
-};
-const setYomiWhenEnter = (event?: KeyboardEvent) => {
-  if (event && event.isComposing) return;
-  void setYomi(yomi.value);
-};
-
-const selectedId = ref("");
-const surface = ref("");
-const yomi = ref("");
-
-const voiceComputed = computed(() => {
-  const userOrderedCharacterInfos =
-    store.getters.USER_ORDERED_CHARACTER_INFOS("talk");
-  if (userOrderedCharacterInfos == undefined)
-    throw new Error("assert USER_ORDERED_CHARACTER_INFOS");
-  if (store.state.engineIds.length === 0)
-    throw new Error("assert engineId.length > 0");
-  const characterInfo = userOrderedCharacterInfos[0].metas;
-  const speakerId = characterInfo.speakerUuid;
-  const { engineId, styleId } = characterInfo.styles[0];
-  return { engineId, speakerId, styleId };
-});
-
-const kanaRegex = createKanaRegex();
-const isOnlyHiraOrKana = ref(true);
-const accentPhrase = ref<AccentPhrase | undefined>();
-const accentPhraseTable = ref<HTMLElement>();
-
-const convertHankakuToZenkaku = (text: string) => {
-  // " "などの目に見えない文字をまとめて全角スペース(0x3000)に置き換える
-  text = text.replace(/\p{Z}/gu, () => String.fromCharCode(0x3000));
-
-  // "!"から"~"までの範囲の文字(数字やアルファベット)を全角に置き換える
-  return text.replace(/[\u0021-\u007e]/g, (s) => {
-    return String.fromCharCode(s.charCodeAt(0) + 0xfee0);
-  });
-};
-const setSurface = (text: string) => {
-  // surfaceを全角化する
-  // 入力は半角でも問題ないが、登録時に全角に変換され、isWordChangedの判断がおかしくなることがあるので、
-  // 入力後に自動で変換するようにする
-  surface.value = convertHankakuToZenkaku(text);
-};
-const setYomi = async (text: string, changeWord?: boolean) => {
-  const { engineId, styleId } = voiceComputed.value;
-
-  // テキスト長が0の時にエラー表示にならないように、テキスト長を考慮する
-  isOnlyHiraOrKana.value = !text.length || kanaRegex.test(text);
-  // 読みが変更されていない場合は、アクセントフレーズに変更を加えない
-  // ただし、読みが同じで違う単語が存在する場合が考えられるので、changeWordフラグを考慮する
-  // 「ガ」が自動挿入されるので、それを考慮してsliceしている
-  if (
-    text ==
-      accentPhrase.value?.moras
-        .map((v) => v.text)
-        .join("")
-        .slice(0, -1) &&
-    !changeWord
-  ) {
-    return;
-  }
-  if (isOnlyHiraOrKana.value && text.length) {
-    text = convertHiraToKana(text);
-    text = convertLongVowel(text);
-    accentPhrase.value = (
-      await createUILockAction(
-        store.dispatch("FETCH_ACCENT_PHRASES", {
-          text: text + "ガ'",
-          engineId,
-          styleId,
-          isKana: true,
-        }),
-      )
-    )[0];
-    if (selectedId.value && userDict.value[selectedId.value].yomi === text) {
-      accentPhrase.value.accent = computeDisplayAccent();
-    }
-  } else {
-    accentPhrase.value = undefined;
-  }
-  yomi.value = text;
-};
-
-const changeAccent = async (_: number, accent: number) => {
-  const { engineId, styleId } = voiceComputed.value;
-
-  if (accentPhrase.value) {
-    accentPhrase.value.accent = accent;
-    accentPhrase.value = (
-      await createUILockAction(
-        store.dispatch("FETCH_MORA_DATA", {
-          accentPhrases: [accentPhrase.value],
-          engineId,
-          styleId,
-        }),
-      )
-    )[0];
-  }
-};
-
 const play = async () => {
   if (!accentPhrase.value) return;
 
   nowGenerating.value = true;
-  const audioItem = await store.dispatch("GENERATE_AUDIO_ITEM", {
+  const audioItem = await store.actions.GENERATE_AUDIO_ITEM({
     text: yomi.value,
     voice: voiceComputed.value,
   });
@@ -366,13 +195,13 @@ const play = async () => {
 
   let fetchAudioResult: FetchAudioResult;
   try {
-    fetchAudioResult = await store.dispatch("FETCH_AUDIO_FROM_AUDIO_ITEM", {
+    fetchAudioResult = await store.actions.FETCH_AUDIO_FROM_AUDIO_ITEM({
       audioItem,
     });
   } catch (e) {
     window.backend.logError(e);
     nowGenerating.value = false;
-    void store.dispatch("SHOW_ALERT_DIALOG", {
+    void store.actions.SHOW_ALERT_DIALOG({
       title: "生成に失敗しました",
       message: "エンジンの再起動をお試しください。",
     });
@@ -382,193 +211,12 @@ const play = async () => {
   const { blob } = fetchAudioResult;
   nowGenerating.value = false;
   nowPlaying.value = true;
-  await store.dispatch("PLAY_AUDIO_BLOB", { audioBlob: blob });
+  await store.actions.PLAY_AUDIO_BLOB({ audioBlob: blob });
   nowPlaying.value = false;
 };
-const stop = () => {
-  void store.dispatch("STOP_AUDIO");
-};
-
-// accent phraseにあるaccentと実際に登録するアクセントには差が生まれる
-// アクセントが自動追加される「ガ」に指定されている場合、
-// 実際に登録するaccentの値は0となるので、そうなるように処理する
-const computeRegisteredAccent = () => {
-  if (!accentPhrase.value) throw new Error();
-  let accent = accentPhrase.value.accent;
-  accent = accent === accentPhrase.value.moras.length ? 0 : accent;
-  return accent;
-};
-// computeの逆
-// 辞書から得たaccentが0の場合に、自動で追加される「ガ」の位置にアクセントを表示させるように処理する
-const computeDisplayAccent = () => {
-  if (!accentPhrase.value || !selectedId.value) throw new Error();
-  let accent = userDict.value[selectedId.value].accentType;
-  accent = accent === 0 ? accentPhrase.value.moras.length : accent;
-  return accent;
-};
-
-const wordPriority = ref(defaultDictPriority);
-const wordPriorityLabels = {
-  0: "最低",
-  3: "低",
-  5: "標準",
-  7: "高",
-  10: "最高",
-};
-
-// 操作（ステートの移動）
-const isWordChanged = computed(() => {
-  if (selectedId.value === "") {
-    return surface.value && yomi.value && accentPhrase.value;
-  }
-  // 一旦代入することで、userDictそのものが更新された時もcomputedするようにする
-  const dict = userDict.value;
-  const dictData = dict[selectedId.value];
-  return (
-    dictData &&
-    (dictData.surface !== surface.value ||
-      dictData.yomi !== yomi.value ||
-      dictData.accentType !== computeRegisteredAccent() ||
-      dictData.priority !== wordPriority.value)
-  );
-});
-const saveWord = async () => {
-  if (!accentPhrase.value) throw new Error(`accentPhrase === undefined`);
-  const accent = computeRegisteredAccent();
-  if (selectedId.value) {
-    try {
-      await store.dispatch("REWRITE_WORD", {
-        wordUuid: selectedId.value,
-        surface: surface.value,
-        pronunciation: yomi.value,
-        accentType: accent,
-        priority: wordPriority.value,
-      });
-    } catch {
-      void store.dispatch("SHOW_ALERT_DIALOG", {
-        title: "単語の更新に失敗しました",
-        message: "エンジンの再起動をお試しください。",
-      });
-      return;
-    }
-  } else {
-    try {
-      await createUILockAction(
-        store.dispatch("ADD_WORD", {
-          surface: surface.value,
-          pronunciation: yomi.value,
-          accentType: accent,
-          priority: wordPriority.value,
-        }),
-      );
-    } catch {
-      void store.dispatch("SHOW_ALERT_DIALOG", {
-        title: "単語の登録に失敗しました",
-        message: "エンジンの再起動をお試しください。",
-      });
-      return;
-    }
-  }
-  await loadingDictProcess();
-  toInitialState();
-};
-const deleteWord = async () => {
-  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
-    title: "登録された単語を削除しますか？",
-    message: "削除された単語は元に戻せません。",
-    actionName: "削除",
-  });
-  if (result === "OK") {
-    try {
-      await createUILockAction(
-        store.dispatch("DELETE_WORD", {
-          wordUuid: selectedId.value,
-        }),
-      );
-    } catch {
-      void store.dispatch("SHOW_ALERT_DIALOG", {
-        title: "単語の削除に失敗しました",
-        message: "エンジンの再起動をお試しください。",
-      });
-      return;
-    }
-    await loadingDictProcess();
-    toInitialState();
-  }
-};
-const resetWord = async (id: string) => {
-  const result = await store.dispatch("SHOW_WARNING_DIALOG", {
-    title: "単語の変更をリセットしますか？",
-    message: "単語の変更は破棄されてリセットされます。",
-    actionName: "リセット",
-  });
-  if (result === "OK") {
-    selectedId.value = id;
-    surface.value = userDict.value[id].surface;
-    void setYomi(userDict.value[id].yomi, true);
-    wordPriority.value = userDict.value[id].priority;
-    toWordEditingState();
-  }
-};
-const discardOrNotDialog = async (okCallback: () => void) => {
-  if (isWordChanged.value) {
-    const result = await store.dispatch("SHOW_WARNING_DIALOG", {
-      title: "単語の追加・変更を破棄しますか？",
-      message: "破棄すると、単語の追加・変更はリセットされます。",
-      actionName: "破棄",
-    });
-    if (result === "OK") {
-      okCallback();
-    }
-  } else {
-    okCallback();
-  }
-};
-const newWord = () => {
-  selectedId.value = "";
-  surface.value = "";
-  void setYomi("");
-  wordPriority.value = defaultDictPriority;
-  editWord();
-};
-const editWord = () => {
-  toWordEditingState();
-};
-const selectWord = (id: string) => {
-  selectedId.value = id;
-  surface.value = userDict.value[id].surface;
-  void setYomi(userDict.value[id].yomi, true);
-  wordPriority.value = userDict.value[id].priority;
-  toWordSelectedState();
-};
-const cancel = () => {
-  toInitialState();
-};
-const closeDialog = () => {
-  toDialogClosedState();
-};
 
-// ステートの移動
-// 初期状態
-const toInitialState = () => {
-  wordEditing.value = false;
-  selectedId.value = "";
-  surface.value = "";
-  void setYomi("");
-  wordPriority.value = defaultDictPriority;
-};
-// 単語が選択されているだけの状態
-const toWordSelectedState = () => {
-  wordEditing.value = false;
-};
-// 単語が編集されている状態
-const toWordEditingState = () => {
-  wordEditing.value = true;
-  surfaceInput.value?.focus();
-};
-// ダイアログが閉じている状態
-const toDialogClosedState = () => {
-  dictionaryManageDialogOpenedComputed.value = false;
+const stop = () => {
+  void store.actions.STOP_AUDIO();
 };
 
 const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 239b9fbdce..391ed5715c 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -152,8 +152,6 @@ const dictionaryManageDialogOpenedComputed = computed({
   set: (val) => emit("update:modelValue", val),
 });
 const uiLocked = ref(false); // ダイアログ内でstore.getters.UI_LOCKEDは常にtrueなので独自に管理
-const nowGenerating = ref(false);
-const nowPlaying = ref(false);
 
 // word-list の要素のうち、どの要素がホバーされているか
 const hoveredKey = ref<string | undefined>(undefined);
@@ -311,45 +309,6 @@ const changeAccent = async (_: number, accent: number) => {
   }
 };
 
-const play = async () => {
-  if (!accentPhrase.value) return;
-
-  nowGenerating.value = true;
-  const audioItem = await store.actions.GENERATE_AUDIO_ITEM({
-    text: yomi.value,
-    voice: voiceComputed.value,
-  });
-
-  if (audioItem.query == undefined)
-    throw new Error(`assert audioItem.query !== undefined`);
-
-  audioItem.query.accentPhrases = [accentPhrase.value];
-
-  let fetchAudioResult: FetchAudioResult;
-  try {
-    fetchAudioResult = await store.actions.FETCH_AUDIO_FROM_AUDIO_ITEM({
-      audioItem,
-    });
-  } catch (e) {
-    window.backend.logError(e);
-    nowGenerating.value = false;
-    void store.actions.SHOW_ALERT_DIALOG({
-      title: "生成に失敗しました",
-      message: "エンジンの再起動をお試しください。",
-    });
-    return;
-  }
-
-  const { blob } = fetchAudioResult;
-  nowGenerating.value = false;
-  nowPlaying.value = true;
-  await store.actions.PLAY_AUDIO_BLOB({ audioBlob: blob });
-  nowPlaying.value = false;
-};
-const stop = () => {
-  void store.actions.STOP_AUDIO();
-};
-
 // accent phraseにあるaccentと実際に登録するアクセントには差が生まれる
 // アクセントが自動追加される「ガ」に指定されている場合、
 // 実際に登録するaccentの値は0となるので、そうなるように処理する

From 53d2e0bee65c386220cf06b0aad3c55bf079ff6b Mon Sep 17 00:00:00 2001
From: jdkfx <htazoe@jdkfx.com>
Date: Tue, 3 Dec 2024 23:59:33 +0900
Subject: [PATCH 03/10] =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=80=81=E3=82=A2=E3=82=AF=E3=82=BB=E3=83=B3=E3=83=88=E9=96=A2?=
 =?UTF-8?q?=E9=80=A3=E3=82=92=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 32 +++++++++++++++----
 .../Dialog/DictionaryManageDialog.vue         | 21 ------------
 2 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index cc6452f8f1..b57676d13c 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -161,19 +161,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { ref } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";
-import { AccentPhrase, UserDictWord } from "@/openapi";
-import {
-  convertHiraToKana,
-  convertLongVowel,
-  createKanaRegex,
-} from "@/domain/japanese";
+
+const store = useStore();
 
 // 音声再生機構
 const nowGenerating = ref(false);
@@ -219,6 +215,28 @@ const stop = () => {
   void store.actions.STOP_AUDIO();
 };
 
+// メニュー系
+const surfaceInput = ref<QInput>();
+const yomiInput = ref<QInput>();
+
+// アクセント系
+const changeAccent = async (_: number, accent: number) => {
+  const { engineId, styleId } = voiceComputed.value;
+
+  if (accentPhrase.value) {
+    accentPhrase.value.accent = accent;
+    accentPhrase.value = (
+      await createUILockAction(
+        store.actions.FETCH_MORA_DATA({
+          accentPhrases: [accentPhrase.value],
+          engineId,
+          styleId,
+        }),
+      )
+    )[0];
+  }
+};
+
 const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
 const yomiContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 391ed5715c..f8cbaba197 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -125,10 +125,8 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import { QInput } from "quasar";
 import DictionaryEditWordDialog from "./DictionaryEditWordDialog.vue";
 import { useStore } from "@/store";
-import type { FetchAudioResult } from "@/store/type";
 import { AccentPhrase, UserDictWord } from "@/openapi";
 import {
   convertHiraToKana,
@@ -204,8 +202,6 @@ watch(dictionaryManageDialogOpenedComputed, async (newValue) => {
 
 const wordEditing = ref(false);
 
-const surfaceInput = ref<QInput>();
-const yomiInput = ref<QInput>();
 const yomiFocus = (event?: KeyboardEvent) => {
   if (event && event.isComposing) return;
   yomiInput.value?.focus();
@@ -292,23 +288,6 @@ const setYomi = async (text: string, changeWord?: boolean) => {
   yomi.value = text;
 };
 
-const changeAccent = async (_: number, accent: number) => {
-  const { engineId, styleId } = voiceComputed.value;
-
-  if (accentPhrase.value) {
-    accentPhrase.value.accent = accent;
-    accentPhrase.value = (
-      await createUILockAction(
-        store.actions.FETCH_MORA_DATA({
-          accentPhrases: [accentPhrase.value],
-          engineId,
-          styleId,
-        }),
-      )
-    )[0];
-  }
-};
-
 // accent phraseにあるaccentと実際に登録するアクセントには差が生まれる
 // アクセントが自動追加される「ガ」に指定されている場合、
 // 実際に登録するaccentの値は0となるので、そうなるように処理する

From 55b9b4e86ab3a5af8f7546ed77b89306b4f6762e Mon Sep 17 00:00:00 2001
From: jdkfx <htazoe@jdkfx.com>
Date: Fri, 6 Dec 2024 00:27:29 +0900
Subject: [PATCH 04/10] =?UTF-8?q?provide/inject=E3=81=A7=E8=A6=AA=E5=AD=90?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E9=96=93=E3=81=AE=E5=A4=89=E6=95=B0=E3=82=92=E5=85=B1=E6=9C=89?=
 =?UTF-8?q?=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 33 +++++++++++++------
 .../Dialog/DictionaryManageDialog.vue         |  8 +++--
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index b57676d13c..3e33306849 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -161,33 +161,44 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, inject } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";
+import { AccentPhrase } from "@/openapi";
+import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 
 const store = useStore();
 
+const accentPhrase = inject<AccentPhrase | undefined>("accentPhrase");
+const voiceComputed = inject<{
+  engineId: string & EngineId;
+  speakerId: string & SpeakerId;
+  styleId: number & StyleId;
+}>("voiceComputed");
+const surface = inject<string>("surface");
+const yomi = inject<string>("yomi");
+
 // 音声再生機構
 const nowGenerating = ref(false);
 const nowPlaying = ref(false);
 
 const play = async () => {
-  if (!accentPhrase.value) return;
+  if (!accentPhrase) return;
 
   nowGenerating.value = true;
   const audioItem = await store.actions.GENERATE_AUDIO_ITEM({
-    text: yomi.value,
-    voice: voiceComputed.value,
+    text: yomi,
+    voice: voiceComputed,
   });
 
   if (audioItem.query == undefined)
     throw new Error(`assert audioItem.query !== undefined`);
 
-  audioItem.query.accentPhrases = [accentPhrase.value];
+  audioItem.query.accentPhrases = [accentPhrase];
 
   let fetchAudioResult: FetchAudioResult;
   try {
@@ -220,15 +231,17 @@ const surfaceInput = ref<QInput>();
 const yomiInput = ref<QInput>();
 
 // アクセント系
+const accentPhraseTable = ref<HTMLElement>();
+
 const changeAccent = async (_: number, accent: number) => {
-  const { engineId, styleId } = voiceComputed.value;
+  const { engineId, styleId } = voiceComputed;
 
-  if (accentPhrase.value) {
-    accentPhrase.value.accent = accent;
-    accentPhrase.value = (
+  if (accentPhrase) {
+    accentPhrase.accent = accent;
+    accentPhrase = (
       await createUILockAction(
         store.actions.FETCH_MORA_DATA({
-          accentPhrases: [accentPhrase.value],
+          accentPhrases: [accentPhrase],
           engineId,
           styleId,
         }),
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index f8cbaba197..fd1c1d563e 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, provide } from "vue";
 import DictionaryEditWordDialog from "./DictionaryEditWordDialog.vue";
 import { useStore } from "@/store";
 import { AccentPhrase, UserDictWord } from "@/openapi";
@@ -231,7 +231,6 @@ const voiceComputed = computed(() => {
 const kanaRegex = createKanaRegex();
 const isOnlyHiraOrKana = ref(true);
 const accentPhrase = ref<AccentPhrase | undefined>();
-const accentPhraseTable = ref<HTMLElement>();
 
 const convertHankakuToZenkaku = (text: string) => {
   // " "などの目に見えない文字をまとめて全角スペース(0x3000)に置き換える
@@ -469,6 +468,11 @@ const toWordEditingState = () => {
 const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
+
+provide("accentPhrase", accentPhrase);
+provide("voiceComputed", voiceComputed);
+provide("surface", surface);
+provide("yomi", yomi);
 </script>
 
 <style lang="scss" scoped>

From 069bed7382b6d11d8bf14fab4cc6ba02187cbd3b Mon Sep 17 00:00:00 2001
From: jdkfx <htazoe@jdkfx.com>
Date: Sat, 7 Dec 2024 15:57:53 +0900
Subject: [PATCH 05/10] =?UTF-8?q?=E5=A4=89=E6=95=B0=E3=81=A8=E9=96=A2?=
 =?UTF-8?q?=E6=95=B0=E3=82=92=E7=A7=BB=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 147 ++++++++++++++++--
 .../Dialog/DictionaryManageDialog.vue         | 109 +++----------
 2 files changed, 158 insertions(+), 98 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index 3e33306849..e83b2e8bfd 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -161,26 +161,56 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject } from "vue";
+import { ref, inject, Ref, ComputedRef } from "vue";
 import { QInput } from "quasar";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";
-import { AccentPhrase } from "@/openapi";
+import { AccentPhrase, UserDictWord } from "@/openapi";
 import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 
 const store = useStore();
 
-const accentPhrase = inject<AccentPhrase | undefined>("accentPhrase");
-const voiceComputed = inject<{
+/**
+ * injectで親コンポーネント(components/Dialog/DictionaryManageDialog.vue)から変数と関数を共有してもらう
+ */
+const wordEditing = inject("wordEditing") as boolean;
+const surfaceInput = inject("surfaceInput") as Ref<QInput>;
+const selectedId = inject("selectedId") as string;
+const uiLocked = inject("uiLocked") as boolean;
+const userDict = inject("userDict") as Record<string, UserDictWord>;
+const isOnlyHiraOrKana = inject("isOnlyHiraOrKana") as boolean;
+const accentPhrase = inject("accentPhrase") as AccentPhrase;
+const voiceComputed = inject("voiceComputed") as ComputedRef<{
   engineId: string & EngineId;
   speakerId: string & SpeakerId;
   styleId: number & StyleId;
-}>("voiceComputed");
-const surface = inject<string>("surface");
-const yomi = inject<string>("yomi");
+}>;
+const surface = inject("surface") as string;
+const yomi = inject("yomi") as string;
+const wordPriority = inject("wordPriority") as Ref<number>;
+const isWordChanged = inject("isWordChanged") as ComputedRef<
+  boolean | "" | AccentPhrase | undefined
+>;
+const setYomi = inject("setYomi") as (
+  text: string,
+  changeWord?: boolean,
+) => Promise<void>;
+const createUILockAction = inject("createUILockAction") as <T>(
+  action: Promise<T>,
+) => Promise<T>;
+const loadingDictProcess = inject("loadingDictProcess") as () => Promise<void>;
+const computeRegisteredAccent = inject(
+  "computeRegisteredAccent",
+) as () => number;
+const discardOrNotDialog = inject("discardOrNotDialog") as (
+  okCallback: () => void,
+) => Promise<void>;
+const toInitialState = inject("toInitialState") as () => void;
+const toWordEditingState = inject("toWordEditingState") as () => void;
+const cancel = inject("cancel") as () => void;
 
 // 音声再生機構
 const nowGenerating = ref(false);
@@ -192,7 +222,7 @@ const play = async () => {
   nowGenerating.value = true;
   const audioItem = await store.actions.GENERATE_AUDIO_ITEM({
     text: yomi,
-    voice: voiceComputed,
+    voice: voiceComputed.value,
   });
 
   if (audioItem.query == undefined)
@@ -227,14 +257,106 @@ const stop = () => {
 };
 
 // メニュー系
-const surfaceInput = ref<QInput>();
 const yomiInput = ref<QInput>();
+const surfaceRef = ref(surface);
+const yomiRef = ref(yomi);
+const wordPriorityLabels = {
+  0: "最低",
+  3: "低",
+  5: "標準",
+  7: "高",
+  10: "最高",
+};
+
+const yomiFocus = (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  yomiInput.value?.focus();
+};
+
+const setYomiWhenEnter = (event?: KeyboardEvent) => {
+  if (event && event.isComposing) return;
+  void setYomi(yomi);
+};
+
+const convertHankakuToZenkaku = (text: string) => {
+  // " "などの目に見えない文字をまとめて全角スペース(0x3000)に置き換える
+  text = text.replace(/\p{Z}/gu, () => String.fromCharCode(0x3000));
+
+  // "!"から"~"までの範囲の文字(数字やアルファベット)を全角に置き換える
+  return text.replace(/[\u0021-\u007e]/g, (s) => {
+    return String.fromCharCode(s.charCodeAt(0) + 0xfee0);
+  });
+};
+
+const setSurface = (text: string) => {
+  // surfaceを全角化する
+  // 入力は半角でも問題ないが、登録時に全角に変換され、isWordChangedの判断がおかしくなることがあるので、
+  // 入力後に自動で変換するようにする
+  surfaceRef.value = convertHankakuToZenkaku(text);
+};
+
+const saveWord = async () => {
+  if (!accentPhrase) throw new Error(`accentPhrase === undefined`);
+  const accent = computeRegisteredAccent();
+  if (selectedId) {
+    try {
+      await store.actions.REWRITE_WORD({
+        wordUuid: selectedId,
+        surface: surface,
+        pronunciation: yomi,
+        accentType: accent,
+        priority: wordPriority.value,
+      });
+    } catch {
+      void store.actions.SHOW_ALERT_DIALOG({
+        title: "単語の更新に失敗しました",
+        message: "エンジンの再起動をお試しください。",
+      });
+      return;
+    }
+  } else {
+    try {
+      await createUILockAction(
+        store.actions.ADD_WORD({
+          surface: surface,
+          pronunciation: yomi,
+          accentType: accent,
+          priority: wordPriority.value,
+        }),
+      );
+    } catch {
+      void store.actions.SHOW_ALERT_DIALOG({
+        title: "単語の登録に失敗しました",
+        message: "エンジンの再起動をお試しください。",
+      });
+      return;
+    }
+  }
+  await loadingDictProcess();
+  toInitialState();
+};
+
+// TODO: リセットする際にsurfaceが読み込めないため、修正する
+const resetWord = async (id: string) => {
+  const result = await store.actions.SHOW_WARNING_DIALOG({
+    title: "単語の変更をリセットしますか？",
+    message: "単語の変更は破棄されてリセットされます。",
+    actionName: "リセット",
+  });
+  if (result === "OK") {
+    selectedId = id;
+    surface = userDict[id].surface;
+    void setYomi(userDict[id].yomi, true);
+    wordPriority.value = userDict[id].priority;
+    toWordEditingState();
+  }
+};
 
 // アクセント系
 const accentPhraseTable = ref<HTMLElement>();
 
 const changeAccent = async (_: number, accent: number) => {
-  const { engineId, styleId } = voiceComputed;
+  const { engineId, styleId } = voiceComputed.value;
 
   if (accentPhrase) {
     accentPhrase.accent = accent;
@@ -250,6 +372,7 @@ const changeAccent = async (_: number, accent: number) => {
   }
 };
 
+// コンテキストメニュー
 const surfaceContextMenu = ref<InstanceType<typeof ContextMenu>>();
 const yomiContextMenu = ref<InstanceType<typeof ContextMenu>>();
 
@@ -259,7 +382,7 @@ const {
   startContextMenuOperation: startSurfaceContextMenuOperation,
   clearInputSelection: clearSurfaceInputSelection,
   endContextMenuOperation: endSurfaceContextMenuOperation,
-} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surface);
+} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surfaceRef);
 
 const {
   contextMenuHeader: yomiContextMenuHeader,
@@ -267,7 +390,7 @@ const {
   startContextMenuOperation: startYomiContextMenuOperation,
   clearInputSelection: clearYomiInputSelection,
   endContextMenuOperation: endYomiContextMenuOperation,
-} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomi);
+} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomiRef);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index fd1c1d563e..44630790f5 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -125,6 +125,7 @@
 
 <script setup lang="ts">
 import { computed, ref, watch, provide } from "vue";
+import { QInput } from "quasar";
 import DictionaryEditWordDialog from "./DictionaryEditWordDialog.vue";
 import { useStore } from "@/store";
 import { AccentPhrase, UserDictWord } from "@/openapi";
@@ -201,16 +202,7 @@ watch(dictionaryManageDialogOpenedComputed, async (newValue) => {
 });
 
 const wordEditing = ref(false);
-
-const yomiFocus = (event?: KeyboardEvent) => {
-  if (event && event.isComposing) return;
-  yomiInput.value?.focus();
-};
-const setYomiWhenEnter = (event?: KeyboardEvent) => {
-  if (event && event.isComposing) return;
-  void setYomi(yomi.value);
-};
-
+const surfaceInput = ref<QInput>();
 const selectedId = ref("");
 const surface = ref("");
 const yomi = ref("");
@@ -232,21 +224,6 @@ const kanaRegex = createKanaRegex();
 const isOnlyHiraOrKana = ref(true);
 const accentPhrase = ref<AccentPhrase | undefined>();
 
-const convertHankakuToZenkaku = (text: string) => {
-  // " "などの目に見えない文字をまとめて全角スペース(0x3000)に置き換える
-  text = text.replace(/\p{Z}/gu, () => String.fromCharCode(0x3000));
-
-  // "!"から"~"までの範囲の文字(数字やアルファベット)を全角に置き換える
-  return text.replace(/[\u0021-\u007e]/g, (s) => {
-    return String.fromCharCode(s.charCodeAt(0) + 0xfee0);
-  });
-};
-const setSurface = (text: string) => {
-  // surfaceを全角化する
-  // 入力は半角でも問題ないが、登録時に全角に変換され、isWordChangedの判断がおかしくなることがあるので、
-  // 入力後に自動で変換するようにする
-  surface.value = convertHankakuToZenkaku(text);
-};
 const setYomi = async (text: string, changeWord?: boolean) => {
   const { engineId, styleId } = voiceComputed.value;
 
@@ -306,13 +283,6 @@ const computeDisplayAccent = () => {
 };
 
 const wordPriority = ref(defaultDictPriority);
-const wordPriorityLabels = {
-  0: "最低",
-  3: "低",
-  5: "標準",
-  7: "高",
-  10: "最高",
-};
 
 // 操作（ステートの移動）
 const isWordChanged = computed(() => {
@@ -330,46 +300,7 @@ const isWordChanged = computed(() => {
       dictData.priority !== wordPriority.value)
   );
 });
-const saveWord = async () => {
-  if (!accentPhrase.value) throw new Error(`accentPhrase === undefined`);
-  const accent = computeRegisteredAccent();
-  if (selectedId.value) {
-    try {
-      await store.actions.REWRITE_WORD({
-        wordUuid: selectedId.value,
-        surface: surface.value,
-        pronunciation: yomi.value,
-        accentType: accent,
-        priority: wordPriority.value,
-      });
-    } catch {
-      void store.actions.SHOW_ALERT_DIALOG({
-        title: "単語の更新に失敗しました",
-        message: "エンジンの再起動をお試しください。",
-      });
-      return;
-    }
-  } else {
-    try {
-      await createUILockAction(
-        store.actions.ADD_WORD({
-          surface: surface.value,
-          pronunciation: yomi.value,
-          accentType: accent,
-          priority: wordPriority.value,
-        }),
-      );
-    } catch {
-      void store.actions.SHOW_ALERT_DIALOG({
-        title: "単語の登録に失敗しました",
-        message: "エンジンの再起動をお試しください。",
-      });
-      return;
-    }
-  }
-  await loadingDictProcess();
-  toInitialState();
-};
+
 const deleteWord = async () => {
   const result = await store.actions.SHOW_WARNING_DIALOG({
     title: "登録された単語を削除しますか？",
@@ -394,20 +325,7 @@ const deleteWord = async () => {
     toInitialState();
   }
 };
-const resetWord = async (id: string) => {
-  const result = await store.actions.SHOW_WARNING_DIALOG({
-    title: "単語の変更をリセットしますか？",
-    message: "単語の変更は破棄されてリセットされます。",
-    actionName: "リセット",
-  });
-  if (result === "OK") {
-    selectedId.value = id;
-    surface.value = userDict.value[id].surface;
-    void setYomi(userDict.value[id].yomi, true);
-    wordPriority.value = userDict.value[id].priority;
-    toWordEditingState();
-  }
-};
+
 const discardOrNotDialog = async (okCallback: () => void) => {
   if (isWordChanged.value) {
     const result = await store.actions.SHOW_WARNING_DIALOG({
@@ -469,10 +387,29 @@ const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
 
+/**
+ * provideで子コンポーネント(components/Dialog/DictionaryEditWordDialog.vue)に変数と関数を共有する
+ */
+provide("wordEditing", wordEditing);
+provide("surfaceInput", surfaceInput);
+provide("selectedId", selectedId);
+provide("uiLocked", uiLocked);
+provide("userDict", userDict);
+provide("isOnlyHiraOrKana", isOnlyHiraOrKana);
 provide("accentPhrase", accentPhrase);
 provide("voiceComputed", voiceComputed);
 provide("surface", surface);
 provide("yomi", yomi);
+provide("wordPriority", wordPriority);
+provide("isWordChanged", isWordChanged);
+provide("setYomi", setYomi);
+provide("createUILockAction", createUILockAction);
+provide("loadingDictProcess", loadingDictProcess);
+provide("computeRegisteredAccent", computeRegisteredAccent);
+provide("discardOrNotDialog", discardOrNotDialog);
+provide("toInitialState", toInitialState);
+provide("toWordEditingState", toWordEditingState);
+provide("cancel", cancel);
 </script>
 
 <style lang="scss" scoped>

From ce45b91d9dd038e06dcf9dbf409c2220d9af0eed Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Sat, 7 Dec 2024 23:10:32 +0900
Subject: [PATCH 06/10] =?UTF-8?q?context=E5=9E=8B=E3=81=AB=E3=81=BE?=
 =?UTF-8?q?=E3=81=A8=E3=82=81=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 70 +++++++---------
 .../Dialog/DictionaryManageDialog.vue         | 79 +++++++++++++------
 2 files changed, 86 insertions(+), 63 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index e83b2e8bfd..985c96b018 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -161,56 +161,44 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, Ref, ComputedRef } from "vue";
+import { inject, ref } from "vue";
 import { QInput } from "quasar";
+import { DictionaryManageDialogContext } from "./DictionaryManageDialog.vue";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
 import { useStore } from "@/store";
 import type { FetchAudioResult } from "@/store/type";
-import { AccentPhrase, UserDictWord } from "@/openapi";
-import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 
 const store = useStore();
 
-/**
- * injectで親コンポーネント(components/Dialog/DictionaryManageDialog.vue)から変数と関数を共有してもらう
- */
-const wordEditing = inject("wordEditing") as boolean;
-const surfaceInput = inject("surfaceInput") as Ref<QInput>;
-const selectedId = inject("selectedId") as string;
-const uiLocked = inject("uiLocked") as boolean;
-const userDict = inject("userDict") as Record<string, UserDictWord>;
-const isOnlyHiraOrKana = inject("isOnlyHiraOrKana") as boolean;
-const accentPhrase = inject("accentPhrase") as AccentPhrase;
-const voiceComputed = inject("voiceComputed") as ComputedRef<{
-  engineId: string & EngineId;
-  speakerId: string & SpeakerId;
-  styleId: number & StyleId;
-}>;
-const surface = inject("surface") as string;
-const yomi = inject("yomi") as string;
-const wordPriority = inject("wordPriority") as Ref<number>;
-const isWordChanged = inject("isWordChanged") as ComputedRef<
-  boolean | "" | AccentPhrase | undefined
->;
-const setYomi = inject("setYomi") as (
-  text: string,
-  changeWord?: boolean,
-) => Promise<void>;
-const createUILockAction = inject("createUILockAction") as <T>(
-  action: Promise<T>,
-) => Promise<T>;
-const loadingDictProcess = inject("loadingDictProcess") as () => Promise<void>;
-const computeRegisteredAccent = inject(
-  "computeRegisteredAccent",
-) as () => number;
-const discardOrNotDialog = inject("discardOrNotDialog") as (
-  okCallback: () => void,
-) => Promise<void>;
-const toInitialState = inject("toInitialState") as () => void;
-const toWordEditingState = inject("toWordEditingState") as () => void;
-const cancel = inject("cancel") as () => void;
+const context = inject<DictionaryManageDialogContext>(
+  "dictionaryManageDialogContext",
+);
+if (context == undefined)
+  throw new Error(`dictionaryManageDialogContext == undefined`);
+const {
+  wordEditing,
+  surfaceInput,
+  selectedId,
+  uiLocked,
+  userDict,
+  isOnlyHiraOrKana,
+  accentPhrase,
+  voiceComputed,
+  surface,
+  yomi,
+  wordPriority,
+  isWordChanged,
+  setYomi,
+  createUILockAction,
+  loadingDictProcess,
+  computeRegisteredAccent,
+  discardOrNotDialog,
+  toInitialState,
+  toWordEditingState,
+  cancel,
+} = context;
 
 // 音声再生機構
 const nowGenerating = ref(false);
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 44630790f5..d524241725 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -116,13 +116,44 @@
             </QList>
           </div>
 
-          <DictionaryEditWordDialog></DictionaryEditWordDialog>
+          <DictionaryEditWordDialog />
         </QPage>
       </QPageContainer>
     </QLayout>
   </QDialog>
 </template>
 
+<script lang="ts">
+import { Ref, ComputedRef } from "vue";
+
+export interface DictionaryManageDialogContext {
+  wordEditing: Ref<boolean>;
+  surfaceInput: Ref<QInput | undefined>;
+  selectedId: Ref<string>;
+  uiLocked: Ref<boolean>;
+  userDict: Ref<Record<string, UserDictWord>>;
+  isOnlyHiraOrKana: Ref<boolean>;
+  accentPhrase: Ref<AccentPhrase | undefined>;
+  voiceComputed: ComputedRef<{
+    engineId: string;
+    speakerId: string;
+    styleId: number;
+  }>;
+  surface: Ref<string>;
+  yomi: Ref<string>;
+  wordPriority: Ref<number>;
+  isWordChanged: ComputedRef<boolean>;
+  setYomi: (text: string, changeWord?: boolean) => Promise<void>;
+  createUILockAction: <T>(action: Promise<T>) => Promise<T>;
+  loadingDictProcess: () => Promise<void>;
+  computeRegisteredAccent: () => number;
+  discardOrNotDialog: (okCallback: () => void) => Promise<void>;
+  toInitialState: () => void;
+  toWordEditingState: () => void;
+  cancel: () => void;
+}
+</script>
+
 <script setup lang="ts">
 import { computed, ref, watch, provide } from "vue";
 import { QInput } from "quasar";
@@ -287,7 +318,9 @@ const wordPriority = ref(defaultDictPriority);
 // 操作（ステートの移動）
 const isWordChanged = computed(() => {
   if (selectedId.value === "") {
-    return surface.value && yomi.value && accentPhrase.value;
+    return (
+      surface.value != "" && yomi.value != "" && accentPhrase.value != undefined
+    );
   }
   // 一旦代入することで、userDictそのものが更新された時もcomputedするようにする
   const dict = userDict.value;
@@ -390,26 +423,28 @@ const toDialogClosedState = () => {
 /**
  * provideで子コンポーネント(components/Dialog/DictionaryEditWordDialog.vue)に変数と関数を共有する
  */
-provide("wordEditing", wordEditing);
-provide("surfaceInput", surfaceInput);
-provide("selectedId", selectedId);
-provide("uiLocked", uiLocked);
-provide("userDict", userDict);
-provide("isOnlyHiraOrKana", isOnlyHiraOrKana);
-provide("accentPhrase", accentPhrase);
-provide("voiceComputed", voiceComputed);
-provide("surface", surface);
-provide("yomi", yomi);
-provide("wordPriority", wordPriority);
-provide("isWordChanged", isWordChanged);
-provide("setYomi", setYomi);
-provide("createUILockAction", createUILockAction);
-provide("loadingDictProcess", loadingDictProcess);
-provide("computeRegisteredAccent", computeRegisteredAccent);
-provide("discardOrNotDialog", discardOrNotDialog);
-provide("toInitialState", toInitialState);
-provide("toWordEditingState", toWordEditingState);
-provide("cancel", cancel);
+provide<DictionaryManageDialogContext>("dictionaryManageDialogContext", {
+  wordEditing,
+  surfaceInput,
+  selectedId,
+  uiLocked,
+  userDict,
+  isOnlyHiraOrKana,
+  accentPhrase,
+  voiceComputed,
+  surface,
+  yomi,
+  wordPriority,
+  isWordChanged,
+  setYomi,
+  createUILockAction,
+  loadingDictProcess,
+  computeRegisteredAccent,
+  discardOrNotDialog,
+  toInitialState,
+  toWordEditingState,
+  cancel,
+});
 </script>
 
 <style lang="scss" scoped>

From 54e4c4a763d034c59e2fada639374a4385cbb9d8 Mon Sep 17 00:00:00 2001
From: jdkfx <htazoe@jdkfx.com>
Date: Mon, 9 Dec 2024 01:02:01 +0900
Subject: [PATCH 07/10] =?UTF-8?q?=E7=B4=B0=E3=81=8B=E3=81=84=E5=9E=8B?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E3=81=AA=E3=81=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue       | 41 +++++++++----------
 .../Dialog/DictionaryManageDialog.vue         |  7 ++--
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index 985c96b018..8c1db0b74e 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -205,18 +205,18 @@ const nowGenerating = ref(false);
 const nowPlaying = ref(false);
 
 const play = async () => {
-  if (!accentPhrase) return;
+  if (!accentPhrase.value) return;
 
   nowGenerating.value = true;
   const audioItem = await store.actions.GENERATE_AUDIO_ITEM({
-    text: yomi,
+    text: yomi.value,
     voice: voiceComputed.value,
   });
 
   if (audioItem.query == undefined)
     throw new Error(`assert audioItem.query !== undefined`);
 
-  audioItem.query.accentPhrases = [accentPhrase];
+  audioItem.query.accentPhrases = [accentPhrase.value];
 
   let fetchAudioResult: FetchAudioResult;
   try {
@@ -263,7 +263,7 @@ const yomiFocus = (event?: KeyboardEvent) => {
 
 const setYomiWhenEnter = (event?: KeyboardEvent) => {
   if (event && event.isComposing) return;
-  void setYomi(yomi);
+  void setYomi(yomi.value);
 };
 
 const convertHankakuToZenkaku = (text: string) => {
@@ -286,12 +286,12 @@ const setSurface = (text: string) => {
 const saveWord = async () => {
   if (!accentPhrase) throw new Error(`accentPhrase === undefined`);
   const accent = computeRegisteredAccent();
-  if (selectedId) {
+  if (selectedId.value) {
     try {
       await store.actions.REWRITE_WORD({
-        wordUuid: selectedId,
-        surface: surface,
-        pronunciation: yomi,
+        wordUuid: selectedId.value,
+        surface: surface.value,
+        pronunciation: yomi.value,
         accentType: accent,
         priority: wordPriority.value,
       });
@@ -306,8 +306,8 @@ const saveWord = async () => {
     try {
       await createUILockAction(
         store.actions.ADD_WORD({
-          surface: surface,
-          pronunciation: yomi,
+          surface: surface.value,
+          pronunciation: yomi.value,
           accentType: accent,
           priority: wordPriority.value,
         }),
@@ -332,10 +332,10 @@ const resetWord = async (id: string) => {
     actionName: "リセット",
   });
   if (result === "OK") {
-    selectedId = id;
-    surface = userDict[id].surface;
-    void setYomi(userDict[id].yomi, true);
-    wordPriority.value = userDict[id].priority;
+    selectedId.value = id;
+    surface.value = userDict.value[id].surface;
+    void setYomi(userDict.value[id].yomi, true);
+    wordPriority.value = userDict.value[id].priority;
     toWordEditingState();
   }
 };
@@ -345,15 +345,14 @@ const accentPhraseTable = ref<HTMLElement>();
 
 const changeAccent = async (_: number, accent: number) => {
   const { engineId, styleId } = voiceComputed.value;
-
-  if (accentPhrase) {
-    accentPhrase.accent = accent;
-    accentPhrase = (
+  if (accentPhrase.value) {
+    accentPhrase.value.accent = accent;
+    accentPhrase.value = (
       await createUILockAction(
         store.actions.FETCH_MORA_DATA({
-          accentPhrases: [accentPhrase],
-          engineId,
-          styleId,
+          accentPhrases: [accentPhrase.value],
+          engineId: engineId,
+          styleId: styleId,
         }),
       )
     )[0];
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index d524241725..b83d99954b 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -135,9 +135,9 @@ export interface DictionaryManageDialogContext {
   isOnlyHiraOrKana: Ref<boolean>;
   accentPhrase: Ref<AccentPhrase | undefined>;
   voiceComputed: ComputedRef<{
-    engineId: string;
-    speakerId: string;
-    styleId: number;
+    engineId: string & EngineId;
+    speakerId: string & SpeakerId;
+    styleId: number & StyleId;
   }>;
   surface: Ref<string>;
   yomi: Ref<string>;
@@ -165,6 +165,7 @@ import {
   convertLongVowel,
   createKanaRegex,
 } from "@/domain/japanese";
+import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 
 const defaultDictPriority = 5;
 

From 5c54153fb644f45c308ed79f9380efd9d8c6e85e Mon Sep 17 00:00:00 2001
From: jdkfx <htazoe@jdkfx.com>
Date: Wed, 11 Dec 2024 18:07:29 +0900
Subject: [PATCH 08/10] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/DictionaryEditWordDialog.vue          | 16 +++++++---------
 src/components/Dialog/DictionaryManageDialog.vue |  3 ++-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index 8c1db0b74e..ad2bddbfa0 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -246,8 +246,6 @@ const stop = () => {
 
 // メニュー系
 const yomiInput = ref<QInput>();
-const surfaceRef = ref(surface);
-const yomiRef = ref(yomi);
 const wordPriorityLabels = {
   0: "最低",
   3: "低",
@@ -280,11 +278,11 @@ const setSurface = (text: string) => {
   // surfaceを全角化する
   // 入力は半角でも問題ないが、登録時に全角に変換され、isWordChangedの判断がおかしくなることがあるので、
   // 入力後に自動で変換するようにする
-  surfaceRef.value = convertHankakuToZenkaku(text);
+  surface.value = convertHankakuToZenkaku(text);
 };
 
 const saveWord = async () => {
-  if (!accentPhrase) throw new Error(`accentPhrase === undefined`);
+  if (!accentPhrase.value) throw new Error(`accentPhrase === undefined`);
   const accent = computeRegisteredAccent();
   if (selectedId.value) {
     try {
@@ -324,7 +322,6 @@ const saveWord = async () => {
   toInitialState();
 };
 
-// TODO: リセットする際にsurfaceが読み込めないため、修正する
 const resetWord = async (id: string) => {
   const result = await store.actions.SHOW_WARNING_DIALOG({
     title: "単語の変更をリセットしますか？",
@@ -345,14 +342,15 @@ const accentPhraseTable = ref<HTMLElement>();
 
 const changeAccent = async (_: number, accent: number) => {
   const { engineId, styleId } = voiceComputed.value;
+
   if (accentPhrase.value) {
     accentPhrase.value.accent = accent;
     accentPhrase.value = (
       await createUILockAction(
         store.actions.FETCH_MORA_DATA({
           accentPhrases: [accentPhrase.value],
-          engineId: engineId,
-          styleId: styleId,
+          engineId,
+          styleId,
         }),
       )
     )[0];
@@ -369,7 +367,7 @@ const {
   startContextMenuOperation: startSurfaceContextMenuOperation,
   clearInputSelection: clearSurfaceInputSelection,
   endContextMenuOperation: endSurfaceContextMenuOperation,
-} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surfaceRef);
+} = useRightClickContextMenu(surfaceContextMenu, surfaceInput, surface);
 
 const {
   contextMenuHeader: yomiContextMenuHeader,
@@ -377,7 +375,7 @@ const {
   startContextMenuOperation: startYomiContextMenuOperation,
   clearInputSelection: clearYomiInputSelection,
   endContextMenuOperation: endYomiContextMenuOperation,
-} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomiRef);
+} = useRightClickContextMenu(yomiContextMenu, yomiInput, yomi);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index b83d99954b..85a773f0cd 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -125,6 +125,8 @@
 
 <script lang="ts">
 import { Ref, ComputedRef } from "vue";
+// eslint-disable-next-line import/order
+import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 
 export interface DictionaryManageDialogContext {
   wordEditing: Ref<boolean>;
@@ -165,7 +167,6 @@ import {
   convertLongVowel,
   createKanaRegex,
 } from "@/domain/japanese";
-import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 
 const defaultDictPriority = 5;
 

From eb6ea8f8fe859db43baeff536452a31af069a0a9 Mon Sep 17 00:00:00 2001
From: jdkfx <htazoe@jdkfx.com>
Date: Wed, 11 Dec 2024 18:42:02 +0900
Subject: [PATCH 09/10] =?UTF-8?q?DictionaryManageDialogContext=E3=82=92?=
 =?UTF-8?q?=E3=82=A8=E3=82=AF=E3=82=B9=E3=83=9D=E3=83=BC=E3=83=88=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/DictionaryEditWordDialog.vue | 7 +++++--
 src/components/Dialog/DictionaryManageDialog.vue   | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index ad2bddbfa0..4e2202f42a 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -163,7 +163,10 @@
 <script setup lang="ts">
 import { inject, ref } from "vue";
 import { QInput } from "quasar";
-import { DictionaryManageDialogContext } from "./DictionaryManageDialog.vue";
+import {
+  DictionaryManageDialogContext,
+  DictionaryManageDialogContextKey,
+} from "./DictionaryManageDialog.vue";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
 import { useRightClickContextMenu } from "@/composables/useRightClickContextMenu";
@@ -173,7 +176,7 @@ import type { FetchAudioResult } from "@/store/type";
 const store = useStore();
 
 const context = inject<DictionaryManageDialogContext>(
-  "dictionaryManageDialogContext",
+  DictionaryManageDialogContextKey,
 );
 if (context == undefined)
   throw new Error(`dictionaryManageDialogContext == undefined`);
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index 85a773f0cd..eae340edf3 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -154,6 +154,8 @@ export interface DictionaryManageDialogContext {
   toWordEditingState: () => void;
   cancel: () => void;
 }
+
+export const DictionaryManageDialogContextKey = "dictionaryManageDialogContext";
 </script>
 
 <script setup lang="ts">

From 61de067a1a02db7217be0d0a46854a517234d36a Mon Sep 17 00:00:00 2001
From: Hiroshiba <hihokaruta@gmail.com>
Date: Sun, 15 Dec 2024 21:15:39 +0900
Subject: [PATCH 10/10] =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* eslintが不要なように
* 型の修正
* provideの目的コメントは自明なので省いてみる
---
 .../Dialog/DictionaryEditWordDialog.vue        |  4 ++--
 .../Dialog/DictionaryManageDialog.vue          | 18 +++++++-----------
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/components/Dialog/DictionaryEditWordDialog.vue b/src/components/Dialog/DictionaryEditWordDialog.vue
index 7c9ade2f5c..98df081902 100644
--- a/src/components/Dialog/DictionaryEditWordDialog.vue
+++ b/src/components/Dialog/DictionaryEditWordDialog.vue
@@ -165,7 +165,7 @@ import { inject, ref } from "vue";
 import { QInput } from "quasar";
 import {
   DictionaryManageDialogContext,
-  DictionaryManageDialogContextKey,
+  dictionaryManageDialogContextKey,
 } from "./DictionaryManageDialog.vue";
 import AudioAccent from "@/components/Talk/AudioAccent.vue";
 import ContextMenu from "@/components/Menu/ContextMenu/Container.vue";
@@ -176,7 +176,7 @@ import type { FetchAudioResult } from "@/store/type";
 const store = useStore();
 
 const context = inject<DictionaryManageDialogContext>(
-  DictionaryManageDialogContextKey,
+  dictionaryManageDialogContextKey,
 );
 if (context == undefined)
   throw new Error(`dictionaryManageDialogContext == undefined`);
diff --git a/src/components/Dialog/DictionaryManageDialog.vue b/src/components/Dialog/DictionaryManageDialog.vue
index f738689cfc..0bea44fccf 100644
--- a/src/components/Dialog/DictionaryManageDialog.vue
+++ b/src/components/Dialog/DictionaryManageDialog.vue
@@ -125,8 +125,8 @@
 
 <script lang="ts">
 import { Ref, ComputedRef } from "vue";
-// eslint-disable-next-line import/order
-import { EngineId, SpeakerId, StyleId } from "@/type/preload";
+
+export const dictionaryManageDialogContextKey = "dictionaryManageDialogContext";
 
 export interface DictionaryManageDialogContext {
   wordEditing: Ref<boolean>;
@@ -137,9 +137,9 @@ export interface DictionaryManageDialogContext {
   isOnlyHiraOrKana: Ref<boolean>;
   accentPhrase: Ref<AccentPhrase | undefined>;
   voiceComputed: ComputedRef<{
-    engineId: string & EngineId;
-    speakerId: string & SpeakerId;
-    styleId: number & StyleId;
+    engineId: EngineId;
+    speakerId: SpeakerId;
+    styleId: StyleId;
   }>;
   surface: Ref<string>;
   yomi: Ref<string>;
@@ -154,8 +154,6 @@ export interface DictionaryManageDialogContext {
   toWordEditingState: () => void;
   cancel: () => void;
 }
-
-export const DictionaryManageDialogContextKey = "dictionaryManageDialogContext";
 </script>
 
 <script setup lang="ts">
@@ -164,6 +162,7 @@ import { QInput } from "quasar";
 import DictionaryEditWordDialog from "./DictionaryEditWordDialog.vue";
 import { useStore } from "@/store";
 import { AccentPhrase, UserDictWord } from "@/openapi";
+import { EngineId, SpeakerId, StyleId } from "@/type/preload";
 import {
   convertHiraToKana,
   convertLongVowel,
@@ -426,10 +425,7 @@ const toDialogClosedState = () => {
   dictionaryManageDialogOpenedComputed.value = false;
 };
 
-/**
- * provideで子コンポーネント(components/Dialog/DictionaryEditWordDialog.vue)に変数と関数を共有する
- */
-provide<DictionaryManageDialogContext>("dictionaryManageDialogContext", {
+provide<DictionaryManageDialogContext>(dictionaryManageDialogContextKey, {
   wordEditing,
   surfaceInput,
   selectedId,