Merge pull request #237 from hmydgz/dev

✨ feat(作业编辑器): 新增 skillTimes 字段 #196

Author: guansss

src/components/ActionCard.tsx

@@ -6,13 +6,10 @@ import { FCC } from 'types'
 
 import { CardTitle } from 'components/CardTitle'
 import { FactItem } from 'components/FactItem'
-import type { CopilotDocV1 } from 'models/copilot.schema'
+import { CopilotDocV1 } from 'models/copilot.schema'
 import { findActionType } from 'models/types'
 
-import {
-  findOperatorDirection,
-  findOperatorSkillUsage,
-} from '../models/operator'
+import { findOperatorDirection, getSkillUsageTitle } from '../models/operator'
 import { formatDuration } from '../utils/times'
 
 interface ActionCardProps {
@@ -57,7 +54,7 @@ export const ActionCard: FC<ActionCardProps> = ({
           {'skillUsage' in action && (
             <FactItem
               dense
-              title={findOperatorSkillUsage(action.skillUsage).title}
+              title={getSkillUsageTitle(action.skillUsage, action.skillTimes)}
               icon="swap-horizontal"
             />
           )}

src/components/editor/action/EditorActionAdd.tsx

@@ -29,6 +29,7 @@ import { CopilotDocV1 } from 'models/copilot.schema'
 import { useLevels } from '../../../apis/arknights'
 import { findLevelByStageName } from '../../../models/level'
 import { EditorOperatorName } from '../operator/EditorOperator'
+import { EditorOperatorSkillTimes } from '../operator/EditorOperatorSkillTimes'
 import { EditorOperatorSkillUsage } from '../operator/EditorOperatorSkillUsage'
 import {
   EditorActionPreDelay,
@@ -70,13 +71,15 @@ export const EditorActionAdd = ({
     reset,
     setError,
     handleSubmit,
+    setValue,
     formState: { errors },
   } = useForm<CopilotDocV1.Action>({
     defaultValues: defaultAction,
   })
 
   const type = useWatch({ control, name: 'type' })
   const stageName = useWatch({ control: operationControl, name: 'stageName' })
+  const skillUsage = useWatch({ control, name: 'skillUsage' })
 
   const levels = useLevels().data?.data || []
   const level = useMemo(
@@ -104,6 +107,15 @@ export const EditorActionAdd = ({
     }
   }, [reset, action, type])
 
+  useEffect(() => {
+    setValue(
+      'skillTimes',
+      skillUsage === CopilotDocV1.SkillUsageType.ReadyToUseTimes
+        ? (action as CopilotDocV1.ActionSkillUsage)?.skillTimes ?? 1
+        : undefined,
+    )
+  }, [skillUsage])
+
   const onSubmit = handleSubmit((values) => {
     if ('name' in values) {
       values.name = values.name?.trim()
@@ -222,7 +234,7 @@ export const EditorActionAdd = ({
         )}
 
         {type === 'SkillUsage' && (
-          <div className="flex">
+          <div className="flex gap-2">
             <FormField2
               label="技能用法"
               field="skillUsage"
@@ -238,6 +250,22 @@ export const EditorActionAdd = ({
                 defaultValue={0}
               />
             </FormField2>
+
+            {skillUsage === CopilotDocV1.SkillUsageType.ReadyToUseTimes && (
+              <FormField2
+                label="技能使用次数"
+                field="skillTimes"
+                error={
+                  (errors as FieldErrors<CopilotDocV1.ActionSkillUsage>)
+                    .skillTimes
+                }
+              >
+                <EditorOperatorSkillTimes
+                  control={control as Control<CopilotDocV1.ActionSkillUsage>}
+                  name="skillTimes"
+                />
+              </FormField2>
+            )}
           </div>
         )}
 

src/components/editor/operator/EditorOperatorItem.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 
 import type { CopilotDocV1 } from 'models/copilot.schema'
 
-import { OPERATORS, findOperatorSkillUsage } from '../../../models/operator'
+import { OPERATORS, getSkillUsageTitle } from '../../../models/operator'
 import { SortableItemProps } from '../../dnd'
 import { CardDeleteOption, CardEditOption } from '../CardOptions'
 import { OperatorAvatar } from './EditorOperator'
@@ -26,7 +26,10 @@ export const EditorOperatorItem = ({
   listeners,
 }: EditorOperatorItemProps) => {
   const id = OPERATORS.find(({ name }) => name === operator.name)?.id
-  const skillUsage = findOperatorSkillUsage(operator.skillUsage).title
+  const skillUsage = getSkillUsageTitle(
+    operator.skillUsage as CopilotDocV1.SkillUsageType,
+    operator.skillTimes,
+  )
 
   const skill = `${
     [null, '一', '二', '三'][operator.skill ?? 1] ?? '未知'

src/components/editor/operator/EditorOperatorSkillTimes.tsx

@@ -0,0 +1,35 @@
+import { useController } from 'react-hook-form'
+
+import { EditorFieldProps } from 'components/editor/EditorFieldProps'
+import type { CopilotDocV1 } from 'models/copilot.schema'
+
+import { NumericInput2 } from '../NumericInput2'
+
+export const EditorOperatorSkillTimes = <
+  T extends CopilotDocV1.Operator | CopilotDocV1.ActionSkillUsage,
+>({
+  name,
+  control,
+  ...controllerProps
+}: EditorFieldProps<T, CopilotDocV1.SkillTimes>) => {
+  const {
+    field: { onChange, onBlur, value },
+  } = useController({
+    name,
+    control,
+    ...controllerProps,
+  })
+
+  return (
+    <NumericInput2
+      defaultValue={0}
+      onValueChange={(val) => onChange(Math.min(val, 100))}
+      onBlur={onBlur}
+      placeholder="技能使用次数"
+      value={value ?? ''}
+      large
+      min={1}
+      max={100}
+    />
+  )
+}

src/components/editor/operator/EditorPerformerOperator.tsx

@@ -10,12 +10,13 @@ import {
 
 import { CardTitle } from 'components/CardTitle'
 import { EditorResetButton } from 'components/editor/EditorResetButton'
-import type { CopilotDocV1 } from 'models/copilot.schema'
+import { CopilotDocV1 } from 'models/copilot.schema'
 
 import { FormField2 } from '../../FormField'
 import { EditorOperatorName } from './EditorOperator'
 import { EditorOperatorGroupSelect } from './EditorOperatorGroupSelect'
 import { EditorOperatorSkill } from './EditorOperatorSkill'
+import { EditorOperatorSkillTimes } from './EditorOperatorSkillTimes'
 import { EditorOperatorSkillUsage } from './EditorOperatorSkillUsage'
 
 export interface EditorOperatorFormValues extends CopilotDocV1.Operator {
@@ -50,6 +51,7 @@ export const EditorPerformerOperator = ({
     handleSubmit,
     setError,
     formState: { errors },
+    watch,
   } = useForm<EditorOperatorFormValues>()
 
   const findGroupByOperator = (operator?: CopilotDocV1.Operator) =>
@@ -72,6 +74,16 @@ export const EditorPerformerOperator = ({
     setValue('groupName', findGroupByOperator(getValues())?.name)
   }, [reset, getValues, groups])
 
+  const skillUsage = watch('skillUsage')
+  useEffect(() => {
+    setValue(
+      'skillTimes',
+      skillUsage === CopilotDocV1.SkillUsageType.ReadyToUseTimes
+        ? operator?.skillTimes ?? 1
+        : undefined,
+    )
+  }, [skillUsage, setValue])
+
   const onSubmit: SubmitHandler<EditorOperatorFormValues> = (values) => {
     values.name = values.name.trim()
     values.groupName = values.groupName?.trim()
@@ -125,13 +137,8 @@ export const EditorPerformerOperator = ({
         />
       </FormField2>
 
-      <div className="flex flex-col lg:flex-row">
-        <FormField2
-          label="技能"
-          field="skill"
-          error={errors.skill}
-          className="mr-2"
-        >
+      <div className="flex flex-col lg:flex-row gap-2 flex-wrap">
+        <FormField2 label="技能" field="skill" error={errors.skill}>
           <EditorOperatorSkill control={control} name="skill" />
         </FormField2>
 
@@ -142,6 +149,16 @@ export const EditorPerformerOperator = ({
         >
           <EditorOperatorSkillUsage control={control} name="skillUsage" />
         </FormField2>
+
+        {skillUsage === CopilotDocV1.SkillUsageType.ReadyToUseTimes && (
+          <FormField2
+            label="技能使用次数"
+            field="skillTimes"
+            error={errors.skillTimes}
+          >
+            <EditorOperatorSkillTimes control={control} name="skillTimes" />
+          </FormField2>
+        )}
       </div>
 
       <div className="flex">

src/models/copilot.schema.ts

@@ -64,6 +64,7 @@ export namespace CopilotDocV1 {
   export interface ActionSkillUsage extends ActionBase {
     skillUsage: SkillUsageType
     type: Type.SkillUsage
+    skillTimes?: number
   }
 
   export interface ActionUtil extends ActionBase {
@@ -129,9 +130,32 @@ export namespace CopilotDocV1 {
      */
     skill?: number
     skillUsage?: SkillUsageType
+    /**
+     * 技能使用次数，可选，默认为 1
+     */
+    skillTimes?: number
+  }
+
+  export enum SkillUsageType {
+    /**
+     * 不自动使用
+     */
+    None = 0,
+    /**
+     * 好了就用
+     */
+    ReadyToUse = 1,
+    /**
+     * 好了就用-指定次数
+     */
+    ReadyToUseTimes = 2,
+    /**
+     * 自动使用
+     */
+    Automatically = 3,
   }
 
-  export type SkillUsageType = 0 | 1 | 2 | 3
+  export type SkillTimes = number
 
   export interface Requirements {
     elite?: number

src/models/operator.ts

@@ -1,6 +1,6 @@
 import { IconName } from '@blueprintjs/core'
 
-import type { CopilotDocV1 } from 'models/copilot.schema'
+import { CopilotDocV1 } from 'models/copilot.schema'
 
 import {
   DetailedSelectChoice,
@@ -11,7 +11,7 @@ import OPERATORS from '../models/generated/operators.json'
 
 export { OPERATORS }
 
-const defaultSkillUsage: CopilotDocV1.SkillUsageType = 0
+const defaultSkillUsage = CopilotDocV1.SkillUsageType.None
 
 export type DetailedOperatorSkillUsage = DetailedSelectChoice
 
@@ -20,29 +20,29 @@ export const operatorSkillUsages: readonly DetailedSelectItem[] = [
     type: 'choice',
     icon: 'disable',
     title: '不自动使用',
-    value: 0,
+    value: CopilotDocV1.SkillUsageType.None,
     description:
       '不由 MAA Copilot 自动开启技能、或干员技能并不需要操作开启（自动触发）。若需要手动开启技能，请添加「使用技能」动作',
   },
   {
     type: 'choice',
     icon: 'automatic-updates',
     title: '好了就用',
-    value: 1,
+    value: CopilotDocV1.SkillUsageType.ReadyToUse,
     description: '有多少次用多少次，例如：棘刺 3 技能、桃金娘 1 技能等',
   },
   {
     type: 'choice',
     icon: 'circle',
-    title: '好了就用（一次）',
-    value: 2,
-    description: '仅使用一次，例如：山 2 技能',
+    title: '好了就用（指定次数）',
+    value: CopilotDocV1.SkillUsageType.ReadyToUseTimes,
+    description: '默认仅使用一次，例如：山 2 技能',
   },
   {
     type: 'choice',
     icon: 'predictive-analysis',
     title: '自动判断使用时机',
-    value: 3,
+    value: CopilotDocV1.SkillUsageType.Automatically,
     description: '(锐意开发中) 画饼.jpg',
     disabled: true,
   },
@@ -65,6 +65,16 @@ export function findOperatorSkillUsage(
   )
 }
 
+export function getSkillUsageTitle(
+  skillUsage: CopilotDocV1.SkillUsageType,
+  skillTimes?: CopilotDocV1.SkillTimes,
+) {
+  if (skillUsage === CopilotDocV1.SkillUsageType.ReadyToUseTimes) {
+    return `好了就用（${skillTimes ? `${skillTimes}次` : '指定次数'}）`
+  }
+  return findOperatorSkillUsage(skillUsage).title
+}
+
 export interface OperatorDirection {
   icon?: IconName
   title: string