Editor v2 (#402)

功能已完整，等合并到 dev 之后就可以上线测试了

新编辑器是独立运行的，虽然修改了一些和旧编辑器共用的代码，但不影响旧编辑器的使用

Author: guansss

package.json

@@ -23,9 +23,9 @@
     "@blueprintjs/core": "^4.15.1",
     "@blueprintjs/popover2": "^1.12.1",
     "@blueprintjs/select": "^4.8.18",
-    "@dnd-kit/core": "^6.0.5",
-    "@dnd-kit/sortable": "^7.0.1",
-    "@dnd-kit/utilities": "^3.2.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@iconify/icons-simple-icons": "^1.2.22",
     "@iconify/react": "^3.2.2",
     "@sentry/react": "^7.27.0",
@@ -40,7 +40,10 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fuse.js": "^6.6.2",
+    "immer": "^10.1.1",
     "jotai": "^2.7.0",
+    "jotai-devtools": "^0.11.0",
+    "jotai-immer": "^0.4.1",
     "linkify-react": "^3.0.4",
     "linkifyjs": "^3.0.5",
     "lodash-es": "^4.17.21",
@@ -54,6 +57,7 @@
     "react-hook-form": "^7.33.1",
     "react-markdown": "^8.0.5",
     "react-rating": "^2.0.5",
+    "react-resizable-panels": "^2.1.8",
     "react-rnd": "^10.4.1",
     "react-router-dom": "6",
     "react-spring": "^9.4.5",
@@ -62,9 +66,10 @@
     "remark-gfm": "^3.0.1",
     "snakecase-keys": "^5.4.4",
     "swr": "^2.2.5",
-    "type-fest": "^4.10.2",
+    "type-fest": "^4.40.1",
     "unfetch": "^4.2.0",
-    "vite-tsconfig-paths": "^3.5.0"
+    "vite-tsconfig-paths": "^3.5.0",
+    "zod": "^4.0.0-beta.20250424T163858"
   },
   "devDependencies": {
     "@hookform/devtools": "^4.1.1",
@@ -75,7 +80,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/parser": "^7.0.1",
-    "@vitejs/plugin-react": "^1.3.0",
+    "@vitejs/plugin-react": "^4.4.0",
     "autoprefixer": "^10.4.7",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",

scripts/shared.ts

@@ -56,6 +56,7 @@ const CHARACTER_TABLE_JSON_URL_EN =
   'https://raw.githubusercontent.com/Kengxxiao/ArknightsGameData_YoStar/main/en_US/gamedata/excel/character_table.json'
 const UNIEQUIP_TABLE_JSON_URL_EN =
   'https://raw.githubusercontent.com/Kengxxiao/ArknightsGameData_YoStar/main/en_US/gamedata/excel/uniequip_table.json'
+
 const CHARACTER_BLOCKLIST = [
   'char_512_aprot', // 暮落(集成战略)：It's just not gonna be there.
   'token_10012_rosmon_shield', // 迷迭香的战术装备：It's just not gonna be there.
@@ -85,8 +86,16 @@ export async function getOperators() {
       json(UNIEQUIP_TABLE_JSON_URL_EN),
     ])
 
-  const { subProfDict: subProfDictCN } = uniequipTableCN
+  const { subProfDict: subProfDictCN, equipDict } = uniequipTableCN
   const { subProfDict: subProfDictEN } = uniequipTableEN
+  const equipsByOperatorId = Object.values(equipDict).reduce(
+    (acc: Record<string, any[]>, equip: any) => {
+      acc[equip.charId] ||= []
+      acc[equip.charId].push(equip)
+      return acc
+    },
+    {},
+  )
 
   const opIds = Object.keys(charTableCN)
   const professions: Professions = []
@@ -129,6 +138,12 @@ export async function getOperators() {
           })
         }
       }
+      const modules = equipsByOperatorId[id]
+        ?.sort((a, b) => a.charEquipOrder - b.charEquipOrder)
+        .map(({ typeName1, typeName2 }) => {
+          return typeName1 === 'ORIGINAL' ? '' : typeName2
+        })
+        .map((m) => (m === 'A' ? 'α' : m === 'D' ? 'Δ' : m))
       return [
         {
           id: id,
@@ -141,6 +156,7 @@ export async function getOperators() {
               ? 0
               : Number(op.rarity?.split('TIER_').join('') || 0),
           alt_name: op.appellation,
+          modules,
         },
       ]
     }),

src/apis/operation.ts

@@ -4,7 +4,7 @@ import {
   CopilotInfoStatusEnum,
   QueriesCopilotRequest,
 } from 'maa-copilot-client'
-import useSWR from 'swr'
+import useSWR, { SWRConfiguration } from 'swr'
 import useSWRInfinite from 'swr/infinite'
 
 import { toCopilotOperation } from 'models/converter'
@@ -161,16 +161,15 @@ export function useRefreshOperations() {
   return () => refresh((key) => key.includes('operations'))
 }
 
-interface UseOperationParams {
+interface UseOperationParams extends SWRConfiguration {
   id?: number
-  suspense?: boolean
 }
 
-export function useOperation({ id, suspense }: UseOperationParams) {
+export function useOperation({ id, ...config }: UseOperationParams) {
   return useSWR(
     id ? ['operation', id] : null,
     () => getOperation({ id: id! }),
-    { suspense },
+    config,
   )
 }
 
@@ -196,7 +195,8 @@ export async function createOperation(req: {
   content: string
   status: CopilotInfoStatusEnum
 }) {
-  await new OperationApi().uploadCopilot({ copilotCUDRequest: req })
+  return (await new OperationApi().uploadCopilot({ copilotCUDRequest: req }))
+    .data
 }
 
 export async function updateOperation(req: {

src/assets/icons/elite_0.png

@@ -113,7 +113,9 @@ export const ActionCard: FC<ActionCardProps> = ({
           {action.preDelay ? formatDuration(action.preDelay) : '-'}
         </InlineCondition>
         <InlineCondition title={t.components.ActionCard.rear_delay}>
-          {action.rearDelay ? formatDuration(action.rearDelay) : '-'}
+          {action.rearDelay || action.postDelay
+            ? formatDuration(action.rearDelay || action.postDelay!)
+            : '-'}
         </InlineCondition>
       </div>
     </Card>

src/assets/icons/elite_1.png

@@ -0,0 +1,37 @@
+import { FC } from 'react'
+
+interface MasteryIconProps extends React.SVGProps<SVGSVGElement> {
+  mastery: number
+  mainClassName?: string
+  subClassName?: string
+}
+
+export const MasteryIcon: FC<MasteryIconProps> = ({
+  mastery,
+  mainClassName = 'fill-current',
+  subClassName = 'fill-gray-300 dark:fill-gray-600',
+  ...props
+}) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" {...props}>
+      <circle
+        className={mastery >= 1 ? mainClassName : subClassName}
+        cx="50"
+        cy="27"
+        r="22"
+      />
+      <circle
+        className={mastery >= 2 ? mainClassName : subClassName}
+        cx="75"
+        cy="70"
+        r="22"
+      />
+      <circle
+        className={mastery >= 3 ? mainClassName : subClassName}
+        cx="25"
+        cy="70"
+        r="22"
+      />
+    </svg>
+  )
+}

src/assets/icons/elite_2.png

@@ -1,4 +1,5 @@
-import { Button, ButtonProps, Label } from '@blueprintjs/core'
+import { Button, ButtonProps, Classes, Label } from '@blueprintjs/core'
+import { Classes as Popover2Classes } from '@blueprintjs/popover2'
 import {
   QueryList,
   Select2,
@@ -27,8 +28,9 @@ export const Select = <T,>({
   canReset ??= selectedItem !== undefined
 
   return (
-    <Label className={clsx('!flex items-center !mb-0', className)}>
+    <Label className={clsx('!inline-flex items-center !mb-0', className)}>
       <Select2
+        ref={patchHandleItemSelect}
         className="!mt-0"
         resetOnQuery={false} // 这个功能有无限 reset 的 bug，不要用
         inputProps={{
@@ -39,8 +41,6 @@ export const Select = <T,>({
           ),
         }}
         {...props}
-        // 传给 QueryList，给下面的补丁用
-        {...{ _parentType: 'Select' }}
       />
       {canReset && (
         <Button
@@ -60,8 +60,28 @@ export const Select = <T,>({
   )
 }
 
+// 临时实现 PR 里的内容： https://github.com/palantir/blueprint/pull/6070
+// TODO: 升级到 BP 5 后删除
+function patchHandleItemSelect(instance: Select2<any> | null) {
+  if (!instance || instance['handleItemSelect']._patched) return
+  instance['handleItemSelect'] = (
+    item: unknown,
+    event?: React.SyntheticEvent<HTMLElement>,
+  ) => {
+    const target = event?.target as HTMLElement
+    const shouldDismiss =
+      target
+        ?.closest(`.${Classes.MENU_ITEM}`)
+        ?.classList?.contains(Popover2Classes.POPOVER2_DISMISS) ?? true
+
+    instance.setState({ isOpen: !shouldDismiss })
+    instance.props.onItemSelect?.(item, event)
+  }
+  instance['handleItemSelect']._patched = true
+}
+//
+
 // 修复 BP 的远古 bug：https://github.com/palantir/blueprint/issues/3751
-// 补丁只对 Select 组件启用，因为不知道对 Suggest 和 MultiSelect 是否有效，先不管了
 
 const originalSetQuery =
   (QueryList.prototype.setQuery as any)._original ??
@@ -77,10 +97,7 @@ const originalGetActiveIndex =
   (QueryList.prototype['getActiveIndex'] as any)._original ??
   QueryList.prototype['getActiveIndex']
 QueryList.prototype['getActiveIndex'] = function (items) {
-  if (
-    this.props['_parentType'] === 'Select' &&
-    (this as any)._isCallingSetQuery
-  ) {
+  if ((this as any)._isCallingSetQuery) {
     const activeItem =
       this.props.activeItem === undefined
         ? this.state.activeItem