feat: add

eoLayout option

Author: Handiwork

src/components/OperationCard.tsx

@@ -5,6 +5,7 @@ import {
   DrawerSize,
   Elevation,
   H4,
+  H5,
   Icon,
   Tag
 } from '@blueprintjs/core'
@@ -15,16 +16,17 @@ import { handleCopyShortCode, handleDownloadJSON } from 'services/operation'
 
 import { RelativeTime } from 'components/RelativeTime'
 import { OperationRating } from 'components/viewer/OperationRating'
-import { OperationListItem } from 'models/operation'
+import { OpDifficulty, 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 { EDifficulty } from './entity/EDifficulty'
+import { EDifficultyLevel, NeoELevel } from './entity/ELevel'
 import { OperationViewer } from './viewer/OperationViewer'
 
-export const OperationCard = ({
+export const NeoOperationCard = ({
   operation,
   operationDoc,
 }: {
@@ -97,13 +99,11 @@ export const OperationCard = ({
           </Tooltip2>
         </div>
         <div className="flex items-center text-slate-900">
-          <EDifficultyLevel
-            level={
-              findLevelByStageName(levels, operationDoc.stageName) ||
-              createCustomLevel(operationDoc.stageName)
-            }
-            difficulty={operationDoc.difficulty}
-          />
+          <div className="flex flex-wrap">
+            <NeoELevel level={findLevelByStageName(levels, operationDoc.stageName) ||
+              createCustomLevel(operationDoc.stageName)} />
+            <EDifficulty difficulty={operationDoc.difficulty ?? OpDifficulty.UNKNOWN} />
+          </div>
         </div>
         <div className='flex-1 flex flex-col gap-2 justify-center'>
           <div className="text-gray-700 leading-normal">
@@ -162,6 +162,147 @@ export const OperationCard = ({
   )
 }
 
+export const OperationCard = ({
+  operation,
+  operationDoc,
+}: {
+  operation: OperationListItem
+  operationDoc: CopilotDocV1.Operation
+}) => {
+  const levels = useLevels()?.data?.data || []
+  const [drawerOpen, setDrawerOpen] = useState(false)
+
+  return (
+    <>
+      <Drawer
+        size={DrawerSize.LARGE}
+        isOpen={drawerOpen}
+        onClose={() => setDrawerOpen(false)}
+      >
+        <OperationViewer
+          operationId={operation.id}
+          onCloseDrawer={() => setDrawerOpen(false)}
+        />
+      </Drawer>
+
+      <Card
+        interactive={true}
+        elevation={Elevation.TWO}
+        className="mb-4 sm:mb-2 last:mb-0"
+        onClick={() => setDrawerOpen(true)}
+      >
+        <div className="flex flex-wrap mb-4 sm:mb-2">
+          {/* title */}
+          <div className="flex flex-col gap-3">
+            <div className="flex gap-2">
+              <H4 className="inline-block pb-1 border-b-2 border-zinc-200 border-solid mb-2">
+                {operationDoc.doc.title}
+              </H4>
+              <Tooltip2
+                placement="bottom"
+                content={
+                  <div className="max-w-sm dark:text-slate-900">
+                    下载原 JSON
+                  </div>
+                }
+              >
+                <Button
+                  small
+                  icon="download"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleDownloadJSON(operationDoc)
+                  }}
+                />
+              </Tooltip2>
+              <Tooltip2
+                placement="bottom"
+                content={
+                  <div className="max-w-sm dark:text-slate-900">
+                    复制神秘代码
+                  </div>
+                }
+              >
+                <Button
+                  small
+                  icon="clipboard"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleCopyShortCode(operation)
+                  }}
+                />
+              </Tooltip2>
+            </div>
+            <H5 className="flex items-center text-slate-900 -mt-3">
+              <EDifficultyLevel
+                level={
+                  findLevelByStageName(levels, operationDoc.stageName) ||
+                  createCustomLevel(operationDoc.stageName)
+                }
+                difficulty={operationDoc.difficulty}
+              />
+            </H5>
+          </div>
+
+          <div className="lg:flex-1 hidden" />
+
+          {/* meta */}
+          <div className="flex flex-col flex-1 gap-y-1.5 gap-x-4">
+            <div className="flex flex-wrap sm:justify-end items-center gap-x-4 gap-y-1 text-zinc-500">
+              <div className="flex items-center gap-1.5">
+                <Icon icon="star" />
+                <OperationRating
+                  className="text-sm"
+                  operation={operation}
+                  layout="horizontal"
+                />
+              </div>
+
+              <Tooltip2 placement="top" content={`访问量：${operation.views}`}>
+                <div>
+                  <Icon icon="eye-open" className="mr-1.5" />
+                  <span>{operation.views}</span>
+                </div>
+              </Tooltip2>
+
+              <div>
+                <Icon icon="time" className="mr-1.5" />
+                <RelativeTime
+                  Tooltip2Props={{ placement: 'top' }}
+                  moment={operation.uploadTime}
+                />
+              </div>
+            </div>
+            <div className="text-zinc-500 self-end">
+              <Tooltip2 placement="top" content={`作者：${operation.uploader}`}>
+                <div>
+                  <Icon icon="user" className="mr-1.5" />
+                  <span>{operation.uploader}</span>
+                </div>
+              </Tooltip2>
+            </div>
+          </div>
+        </div>
+        <div className="flex md:flex-row flex-col gap-4">
+          <div className="text-gray-700 leading-normal md:w-1/2">
+            {/* <div className="text-sm text-zinc-600 mb-2 font-bold">作业描述</div> */}
+            <Paragraphs
+              content={operationDoc.doc.details}
+              limitHeight={21 * 13.5} // 13 lines, 21px per line; the extra 0.5 line is intentional so the `mask` effect is obvious
+            />
+          </div>
+          <div className="md:w-1/2">
+            <div className="text-sm text-zinc-600 mb-2 font-bold">
+              干员/干员组
+            </div>
+            <OperatorTags operationDoc={operationDoc} />
+          </div>
+        </div>
+      </Card>
+    </>
+  )
+}
+
 const OperatorTags = ({
   operationDoc: { opers, groups },
 }: {

src/components/OperationList.tsx

@@ -1,15 +1,15 @@
 import { Button, NonIdealState } from '@blueprintjs/core'
 
 import { UseOperationsParams, useOperations } from 'apis/query'
-import { ComponentType, useMemo } from 'react'
+import { ComponentType, ReactNode, useMemo } from 'react'
 
 import { toCopilotOperation } from '../models/converter'
 import { CopilotDocV1 } from '../models/copilot.schema'
 import { OperationListItem } from '../models/operation'
-import { OperationCard } from './OperationCard'
+import { NeoOperationCard, OperationCard } from './OperationCard'
 import { withSuspensable } from './Suspensable'
 
-export const OperationList: ComponentType<UseOperationsParams> =
+export const OperationList: ComponentType<UseOperationsParams & { neoLayout?: boolean }> =
   withSuspensable(
     (props) => {
       const { operations, size, setSize, isValidating, isReachingEnd } =
@@ -28,17 +28,30 @@ export const OperationList: ComponentType<UseOperationsParams> =
         return { operation, doc }
       })
 
+      const { neoLayout = true } = props
+
+      let items: ReactNode = operationsWithDoc.map(({ operation, doc }) => (
+        <OperationCard
+          operation={operation}
+          operationDoc={doc}
+          key={operation.id}
+        />
+      ))
+      if (neoLayout) {
+        items = <div className='grid gap-4' style={{ gridTemplateColumns: "repeat(auto-fill, minmax(20rem, 1fr)" }}>
+          {operationsWithDoc.map(({ operation, doc }) => (
+            <NeoOperationCard
+              operation={operation}
+              operationDoc={doc}
+              key={operation.id}
+            />
+          ))}
+        </div>
+      }
+
       return (
         <>
-          <div className='grid gap-4' style={{ gridTemplateColumns: "repeat(auto-fill, minmax(20rem, 1fr)" }}>
-            {operationsWithDoc.map(({ operation, doc }) => (
-              <OperationCard
-                operation={operation}
-                operationDoc={doc}
-                key={operation.id}
-              />
-            ))}
-          </div>
+          {items}
 
           {isReachingEnd && operations.length === 0 && (
             <NonIdealState

src/components/Operations.tsx

@@ -4,6 +4,7 @@ import {
   Card,
   FormGroup,
   InputGroup,
+  Switch
 } from '@blueprintjs/core'
 
 import { UseOperationsParams } from 'apis/query'
@@ -14,6 +15,7 @@ import { ComponentType, useMemo, useState } from 'react'
 import { CardTitle } from 'components/CardTitle'
 import { OperationList } from 'components/OperationList'
 
+import { neoLayoutAtom } from 'store/pref'
 import { authAtom } from '../store/auth'
 import { OperatorSelect } from './OperatorSelect'
 import { withSuspensable } from './Suspensable'
@@ -27,6 +29,7 @@ export const Operations: ComponentType = withSuspensable(() => {
     [],
   )
   const [authState] = useAtom(authAtom)
+  const [neoLayout, setNeoLayout] = useAtom(neoLayoutAtom)
 
   return (
     <>
@@ -86,7 +89,7 @@ export const Operations: ComponentType = withSuspensable(() => {
             }
           />
         </FormGroup>
-        <FormGroup label="排序" contentClassName="flex flex-wrap gap-y-2">
+        <FormGroup label="排序" contentClassName="flex flex-wrap gap-y-2 gap-x-2">
           <ButtonGroup>
             <Button
               icon="flame"
@@ -130,11 +133,17 @@ export const Operations: ComponentType = withSuspensable(() => {
               看看我的
             </Button>
           )}
+
+          <Switch checked={neoLayout} onChange={(e) => {
+            setNeoLayout((e.target as HTMLInputElement).checked)
+          }}>
+            启用新版布局
+          </Switch>
         </FormGroup>
       </Card>
 
       <div className="tabular-nums">
-        <OperationList {...queryParams} />
+        <OperationList {...queryParams} neoLayout={neoLayout} />
       </div>
     </>
   )

src/components/entity/ELevel.tsx

@@ -1,4 +1,4 @@
-import { Tag } from '@blueprintjs/core'
+import { H4, Tag } from '@blueprintjs/core'
 
 import { FC } from 'react'
 
@@ -7,7 +7,7 @@ import { Level, OpDifficulty } from 'models/operation'
 
 import { isCustomLevel } from '../../models/level'
 
-export const ELevel: FC<{
+export const NeoELevel: FC<{
   className?: string
   level: Level
 }> = ({ level }) => {
@@ -34,6 +34,34 @@ export const ELevel: FC<{
   )
 }
 
+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 items-center mx-1">
+        <div className="flex flex-col mr-2">
+          <H4 className="inline-block font-bold my-auto">{catThree}</H4>
+        </div>
+        <div className="flex flex-col">
+          <span className="text-xs font-light">{catOne}</span>
+          <span className="text-xs">{catTwo}</span>
+        </div>
+      </div>
+    </Tag>
+  )
+}
+
+
 export const EDifficultyLevel: FC<{
   level: Level
   difficulty?: OpDifficulty

src/store/pref.ts

@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils"
+
+export const neoLayoutAtom = atomWithStorage("neo-layout", true)