Merge pull request #119 from MaaAssistantArknights/dev

Author: GalvinGao

src/apis/arknights.ts

@@ -5,6 +5,7 @@ import type { Response } from 'models/network'
 import type { Level } from 'models/operation'
 
 import { withoutUnusedLevels } from '../models/level'
+import { request } from '../utils/fetcher'
 import { enableCache } from '../utils/swr-cache'
 
 const ONE_DAY = 1000 * 60 * 60 * 24
@@ -25,19 +26,34 @@ export const useLevels = ({ suspense = true }: { suspense?: boolean } = {}) => {
       !!data?.data && Array.isArray(data.data) && 'stageId' in data.data[0],
   )
 
-  return useSWR<Response<Level[]>>(url, {
+  const response = useSWR<Response<Level[]>>(url, {
     focusThrottleInterval: ONE_DAY,
     suspense,
     fetcher: async (input: string, init?: RequestInit) => {
-      // TODO: remove this when backend is ready
-      const res = await requestBuiltInLevels(init)
-      // const res = await request<Response<Level[]>>(input, init)
+      let res: Response<Level[]>
+
+      try {
+        res = await request<Response<Level[]>>(input, init)
+      } catch (e) {
+        // fallback to built-in levels while retaining the error
+        res = await requestBuiltInLevels(init)
+        ;(res as any).__serverError = e
+      }
 
       res.data = withoutUnusedLevels(res.data)
 
       return res
     },
   })
+
+  if ((response.data as any)?.__serverError) {
+    return {
+      ...response,
+      error: (response.data as any).__serverError,
+    }
+  }
+
+  return response
 }
 
 const requestBuiltInLevels = async (

src/components/OperationCard.tsx

@@ -16,20 +16,21 @@ import { RelativeTime } from 'components/RelativeTime'
 import { OperationRating } from 'components/viewer/OperationRating'
 import { OperationListItem } from 'models/operation'
 
+import { useLevels } from '../apis/arknights'
+import { CopilotDocV1 } from '../models/copilot.schema'
+import { createCustomLevel, findLevelByStageName } from '../models/level'
 import { Paragraphs } from './Paragraphs'
 import { EDifficultyLevel } from './entity/ELevel'
 import { OperationViewer } from './viewer/OperationViewer'
 
-const formatOperatorTag = (operator: string) => {
-  const splitted = operator.split('::')
-  return splitted.length > 1 ? `${splitted[0]} ${splitted[1]}` : operator
-}
-
 export const OperationCard = ({
   operation,
+  operationDoc,
 }: {
   operation: OperationListItem
+  operationDoc: CopilotDocV1.Operation
 }) => {
+  const levels = useLevels({ suspense: false })?.data?.data || []
   const [drawerOpen, setDrawerOpen] = useState(false)
   return (
     <>
@@ -100,7 +101,11 @@ export const OperationCard = ({
         </div>
         <H5 className="flex items-center text-slate-900 -mt-3">
           <EDifficultyLevel
-            level={operation.level}
+            level={
+              operation.level ||
+              findLevelByStageName(levels, operationDoc.stageName) ||
+              createCustomLevel(operationDoc.stageName)
+            }
             difficulty={operation.difficulty}
           />
         </H5>
@@ -111,21 +116,43 @@ export const OperationCard = ({
           </div>
           <div className="w-1/2 ml-4">
             <div className="text-sm text-zinc-600 mb-2 font-bold">
-              使用干员与技能
-            </div>
-            <div>
-              {operation.operators.map((operator, index) => (
-                <Tag key={index} className="mr-2 last:mr-0 mb-1 last:mb-0">
-                  {formatOperatorTag(operator)}
-                </Tag>
-              ))}
-              {operation.operators.length === 0 && (
-                <span className="text-gray-500">无记录</span>
-              )}
+              干员/干员组
             </div>
+            <OperatorTags operationDoc={operationDoc} />
           </div>
         </div>
       </Card>
     </>
   )
 }
+
+const OperatorTags = ({
+  operationDoc: { opers, groups },
+}: {
+  operationDoc: CopilotDocV1.Operation
+}) => {
+  return opers?.length && groups?.length ? (
+    <div>
+      {opers?.map(({ name, skill }, index) => (
+        <Tag key={index} className="mr-2 last:mr-0 mb-1 last:mb-0">
+          {`${name} ${skill ?? 1}`}
+        </Tag>
+      ))}
+      {groups?.map(({ name, opers }, index) => (
+        <Tooltip2
+          className="mr-2 last:mr-0 mb-1 last:mb-0"
+          placement="top"
+          content={
+            opers
+              ?.map(({ name, skill }) => `${name} ${skill ?? 1}`)
+              .join(', ') || '无干员'
+          }
+        >
+          <Tag key={index}>[{name}]</Tag>
+        </Tooltip2>
+      ))}
+    </div>
+  ) : (
+    <div className="text-gray-500">无记录</div>
+  )
+}

src/components/OperationList.tsx

@@ -1,8 +1,11 @@
 import { Button, NonIdealState } from '@blueprintjs/core'
 
 import { UseOperationsParams, useOperations } from 'apis/query'
-import { ComponentType } from 'react'
+import { ComponentType, useMemo } from 'react'
 
+import { toCopilotOperation } from '../models/converter'
+import { CopilotDocV1 } from '../models/copilot.schema'
+import { OperationListItem } from '../models/operation'
 import { OperationCard } from './OperationCard'
 import { withSuspensable } from './Suspensable'
 
@@ -11,10 +14,28 @@ export const OperationList: ComponentType<UseOperationsParams> =
     (props) => {
       const { operations, size, setSize, isValidating, isReachingEnd } =
         useOperations(props)
+
+      const docCache = useMemo(
+        () => new WeakMap<OperationListItem, CopilotDocV1.Operation>(),
+        [],
+      )
+      const operationsWithDoc = operations.map((operation) => {
+        let doc = docCache.get(operation)
+        if (!doc) {
+          doc = toCopilotOperation(operation)
+          docCache.set(operation, doc)
+        }
+        return { operation, doc }
+      })
+
       return (
         <>
-          {operations?.map((operation) => (
-            <OperationCard operation={operation} key={operation.id} />
+          {operationsWithDoc.map(({ operation, doc }) => (
+            <OperationCard
+              operation={operation}
+              operationDoc={doc}
+              key={operation.id}
+            />
           ))}
 
           {isReachingEnd && operations.length === 0 && (

src/components/editor/OperationEditor.tsx

@@ -29,6 +29,7 @@ import type { CopilotDocV1 } from 'models/copilot.schema'
 import { Level, OpDifficulty, OpDifficultyBitFlag } from 'models/operation'
 
 import {
+  createCustomLevel,
   findLevelByStageName,
   getPrtsMapUrl,
   getStageIdWithDifficulty,
@@ -50,19 +51,6 @@ import {
   EditorPerformerProps,
 } from './operator/EditorPerformer'
 
-function createArbitraryLevel(name: string): Level {
-  return {
-    name,
-    stageId: name,
-    levelId: '',
-    catOne: '',
-    catTwo: '',
-    catThree: '自定义关卡',
-    width: 0,
-    height: 0,
-  }
-}
-
 export const StageNameInput: FC<{
   control: Control<CopilotDocV1.Operation, object>
 }> = ({ control }) => {
@@ -107,7 +95,7 @@ export const StageNameInput: FC<{
   const selectedLevel = useMemo(
     () =>
       value
-        ? findLevelByStageName(levels, value) || createArbitraryLevel(value)
+        ? findLevelByStageName(levels, value) || createCustomLevel(value)
         : // return null to ensure the component is controlled
           null,
     [levels, value],
@@ -144,9 +132,6 @@ export const StageNameInput: FC<{
             <p>键入以搜索</p>
             <p>对于主线、活动关卡：键入关卡代号、关卡中文名或活动名称</p>
             <p>对于悖论模拟关卡：键入关卡名或干员名</p>
-            <p className="text-red-700">
-              目前服务器尚未恢复，此处的关卡是内置在编辑器里的本地数据，可能不包含近期的新关卡
-            </p>
           </>
         ),
       }}
@@ -178,7 +163,7 @@ export const StageNameInput: FC<{
             className: 'max-h-64 overflow-auto',
           }}
           noResults={<MenuItem disabled text="没有匹配的关卡" />}
-          createNewItemFromQuery={(query) => createArbitraryLevel(query)}
+          createNewItemFromQuery={(query) => createCustomLevel(query)}
           createNewItemRenderer={(query, active, handleClick) => (
             <MenuItem
               key="create-new-item"

src/components/entity/ELevel.tsx

@@ -5,19 +5,29 @@ import { FC } from 'react'
 import { EDifficulty } from 'components/entity/EDifficulty'
 import { Level, OpDifficulty } from 'models/operation'
 
+import { isCustomLevel } from '../../models/level'
+
 export const ELevel: FC<{
   className?: string
   level: Level
 }> = ({ level }) => {
+  let { catOne, catTwo, catThree } = level
+
+  if (isCustomLevel(level)) {
+    catOne = '自定义关卡'
+    catTwo = ''
+    catThree = level.name
+  }
+
   return (
     <Tag className="transition border border-solid !text-xs tracking-tight !p-1 leading-none !min-h-0 bg-slate-200 border-slate-300 text-slate-700">
-      <div className="flex mx-1">
+      <div className="flex items-center mx-1">
         <div className="flex flex-col mr-2">
-          <H4 className="inline-block font-bold my-auto">{level.catThree}</H4>
+          <H4 className="inline-block font-bold my-auto">{catThree}</H4>
         </div>
         <div className="flex flex-col">
-          <span className="text-xs font-light">{level.catOne}</span>
-          <span className="text-xs">{level.catTwo}</span>
+          <span className="text-xs font-light">{catOne}</span>
+          <span className="text-xs">{catTwo}</span>
         </div>
       </div>
     </Tag>

src/components/viewer/OperationViewer.tsx

@@ -37,7 +37,10 @@ import { authAtom } from 'store/auth'
 import { NetworkError } from 'utils/fetcher'
 import { wrapErrorMessage } from 'utils/wrapErrorMessage'
 
+import { useLevels } from '../../apis/arknights'
 import { toCopilotOperation } from '../../models/converter'
+import { CopilotDocV1 } from '../../models/copilot.schema'
+import { createCustomLevel, findLevelByStageName } from '../../models/level'
 import { toShortCode } from '../../models/shortCode'
 
 const ManageMenu: FC<{
@@ -109,6 +112,8 @@ export const OperationViewer: ComponentType<{
     const { data, error, mutate } = useOperation(operationId)
     const operation = data?.data
 
+    const levels = useLevels({ suspense: false })?.data?.data || []
+
     const [auth] = useAtom(authAtom)
     const authed = !!auth.token
 
@@ -250,7 +255,11 @@ export const OperationViewer: ComponentType<{
             <div className="flex flex-col">
               <FactItem title="作战">
                 <EDifficultyLevel
-                  level={operation.level}
+                  level={
+                    operation.level ||
+                    findLevelByStageName(levels, operationDoc.stageName) ||
+                    createCustomLevel(operationDoc.stageName)
+                  }
                   difficulty={operation.difficulty}
                 />
               </FactItem>
@@ -316,35 +325,42 @@ export const OperationViewer: ComponentType<{
               <H4 className="mb-4">干员与干员组</H4>
               <H5 className="mb-4 text-slate-600">干员</H5>
               <div className="flex flex-col mb-4">
-                {operation.operators.map((operator) => (
-                  <OperatorCard key={operator} operator={operator} />
+                {operationDoc.opers?.map((operator) => (
+                  <OperatorCard key={operator.name} operator={operator} />
                 ))}
-                {operation.operators.length === 0 && (
+                {!operationDoc.opers?.length && (
                   <EmptyOperator description="作业并未添加干员" />
                 )}
               </div>
 
               <H5 className="mb-4 text-slate-600">干员组</H5>
               <div className="flex flex-col">
-                {operation.groups.map((el) => (
-                  <Card elevation={Elevation.ONE} className="mb-4">
+                {operationDoc.groups?.map((group) => (
+                  <Card
+                    elevation={Elevation.ONE}
+                    className="mb-4"
+                    key={group.name}
+                  >
                     <div className="flex flex-col">
-                      <H5 className="text-gray-800 font-bold">{el.name}</H5>
+                      <H5 className="text-gray-800 font-bold">{group.name}</H5>
 
                       <div className="flex flex-col">
-                        {el.operators.filter(Boolean).map((operator) => (
-                          <OperatorCard key={operator} operator={operator} />
+                        {group.opers?.filter(Boolean).map((operator) => (
+                          <OperatorCard
+                            key={operator.name}
+                            operator={operator}
+                          />
                         ))}
 
-                        {el.operators.filter(Boolean).length === 0 && (
+                        {group.opers?.filter(Boolean).length === 0 && (
                           <EmptyOperator description="干员组中并未添加干员" />
                         )}
                       </div>
                     </div>
                   </Card>
                 ))}
 
-                {operation.groups.length === 0 && (
+                {!operationDoc.groups?.length && (
                   <EmptyOperator
                     title="暂无干员组"
                     description="作业并未添加干员组"
@@ -369,9 +385,9 @@ export const OperationViewer: ComponentType<{
 )
 
 const OperatorCard: FC<{
-  operator: string
+  operator: CopilotDocV1.Operator
 }> = ({ operator }) => {
-  const [name, skill] = operator.split('::')
+  const { name, skill } = operator
   return (
     <Card elevation={Elevation.ONE} className="mb-2 last:mb-0 flex">
       <OperatorAvatar name={name} size="large" className="mr-3" />