feat(toolbox): 更新 MomoTalk 翻译工具

apps/ba-online-toolbox/package.json

@@ -33,15 +33,15 @@
     "xxhashjs": "~0.2.2",
     "@types/xxhashjs": "~0.2.4",
     "uuid": "~11.0.5",
-    "radash": "~12.1.0",
     "mockjs": "~1.1.0",
     "diff": "~7.0.0",
     "diff2html": "~3.4.51",
     "vite-plugin-vue-devtools": "^7.7.0",
     "highlight.js": "~11.11.1",
     "@types/diff": "~7.0.0",
     "html2canvas": "~1.4.1",
-    "@vueuse/components": "~12.4.0"
+    "@vueuse/components": "~12.4.0",
+    "radashi": "~12.3.4"
   },
   "devDependencies": {
     "taze": "^18.1.0",

apps/ba-online-toolbox/src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
+import { computed, onMounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import HomepageNavigator from "./HomepageNavigator.vue";
 import FAB from "./tools/public/components/FAB.vue";
@@ -25,6 +25,17 @@ onMounted(() => {
   });
 });
 
+watch(mode, () => {
+  switch (mode.value) {
+    case "dark":
+      document.body.setAttribute("arco-theme", "dark");
+      break;
+    case "light":
+      document.body.removeAttribute("arco-theme");
+      break;
+  }
+});
+
 const route = useRoute();
 
 const isMainPage = computed(() => {

apps/ba-online-toolbox/src/routes/routes.ts

@@ -24,32 +24,19 @@ const routes: RouteRecordRaw[] = [
       navOrder: 0,
     },
     children: [
-      // {
-      //   path: 'aronaTalk',
-      //   name: 'AronaTalk',
-      //   meta: {
-      //     shouldShowInHomepageNav: false,
-      //     shouldShowInNavbar: false,
-      //     icon: '/image/arona_icon.webp',
-      //     title: 'AronaTalk',
-      //     description: 'BA 前端标准靶场',
-      //     navOrder: 1,
-      //   },
-      //   component: () => import('../tools/AronaTalk/AronaTalkHome.vue'),
-      // },
       {
-        path: "/momotalk",
-        name: "TranslateMomotalk",
+        path: "/editor-momotalk",
+        name: "MomotalkEditor",
         meta: {
           shouldShowInHomepageNav: true,
           shouldShowInNavbar: false,
-          icon: "/image/translation.svg",
-          title: "Momotalk 翻译",
-          description: "开发人员用的 Momotalk 翻译工具",
-          navOrder: 2,
+          icon: "/image/momotalk.svg",
+          title: "Momotalk V2",
+          description: "Momotalk V2",
+          navOrder: 3,
         },
         component: () =>
-          import("../tools/MomotalkTranslator/MomotalkTranslatorHome.vue"),
+          import("../tools/v2-MomotalkEditor/MomotalkEditorHome.vue"),
       },
       {
         path: "/editor",
@@ -78,6 +65,21 @@ const routes: RouteRecordRaw[] = [
         },
         component: () => import("../tools/DiffComparator/DiffCompareHome.vue"),
       },
+
+      {
+        path: "/momotalk",
+        name: "TranslateMomotalk",
+        meta: {
+          shouldShowInHomepageNav: true,
+          shouldShowInNavbar: false,
+          icon: "/image/translation.svg",
+          title: "Momotalk 翻译",
+          description: "开发人员用的 Momotalk 翻译工具",
+          navOrder: 999,
+        },
+        component: () =>
+          import("../tools/MomotalkTranslator/MomotalkTranslatorHome.vue"),
+      },
       {
         path: "/diff-comparator",
         redirect: "/diff",

apps/ba-online-toolbox/src/tools/DiffComparator/store/DiffComparatorStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { Scenario } from "../../ScenarioEditor/types/content";
-import { isEmpty } from "radash";
+import { isEmpty } from "radashi";
 
 export const useDiffComparatorStore = defineStore({
   id: "diffComparatorStore",

apps/ba-online-toolbox/src/tools/v2-MomotalkEditor/MomotalkEditorHome.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import MomotalkFileLoader from "./components/MomotalkFileLoader.vue";
+import { isEmpty } from "radashi";
+import { ref, computed } from "vue";
+import { momotalkEditorStore } from "./store/momotalkEditorStore";
+import MomotalkEditorWrapper from "./components/MomotalkEditorWrapper.vue";
+const useMomotalkEditorStore = momotalkEditorStore();
+
+const isMomotalkDataEmpty = computed(() =>
+  isEmpty(useMomotalkEditorStore.getMomotalkFileData)
+);
+</script>
+
+<template>
+  <momotalk-file-loader v-if="isMomotalkDataEmpty" />
+  <momotalk-editor-wrapper v-else />
+</template>
+
+<style lang="scss" scoped></style>

apps/ba-online-toolbox/src/tools/v2-MomotalkEditor/components/MmtkComponents/MmtkTitle.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import EInput from "../widgets/EInput.vue";
+import type { Title, Language } from "../../types/Momotalks";
+import { IconTranslate } from "@arco-design/web-vue/es/icon";
+const props = defineProps<{
+  title: Title;
+  from: Language;
+  to: Language;
+  idx: number;
+  total: number;
+}>();
+</script>
+
+<template>
+  <div
+    flex
+    flex-col
+    gap-2
+    flex-1
+    items-center
+    p-5
+    shadow-sm
+    sticky
+    top-0
+    bg-white
+    class="@dark:bg-slate-700"
+    z-999
+  >
+    <h3 flex items-center content-between gap-2 class="@dark:text-gray-100">
+      {{ props.title[`Text${props.from}`] }}
+      <a-tag size="mini">{{ props.idx + 1 }}/{{ props.total }}</a-tag>
+    </h3>
+    <div w-full gap-1 flex flex-1 justify-between items-end>
+      <EInput
+        v-model="props.title[`Text${props.to}`]"
+        width="100%"
+        align="center"
+        placeholder="输入标题翻译"
+      >
+        <!-- <template #suffix>
+          <a-button type="text" size="small"><icon-translate /></a-button>
+        </template> -->
+      </EInput>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

apps/ba-online-toolbox/src/tools/v2-MomotalkEditor/components/MmtkComponents/MmtkUnit.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import type { Content } from "../../types/Momotalks";
+import { momotalkEditorStore } from "../../store/momotalkEditorStore";
+import { computed } from "vue";
+import EInput from "../widgets/EInput.vue";
+const props = defineProps<{ msg: Content }>();
+
+const useMomotalkEditorStore = momotalkEditorStore();
+const from = computed(
+  () =>
+    ("Message" +
+      useMomotalkEditorStore.getSelectedTranslation.toUpperCase()) as keyof Content
+);
+const to = computed(
+  () =>
+    ("Message" +
+      useMomotalkEditorStore.getTargetTranslation.toUpperCase()) as keyof Content
+);
+
+const isImage = computed(() => props.msg.ImagePath)
+</script>
+
+<template>
+  <div
+    flex
+    :class="{
+      'justify-end': 'Answer' === msg.MessageCondition,
+    }"
+  >
+    <div
+      px-4
+      py-2
+      z-0
+      class="talk-bubble max-w-80 relative"
+      :class="{
+        'talk-bubble--answer': 'Answer' === msg.MessageCondition,
+        'talk-bubble--favor': msg.FavorScheduleId != 0,
+      }"
+    >
+      <div class="orininal-msg pl-[2px]">
+        <span v-if="!isImage">{{ props.msg[from] }}</span>
+        <img
+          w-40
+          v-else
+          :src="
+            'https://yuuka.cdn.diyigemt.com/image/ba-all-data/' +
+            props.msg.ImagePath + '.png'
+          "
+        />
+      </div>
+      <div class="msg-translation" v-if="!isImage">
+        <EInput
+          v-model="msg[to] as string"
+          :text-white="
+            'Answer' === msg.MessageCondition || msg.FavorScheduleId != 0
+          "
+          placeholder="输入内容翻译"
+          width="auto"
+        />
+        <!-- <a-input v-model="msg[to] as string" ></a-input> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.talk-bubble {
+  @apply rounded-md bg-white @dark:bg-slate-700 @dark:text-gray-2;
+
+  &--answer {
+    @apply bg-[#4a91e7] text-white @dark:bg-[#397ee1];
+  }
+
+  &--favor {
+    @apply bg-[#E62C8C]! text-white @dark:bg-[#eb509b]!;
+  }
+}
+</style>

apps/ba-online-toolbox/src/tools/v2-MomotalkEditor/components/MomotalkContainer.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import type { Title } from "../types/Momotalks";
+import MmtkTitle from "./MmtkComponents/MmtkTitle.vue";
+import MmtkUnit from "./MmtkComponents/MmtkUnit.vue";
+import { momotalkEditorStore } from "../store/momotalkEditorStore";
+
+const useMomotalkEditorStore = momotalkEditorStore();
+const props = defineProps<{ title: Title; idx: number; total: number }>();
+
+const selectedTranslation = computed({
+  get: () => useMomotalkEditorStore.getSelectedTranslation,
+  set: translation =>
+    useMomotalkEditorStore.setSelectedTranslation(translation),
+});
+
+const targetTranslation = computed({
+  get: () => useMomotalkEditorStore.getTargetTranslation,
+  set: translation => useMomotalkEditorStore.setTargetTranslation(translation),
+});
+
+const mmtkGroup = computed(() =>
+  useMomotalkEditorStore.getMomotalkFromScheduleId(props.title.FavorScheduleId)
+);
+</script>
+
+<template>
+  <div w-92 flex flex-col items-stretch rounded-sm>
+    <MmtkTitle
+      :title="title"
+      :from="selectedTranslation"
+      :to="targetTranslation"
+      :idx="idx"
+      :total="total"
+    />
+    <div flex flex-col gap-4 mb-5 pt-4 class="bg-[#f2f2f2] @dark:bg-slate-900">
+      <MmtkUnit v-for="msg in mmtkGroup" :key="msg.Id" :msg="msg" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>