feat(editor2): i18n operator names

Author: guansss

src/components/editor2/action/ActionItem.tsx

@@ -12,25 +12,18 @@ import { Tooltip2 } from '@blueprintjs/popover2'
 
 import clsx from 'clsx'
 import { Draft } from 'immer'
-import { PrimitiveAtom, atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { useImmerAtom } from 'jotai-immer'
 import { selectAtom } from 'jotai/utils'
-import {
-  FC,
-  ReactNode,
-  memo,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { FC, ReactNode, memo, useEffect, useRef, useState } from 'react'
 
 import { i18n, languageAtom, useTranslation } from '../../../i18n/i18n'
 import { CopilotDocV1 } from '../../../models/copilot.schema'
 import {
   actionDocColors,
   alternativeOperatorSkillUsages,
   findOperatorByName,
+  getLocalizedOperatorName,
   getSkillUsageAltTitle,
 } from '../../../models/operator'
 import { findActionType } from '../../../models/types'
@@ -664,45 +657,43 @@ const ActionTarget: FC<{
     >
   >
 }> = ({ actionAtom }) => {
+  const language = useAtomValue(languageAtom)
   const t = useTranslation()
   const edit = useEdit()
-  const [action, setAction] = useAtom(actionAtom)
+  const [{ name }, setAction] = useAtom(actionAtom)
   const groupNames = useAtomValue(groupNamesAtom)
-  const operator = useAtomValue(
-    useMemo(
-      () =>
-        atom((get) =>
-          get(editorAtoms.operators).find((op) => op.name === action.name),
-        ),
-      [action.name],
-    ),
-  )
+
   const isGroup = (name?: string) =>
     name !== undefined && groupNames.includes(name)
 
-  const operatorInfo = operator && findOperatorByName(operator.name)
-  const displayName =
-    operatorInfo?.name ||
-    action.name ||
-    (isGroup(action.name)
-      ? t.components.editor2.ActionItem.unnamed_group
-      : t.components.editor2.ActionItem.select_target)
-  const subtitle = isGroup(action.name)
-    ? t.components.editor2.ActionItem.group
-    : operatorInfo
-      ? operatorInfo?.prof === 'TOKEN'
-        ? t.components.editor2.ActionItem.token
-        : t.components.editor2.ActionItem.operator
-      : // 自定义干员、关卡里的道具之类
-        t.components.editor2.ActionItem.unknown_target
+  let displayName: string | undefined
+  let subtitle = '<<<'
+
+  if (name !== undefined) {
+    if (isGroup(name)) {
+      displayName = name || t.components.editor2.ActionItem.unnamed_group
+      subtitle = t.components.editor2.label.operation.groups._item
+    } else {
+      displayName = getLocalizedOperatorName(name, language)
+
+      const operatorInfo = findOperatorByName(name)
+      subtitle = operatorInfo
+        ? operatorInfo.prof === 'TOKEN'
+          ? t.components.editor2.ActionItem.token
+          : t.components.editor2.label.opers._item
+        : // 自定义干员、关卡里的道具之类
+          t.components.editor2.ActionItem.unknown_target
+    }
+  }
+
   return (
     <OperatorSelect
       liftPicked
       className="shrink-0"
-      value={action.name}
+      value={name}
       onSelect={(name) => {
         edit(() => {
-          setAction({ ...action, name })
+          setAction((prev) => ({ ...prev, name }))
           return {
             action: 'set-action-name',
             desc: i18n.actions.editor2.set_action_target,
@@ -714,21 +705,24 @@ const ActionTarget: FC<{
         <div className="flex items-center">
           <OperatorAvatar
             className="w-16 h-16"
-            name={isGroup(action.name) ? undefined : action.name}
-            fallback={
-              isGroup(action.name) ? (
-                <Icon icon="people" size={32} />
-              ) : (
-                action.name
-              )
-            }
+            name={isGroup(name) ? undefined : name}
+            fallback={isGroup(name) ? <Icon icon="people" size={32} /> : name}
           />
           <div className="ml-1 w-[6.5em]">
             <div
-              className={clsx('truncate', displayName.length > 6 && 'text-xs')}
-              title={displayName.length > 6 ? displayName : undefined}
+              className={clsx(
+                'leading-4 tracking-tighter',
+                displayName && displayName?.length > 6 && 'text-xs',
+              )}
+              title={displayName}
             >
-              {displayName}
+              {displayName === undefined ? (
+                <span className="text-gray-500">
+                  {t.components.editor2.ActionItem.select_target}
+                </span>
+              ) : (
+                displayName
+              )}
             </div>
             <Divider className="m-0 mr-1" />
             <div className="text-gray-500 text-xs font-normal truncate">

src/components/editor2/operator/OperatorEditor.tsx

@@ -18,7 +18,8 @@ import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { selectAtom, useAtomCallback } from 'jotai/utils'
 import { FC, memo, useCallback, useMemo } from 'react'
 
-import { i18n, useTranslation } from '../../../i18n/i18n'
+import { i18n, languageAtom, useTranslation } from '../../../i18n/i18n'
+import { getLocalizedOperatorName } from '../../../models/operator'
 import { Droppable, Sortable } from '../../dnd'
 import { AtomRenderer } from '../AtomRenderer'
 import {
@@ -322,6 +323,7 @@ const operatorErrorsAtom = atom((get) => {
 
 const OperatorError = () => {
   const errors = useAtomValue(operatorErrorsAtom)
+  const language = useAtomValue(languageAtom)
   const t = useTranslation()
   if (!errors) return null
 
@@ -332,12 +334,12 @@ const OperatorError = () => {
           <p key={operator.id + path.join()} className="error-message">
             {fieldLabel
               ? t.components.editor2.OperatorEditor.operator_field_error({
-                  name: operator.name,
+                  name: getLocalizedOperatorName(operator.name, language),
                   field: fieldLabel,
                   error: message,
                 })
               : t.components.editor2.OperatorEditor.operator_error({
-                  name: operator.name,
+                  name: getLocalizedOperatorName(operator.name, language),
                   error: message,
                 })}
           </p>

src/components/editor2/operator/OperatorItem.tsx

@@ -25,6 +25,7 @@ import {
   getEliteIconUrl,
   getSkillCount,
   getSkillUsageAltTitle,
+  useLocalizedOperatorName,
   withDefaultRequirements,
 } from '../../../models/operator'
 import { MasteryIcon } from '../../MasteryIcon'
@@ -64,6 +65,7 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
   }) => {
     const t = useTranslation()
     const edit = useEdit()
+    const displayName = useLocalizedOperatorName(operator.name)
     const [skillLevels, setSkillLevels] = useAtom(
       editorAtoms.skillLevelOverrides(operator.id),
     )
@@ -117,15 +119,15 @@ export const OperatorItem: FC<OperatorItemProps> = memo(
                 id={info?.id}
                 rarity={info?.rarity}
                 className="w-24 h-24 rounded-b-none"
-                fallback={operator.name}
+                fallback={displayName}
               />
               <h4
                 className={clsx(
-                  'm-1 leading-5 font-bold pointer-events-none',
-                  operator.name && operator.name.length >= 7 && 'text-xs',
+                  'm-1 leading-4 font-semibold tracking-tighter pointer-events-none',
+                  displayName.length >= 12 && 'text-xs',
                 )}
               >
-                {operator.name}
+                {displayName}
               </h4>
               {info && info.prof !== 'TOKEN' && (
                 <img