feat(toolbox): 添加 mmt 标记功能

apps/ba-online-toolbox/package.json

@@ -41,7 +41,10 @@
     "@types/diff": "~7.0.0",
     "html2canvas": "~1.4.1",
     "@vueuse/components": "~12.4.0",
-    "radashi": "~12.3.4"
+    "radashi": "~12.3.4",
+    "unplugin-icons": "~22.0.0",
+    "@iconify/json": "~2.2.196",
+    "@iconify-json/icon-park": "~1.2.2"
   },
   "devDependencies": {
     "taze": "^18.1.0",

apps/ba-online-toolbox/src/tools/public/secrets.json

@@ -1,5 +1,6 @@
 {
   "YOUDAO_APP_ID": "***",
   "YOUDAO_APP_SECRET": "***",
-  "ANTHROPIC_TIER1_SECRET": "***"
+  "ANTHROPIC_TIER1_SECRET": "***",
+  "DEEPSEEK_SECRET": "***"
 }

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

@@ -3,6 +3,8 @@ import type { Content } from "../../types/Momotalks";
 import { momotalkEditorStore } from "../../store/momotalkEditorStore";
 import { computed } from "vue";
 import EInput from "../widgets/EInput.vue";
+import EActionButton from "../widgets/EActionButton.vue";
+import { Message } from "@arco-design/web-vue";
 const props = defineProps<{ msg: Content }>();
 
 const useMomotalkEditorStore = momotalkEditorStore();
@@ -18,13 +20,28 @@ const to = computed(
 );
 
 const isImage = computed(() => props.msg.ImagePath);
+
+function handleFlagUnsure() {
+  props.msg.unsure = !props.msg.unsure;
+}
+
+function handleTranslate() {
+  Message.info("deepseek 还没法用，你先别急");
+}
 </script>
 
 <template>
   <div
     flex
+    items-end
+    gap-1
+    px-4
+    py-2
+    transition-colors
+    duration-300
     :class="{
-      'justify-end': 'Answer' === msg.MessageCondition,
+      'justify-start flex-row-reverse': 'Answer' === msg.MessageCondition,
+      'bg-yellow-100': msg.unsure,
     }"
   >
     <div
@@ -40,7 +57,7 @@ const isImage = computed(() => props.msg.ImagePath);
         class="orininal-msg"
         :class="{
           'pl-[2px]': !isImage,
-          'lh-0': isImage
+          'lh-0': isImage,
         }"
       >
         <span v-if="!isImage">{{ props.msg[from] }}</span>
@@ -66,6 +83,11 @@ const isImage = computed(() => props.msg.ImagePath);
         />
       </div>
     </div>
+    <EActionButton icon="translate" @click="handleTranslate" />
+    <EActionButton
+      :icon="msg.unsure ? 'flag-filled' : 'flag'"
+      @click="handleFlagUnsure"
+    />
   </div>
 </template>
 

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

@@ -36,10 +36,8 @@ const mmtkGroup = computed(() =>
     <div
       flex
       flex-col
-      gap-4
       mb-5
       pt-4
-      px-4
       class="bg-[#f2f2f2] @dark:bg-slate-900"
     >
       <MmtkUnit v-for="msg in mmtkGroup" :key="msg.Id" :msg="msg" />

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

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const props = withDefaults(
+  defineProps<{
+    icon: "flag" | "flag-filled" | "translate";
+    size?: "mini" | "default";
+    disabled?: boolean;
+  }>(),
+  {
+    size: "default",
+    disabled: false,
+  }
+);
+
+const isPressed = ref(false);
+
+const emit = defineEmits<{
+  (e: "click"): void;
+}>();
+
+function handleClick() {
+  if (props.disabled) return;
+  emit("click");
+}
+
+function handleMouseDown() {
+  if (props.disabled) return;
+  isPressed.value = true;
+}
+
+function handleMouseUp() {
+  if (props.disabled) return;
+  isPressed.value = false;
+}
+
+function handleMouseLeave() {
+  if (props.disabled) return;
+  isPressed.value = false;
+}
+</script>
+
+<template>
+  <button
+    p-1
+    pb-0.5
+    border-none
+    bg-transparent
+    rounded-sm
+    transition-colors
+    duration-300
+    cursor-pointer
+    class="@hover:bg-gray-200 @dark:@hover:bg-gray-800"
+    :class="{
+      'opacity-50 cursor-not-allowed': disabled,
+      '!bg-gray-300 @dark:!bg-gray-700': isPressed,
+    }"
+    @click="handleClick"
+    @mousedown="handleMouseDown"
+    @mouseup="handleMouseUp"
+    @mouseleave="handleMouseLeave"
+  >
+    <transition name="flip">
+      <i-icon-park-outline-flag
+        v-if="icon === 'flag'"
+        h-4
+        w-4
+        color-gray-400
+        class="@dark:color-gray-600"
+      />
+    </transition>
+    <transition name="flip">
+      <svg
+        v-if="icon === 'flag-filled'"
+        w-4
+        h-4
+        color-gray-400
+        class="@dark:color-gray-600"
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="4"
+        >
+          <path d="M8 44H12H16" />
+          <path d="M12 44V4" />
+          <path fill="currentColor" d="M40 6H12V22H40L36 14L40 6Z" />
+        </g>
+      </svg>
+    </transition>
+    <svg
+      w-4
+      h-4
+      color-gray-400
+      class="@dark:color-gray-600"
+      v-if="icon === 'translate'"
+      viewBox="0 0 48 48"
+      fill="none"
+      stroke-width="4"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+    >
+      <path
+        d="M42 25c0 9.941-8.059 18-18 18-6.867 0-12.836-3.845-15.87-9.5M28.374 27 25 18h-2l-3.375 9m8.75 0L31 34m-2.625-7h-8.75m0 0L17 34M6 25c0-9.941 8.059-18 18-18 6.867 0 12.836 3.845 15.87 9.5M43 25h-2l1-1 1 1ZM5 25h2l-1 1-1-1Z"
+      ></path>
+    </svg>
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.flip-enter-active {
+  transition: transform 0.125s ease-in-out;
+}
+.flip-leave-active {
+  transition: transform 0.125s ease-in-out;
+}
+
+.flip-enter-from,
+.flip-leave-to {
+  position: absolute;
+  transform: scaleX(0);
+  transform-origin: bottom;
+}
+</style>

apps/ba-online-toolbox/vite.config.ts

@@ -18,6 +18,8 @@ import {
   transformerDirectives,
 } from "unocss";
 import vueDevTools from "vite-plugin-vue-devtools";
+import Icons from "unplugin-icons/vite";
+import IconsResolver from "unplugin-icons/resolver";
 
 const isDevelopment = process.env.NODE_ENV === "development";
 
@@ -63,9 +65,16 @@ export default defineConfig({
         ArcoResolver({
           sideEffect: true,
         }),
+        IconsResolver({
+          enabledCollections: ["icon-park", "icon-park-outline"],
+        }),
       ],
     }),
     vue(),
+    Icons({
+      compiler: "vue3",
+      autoInstall: true,
+    }),
     UnoCSS({
       presets: [
         presetUno(),