feat: add note about operators and groups in operation viewer

Author: guansss

src/components/viewer/OperationViewer.tsx

@@ -1,6 +1,7 @@
 import {
   Button,
   ButtonGroup,
+  Callout,
   Card,
   Collapse,
   Elevation,
@@ -577,7 +578,9 @@ function OperationViewerInner({
           <NonIdealState
             icon="tree"
             title={t.components.viewer.OperationViewer.comments_closed}
-            description={t.components.viewer.OperationViewer.feel_the_silence}
+            description={
+              t.components.viewer.OperationViewer.comments_closed_note
+            }
           />
         ) : (
           <CommentArea operationId={operation.id} />
@@ -594,17 +597,10 @@ function OperationViewerInnerDetails({ operation }: { operation: Operation }) {
   return (
     <div>
       <H4
-        className="inline-flex items-center cursor-pointer hover:text-violet-500"
+        className="inline-flex items-center cursor-pointer hover:opacity-80"
         onClick={() => setShowOperators((v) => !v)}
       >
         {t.components.viewer.OperationViewer.operators_and_groups}
-        <Tooltip2
-          className="!flex items-center"
-          placement="top"
-          content={t.components.viewer.OperationViewer.operator_group_tooltip}
-        >
-          <Icon icon="info-sign" size={12} className="text-zinc-500 ml-1" />
-        </Tooltip2>
         <Icon
           icon="chevron-down"
           className={clsx(
@@ -613,6 +609,19 @@ function OperationViewerInnerDetails({ operation }: { operation: Operation }) {
           )}
         />
       </H4>
+      <details className="inline">
+        <summary className="inline cursor-pointer">
+          <Icon icon="help" size={14} className="ml-2 mb-1 opacity-50" />
+        </summary>
+        <Callout intent="primary" icon={null} className="mb-4">
+          <p>
+            {t.components.viewer.OperationViewer.operators_and_groups_note.jsx({
+              operators: (s) => <b>{s}</b>,
+              groups: (s) => <b>{s}</b>,
+            })}
+          </p>
+        </Callout>
+      </details>
       <Collapse isOpen={showOperators}>
         <div className="mt-2 flex flex-wrap gap-6">
           {!operation.parsedContent.opers?.length &&
@@ -666,7 +675,7 @@ function OperationViewerInnerDetails({ operation }: { operation: Operation }) {
       </Collapse>
 
       <H4
-        className="mt-6 inline-flex items-center cursor-pointer hover:text-violet-500"
+        className="mt-6 inline-flex items-center cursor-pointer hover:opacity-80"
         onClick={() => setShowActions((v) => !v)}
       >
         {t.components.viewer.OperationViewer.action_sequence}

src/i18n/translations.json

@@ -2988,17 +2988,17 @@
           "cn": "评论区已关闭",
           "en": "Comment section is closed"
         },
-        "feel_the_silence": {
+        "comments_closed_note": {
           "cn": "感受…宁静……",
-          "en": "Feel... the silence..."
+          "en": "Experience tranquility..."
         },
         "operators_and_groups": {
           "cn": "干员与干员组",
           "en": "Operators and Operator Groups"
         },
-        "operator_group_tooltip": {
-          "cn": "干员组：组内干员可以任选其一，自动编队时按最高练度来选择",
-          "en": "Operator Group: Choose any operator in the group; auto-formation selects the highest level"
+        "operators_and_groups_note": {
+          "cn": "{{operators(干员)}}\n作业必需的干员。\n干员练度（等级、模组）仅供参考，MAA 的自动编队仅支持技能选择，其余信息暂未支持。\n\n{{groups(干员组)}}\n一系列可替换干员的编组。\n组内干员可以任选其一，MAA 自动编队时按最高练度来选择。",
+          "en": "{{operators(Operators)}}\nOperators required for this Job. \nThe requirements (level and module) are for reference only. MAA's auto-formation only supports skill selection, and other information is not yet supported.\n\n{{groups(Operator Groups)}}\nGroups of interchangeable operators. \nYou can choose any operator in a group. MAA's auto-formation selects the one with the highest level."
         },
         "no_operators": {
           "cn": "暂无干员",
@@ -3403,6 +3403,14 @@
       }
     },
     "operator": {
+      "operator": {
+        "cn": "干员",
+        "en": "Operator"
+      },
+      "operator_group":{
+        "cn": "干员组",
+        "en": "Operator Group"
+      },
       "skill_number": {
         "cn": {
           "1": "一技能",